数组方法大全

  数组的方法很多,ECMScript5又提供了好几种方法。有空把之前的云上的笔记整理了一下,方便自己以后查找使用。

一、ECMScript 3的Array.prototype中定义的方法

1、join()
定义:将数组中所有的元素都转化为字符串拼接在一起,返回最后生成的字符串。
注意:不改变原数组

var a = [1,2,3];
console.log(a.join());    //1,2,3 默认使用逗号分隔
console.log(a.join(""));  //123   转化为字符串的常用方法
console.log(a.join("-")); //1-2-3 自定义分隔符
console.log(a);           //[1,2,3]  不修改原素组
var b = new Array(5);
console.log(b.join(‘*‘)); //****  4个连字号组成字符串

2、reverse()
定义:将数组中的元素颠倒顺序,返回逆序的字符串。
注意:原数组被改变

var a2=[1,2,3];
console.log(a2.reverse());        //[3,2,1]
console.log(a2);                  //[3,2,1]原数组被修改
console.log(a2.reverse().join()); //1,2,3 因为原数组又被修改了

  

3、sort()
定义:将数组中的元素排序后返回排序后的数组、
注意:数组以字母表顺序排。
原数组被改变
可以自定义按非字母的顺序排序,只要个sort()传入一个比较的匿名的比较函数可以了。
该比较函数决定了两个参数的在排好数组中的先后顺序,加入第一个参数在前,返回小于0的值,反之。相等为0。

    var a3=[‘c‘,‘b‘,undefined,‘a‘,‘z‘];
    console.log(a3.sort());    //["a", "b", "c", "z", undefined],undefined被排到最后
    console.log(a3);           //["a", "b", "c", "z", undefined]修改原数组  

    //自定义排序规则
    var a4 = [33,4,1111,2222];
    //console.log(a4.sort());  //[1111, 2222, 33, 4] 默认排序
    a4.sort(function(a,b){
    	return a-b;
    });
    console.log(a4);           //[4, 33, 1111, 2222]

  

4、concat()
定义:创建并返回一个新数组。新数组由原数组和concat()里面的参数组成
注意:不改变原数组
只能扁平化一维数组,高维不行(不会递归扁平化数组),高维数组(扁平化)降维可以看。

    var a5 = [1,2,3];
    console.log(a5.concat(4));            //[1,2,3,4]
    console.log(a5);                      //[1,2,3]  //原数组不改变
    console.log(a5.concat([4,5]));        //[1, 2, 3, 4, 5]
    console.log(a5.concat([4,5,[6,7]]));  //[1, 2, 3, 4, 5,[6,7]] //只能扁平化一维

  

5、slice()
定义:返回指定数组的片段或者子数组,两个参数分别指是片段的开始和结束位置(不包含结束的位置)。
注意:不改变原数组
如果没有参数,相当于生成一原数组的副本
生成的新数组不包含结束位置的元素
说明:字符串也可以使用这个方法 ,如"[Object Array]".slice(8,-1); =>Array

   var a6 = [1,2,3,4,5];
   console.log(a6.slice(1,3));   //[2,3]  //索引从1到3但包括3的子数组
   console.log(a6);              //[1,2,3,4,5]  //原数组不改变
   console.log(a6.slice(1));     //[2,3,4,5] 只有一个参数,则从该参数位置到末尾
   console.log(a6.slice(1,-1));  //[2,3,4] 参数为-1只向最后一个元素,但不包括它
   console.log(a6.slice(-2,-1))  //[4] 从倒数第2个数到倒数第一个数,但不包括倒数第一个数

  

6、splice()
定义:在数组中输入和删除元素的通用方法。返回的是由删除元素组成的新数组,没有删就返回空数组[]
前两个参数是指定需要删除的元素,后面的任意个数的参数是需要插入到原数组的元素
注意:原数组被改变

   var a7 = [1,2,3,4,5];
   b7 = a7.splice(2);
   console.log(b7);      //[3,4,5]   返回原数组从索引为2的元素到结尾被删除的部分
   console.log(a7);      //[1,2]     原数组是被修改之后的数组

   b7 = a7.splice(1,2);
   b7 = a7.splice(1,1);  // 从索引为1的元素开始删除1个元素
   console.log(b7);      //[2,3]   从索引为1的元素开始删除2个元素,也就是2和3
   console.log(a7);      //[1,4,5] 原数组是被删除之后剩余的数组

   var b7 = a7.splice(1,0,100);
   console.log(b7);      //[] 因为没有删除元素,所有返回的是一个空数组
   console.log(a7);      //[1, 100, 2, 3, 4, 5] 从索引为1的元素开始,删除0个元素,之后原索引为1的位置插入新元素

  

7、push()和pop()
定义:push在数组的末尾添加一个或者多个元素,返回新数组的长度。所以不能链式操作
pop删除数组的最后一个元素,返回它删除的值元素

组合使用push()和pop()可以实现先进后出的栈

var a8 = [1,2,3];
var b8 = a8.push(4,5);
console.log(b8);   //5  返回的是新数组的长度。
console.log(a8);   //[1,2,3,4,5] 直接原数组尾部添加4

var a9 = [1,2,3];
var b9 = a9.pop();
console.log(b9);   //3  返回的删除的元素。
console.log(a9);   //[1,2] 直接在原数组上删除元素3
//栈var stack = [];
stack.push(1,2,3);
console.log(stack);  //[1,2,3]
stack.pop();
console.log(stack);  //[1,2]
stack.push(100)
console.log(stack);  //[1, 2, 100]
stack.pop()
console.log(stack);  //[1, 2]

  

8、unshift()和shift()
定义:unshift是在数组头部添加一个或多个元素。如果一次性传入多个参数,多个参数按照按照原先的位置直接加到数

组中。返回新数组的新数组的长度。
shift:删除数组的第一个元素,并返回删除的元素

//组合使用push()和()可以实现先进先出的队列var queue = [];
queue.push(1,2,3);
console.log(queue);  //[1,2,3]
queue.shift();
console.log(queue);  //[2,3]
queue.push(100)
console.log(queue);  //[2, 3, 100]
queue.shift();
console.log(queue);  //[3,100]
queue.shift();
console.log(queue);  //[100]

  

9、toString()
定义:将数组数组中的每个元素转化为字符串。 输出用逗号分隔的字符串列表(可能数组的内部元素(数组)还会再次调

用toString(),高维数组扁平化正是利用这点)
注意:与不使用任何参数调用的jion()方法返回的字符串一样。

var a10 = [1,2,3];
var a11 = [1,2,[3,4,[5,6]]];
console.log(a10.toString());  //1,2,3
console.log(a10);             //原数组
console.log(a11.toString());  //1,2,3,4,6
console.log(a11);             //原数组

  

二、ECMScript 5中的数组方法

1、forEach()  //遍历
定义:该方法从头到尾遍历数组,为某个元素调用指定的函数。传递函数包括三个参数(数组元素、元素索引、数组本身

),如果只关心数组元素的值,可以只传一个参数。
注意:无法在所有元素的都传递给调用函数之前提前结束。也就是没有像for中一样的break语句。如果要提交终止,可以

把forEach()方法放到try块中。如果forEach()调用的函数抛出forEach.break异常,循环提前结束

var data = [1,2,3];
var sum = 0;
data.forEach(function(value){
  sum+=value;
});
console.log(sum);  //6

var data = [10,20,30];
data.forEach(function(v,i,a){
  a[i] = v*2;
});
console.log(data) //[20, 40, 60]

  

2、map()     //映射
定义:将调用的数组的每个元素传递给指定的函数,并返回一个新数组,它包含该该函数的返回值
注意:传递给map的函数应该有返回值,返回的是新数组,不修改调用的数组。

var data3 = [1,2,3];
var b = data3.map(function(val){
   return   val*10;
});
console.log(data3);  //[1,2,3]     不改变原数组
console.log(b);      //[10,20,30]  新数组

  

3、filter() //过滤
定义:返回的数组元素是调用的数组的一个子集,就传递的函数是用来做逻辑判定的,返回true,传给给判定函数的元素就是这个子集的成员。

var data4 = [1,2,3,4,5];
var b2 = data4.filter(function(val){
  return val<3;
});
console.log(b2);     //[1,2]
console.log(data4);  //[1,2,3,4,5] 不改变原数组   

var b3 = data4.filter(function(val,i){
  return i%2;
});
console.log(b3);     //[2,4] 返回索引为奇数的元素组成的数组

4、every() 和some()
这两种方法是数组的逻辑判定,他们针对数组中的所有元素应用指定的函数进行判定。返回true或者false
定义:every 当且仅针对数组中的所有元素调用判定的函数都返回true,它才返回true
some 至少有一个判定为true就返回true.

5、reduce()
定义:使用指定的函数将数组元素进行组合,生成一个单值。参数一是执行简化操作的函数,参数二是传给简化函数的初始值。

注意:一旦确认之后,就停止遍历数组了。

var data5 = [1,2,3];
var sum = data5.reduce(function(x,y){
  return  x+y;
},0);
console.log(sum);  //6

var product = data5.reduce(function(x,y){
  return  x*y;
},100);
console.log(product);  //600

 

6、indexOf()和lastIndexOf()
定义:搜索整个数组中具有给定值的位子,返回找到第一个元素的索引,如果没有找到就返回-1;indexOf()是从头找到尾,lastIndexOf()正好相反
注意:不接受函数作为参数,第一个参数是需要搜索的值,第二个参数是可选的,表示从哪里搜索,可以是负数,表示相对数组末尾的偏移量。
说明:字符串也有这两个方法,功能类似。

var data6 = [1,2,3,3,4,3,5];
console.log(data6.indexOf(3)); //2 第一个3的索引是2

  

7、isArray()
定义:判断对象是不是数组

三、作为数组的字符串

1、简单的使用

var str = "test"
str.charAt(1) //estr[1]        //e

  

2、可以调用数组的方法

注意:字符串是不可变的值,当成数组看待是只可读的。所以像push() sort() reverse() splice()等会修改原数组的方法,在字符串上是无效的。错误可能都没有提示!

var str = "hello";
Array.prototype.join.call(str," "); //"h e l l o"

Array.prototype.filter.call(str, function(x){
  return x.match(/o/g);             //["o"]
});

  

  

 

时间: 2024-10-27 13:00:36

数组方法大全的相关文章

JavaScript数组方法大全(第二篇)

数组方法大全(第二篇) 注意:如有错误欢迎指出,如有雷同纯属巧合,本博客参考书籍JavaScript权威指南,有兴趣的小伙伴可以去翻阅一下哦 forEach()方法 遍历数组,里面可以传递一个方法 var arr = [1,2,3]; arr.forEach(function (item,index,array) { //item:表示数组中元素的每一项 //index:表示每一项所对应的索引 //array:表示原数组 }) map()方法 将调用数组的每个元素传递给指定的函数,并返回一个新的

js数组方法大全

1.splice方法 /** *@index:添加,或者删除元素起始 *@howmany:删除几个元素 *@item.itemX 需要添加的元素 * */ arrayObject.splice(index,howmany,item1,.....,itemX) var a = [1,2,3,4] a.splice(0,1,1,1); a变为:[1,1,2,3,4] a.splice(1,0,"a") a变为:[1,"a",1,2,3,4] 原文地址:https://w

读取文件方法大全

原文链接:[Java]读取文件方法大全 - lovebread - 博客园 http://www.cnblogs.com/lovebread/archive/2009/11/23/1609122.html 1.按字节读取文件内容2.按字符读取文件内容3.按行读取文件内容 4.随机读取文件内容 public class ReadFromFile {    /**     * 以字节为单位读取文件,常用于读二进制文件,如图片.声音.影像等文件.     */    public static voi

js刷新页面方法大全

本文介绍下,用js刷新当前页面的几种方法,包括reload方法.replace方法.自动刷新方法等.有需要的朋友参考下吧 如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") 2,replace 方法

[Java]读取文件方法大全(转)

[Java]读取文件方法大全 1.按字节读取文件内容2.按字符读取文件内容3.按行读取文件内容 4.随机读取文件内容 public class ReadFromFile {    /**     * 以字节为单位读取文件,常用于读二进制文件,如图片.声音.影像等文件.     */    public static void readFileByBytes(String fileName) {        File file = new File(fileName);        Input

【转】Java读取文件方法大全

本文转自:http://www.cnblogs.com/lovebread/archive/2009/11/23/1609122.html#undefined 目录: 按字节读取文件内容 按字符读取文件内容 按行读取文件内容 随机读取文件内容 将内容追加到文件尾部 public class ReadFromFile { /** * 以字节为单位读取文件,常用于读二进制文件,如图片.声音.影像等文件. */ public static void readFileByBytes(String fil

Javascript 方法大全

原文:Javascript 方法大全 一.基础知识 1 创建脚本块 1: <script language=”JavaScript”> 2: JavaScript code goes here 3: </script> 2 隐藏脚本代码 1: <script language=”JavaScript”> 2: <!-- 3: document.write(“Hello”); 4: // --> 5: </script> 在不支持JavaScrip

PHP数组操作大全

1 <?php 2 /** 3 * File: phpstudy : array_test.php 4 * Created by PhpStorm. 5 * User: IhMfLy [email protected] 6 * Date: 2016-08-03 7 * Time: 10:36 8 */ 9 24 25 26 # 创建数组 27 $arr1_0 = array(); 28 $arr1_0[] = 23; #创建,再初始化 29 $arr1_0[] = "lisi";

js刷新页面方法大全(转)

刷新页面实现方式总结(HTML,ASP,JS) 转载  2008-11-13   作者:    我要评论 多种方法实现页面的刷新代码 定时刷新: 1,<script>setTimeout("location.href='url'",2000)</script> 说明:url是要刷新的页面URL地址 2000是等待时间=2秒, 2,<meta name="Refresh" content="n;url"> 说明: