数组常用操作方法以及ES6新增处理的数组方法

1、push 在数组末尾添加一个或多个元素，并返回数组的长度, 可以添加任意类型的值作为数组的一个元素。

语法：arr.push(newelement1,newelement2,....,newelementX)
示例代码：

var arr = [1,2];

arr.push(6);                // arr:[1,2,6];返回值为3

arr.push('aa');            // arr:[1,2,6,"aa"];返回值为4

arr.push(undefined);      // arr: [1,2,6,"aa",undefined];返回值为5

arr.push({a: "A", b: "B"});  // [1,2,6,"aa",undefined,{a: "A", b: "B"}];返回值为6

2、unshift 在最前面添加一个或多个元素，并返回数组的长度,可以添加任意类型的值作为数组的一个元素。

语法：arr.unshift(newelement1,newelement2,....,newelementX)

示例代码：

var arr = [1,2];

arr.unshift(9);      // arr:[9, 1, 2];返回值为3

arr.unshift('aa')   // arr:['aa',9, 1, 2];返回值为4

3、pop 删除最后一个元素,并返回删除元素的值；如果数组为空则返回undefine。该方法会改变原始数组

语法：arr.pop()

示例代码1：

var arr = [1,2,3,"aa",5];

arr.pop();       // arr: [1, 2, 3, "aa"];返回值为5

arr.pop();      // arr: [1, 2, 3];返回值为"aa"

示例代码2：

var arr = [];

arr.pop();      // 返回值为undefine

4、shift 删除数组第一个元素,并返回被删除的元素;如果数组为空则返回undefine。该方法会改变原始数组

语法：arr.shift()

示例代码1：

var arr = [1,"aa",3,4,5];

arr.shift();       // arr: ["aa", 3, 4,5];返回值为1

arr.shift();      // arr: [3, 4, 5];返回值为"aa"

示例代码2：

var arr = [];

arr.shift();      // 返回值为undefine

5、slice截取数组,得到截取的数组;不改变原始数组,得到新的数组.与String的substring()方法类似。

语法：slice(start,end)

ps:

1.start从0开始

2.包含start位置元素，不包含end位置元素

3.end可以省略，省略表示截取从start位置到数组结束

示例代码：

var arr = [1,2,3,4,5];

var a1 = arr.slice(1);        // a1: [2,3,4,5] ;arr不会被改变

var a2 = arr.slice(1,3);      // a2: [2,3] ;arr不会被改变

var a3 = arr.slice(3,4);     // a3: [4] ;arr不会被改变

6、splice剪接数组，向/从数组中添加/删除项目，然后返回被删除的项目，该方法会改变原始数组，索引从0开始

语法：splice(index,howmany,item1,.....,itemX)

ps:

1.index => 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

2.howmany => 可省略。要删除的项目数量。如果设置为 0，则不会删除项目，如果省略，则会删除index位置及其后面的所有元素。

3.item1, ..., itemX => 可选。向数组添加的新项目。

4.splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从数组中删除了元素，则返回的是含有被删除的元素的数组。

示例代码:

var arr = [1,2,3,4,5];   //以下注释结果分别对数组arr进行操作

arr.splice(1);   // arr:[1]; 返回值为数组[2,3,4,5]

arr.splice(1, 2);    // arr:[1, 4, 5]; 返回值为数组[2,3]

arr.splice(1, 0, 'A');   // arr:[1, "A",2,3, 4, 5]; 未删除元素，返回值为空数组[]

arr.splice(1, 2, 'A', 'B');   // arr:[1, "A", "B", 4, 5]; 返回值为数组：[2,3]

7、concat 合并两个或多个数组，得到新数组，原始数组不改变，如果要进行concat()操作的参数是数组，那么添加的是数组中的元素，而不是数组。

语法：arr.concat(arr1,arr2,......,arrN)

示例代码:

var arr1 = [1,2];

var arr2 = [3,4,5];

var arr3 = [6,7];

var arr = arr1.concat(arr2,arr3);     // arr:[1,2,3,4,5,6,7]

var arr4 = arr1.concat(3,4);            // arr:[1,2,3,4]

8、indexOf 数组元素索引，并返回元素索引，不存在返回-1,索引从0开始

语法：arr.indexOf(searchvalue,fromindex)

ps:

1.searchvalue => 必需。规定需检索的字符串值。

2.fromindex => 可选。元素开始检索的位置。如省略，则从数组的首个元素开始

3.indexOf()方法对大小写敏感！

示例代码：

var arr = ['a','b','c','d','e'];

arr.indexOf('a');       //返回值为0

arr.indexOf('f');       //返回值为-1

arr.indexOf('e',2);       //返回值为4

9、join 数组转字符串,与toString()方法类似

语法：arr.join(separator)

ps:

1.separator => 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

2.返回一个字符串。

3.该字符串是通过把数组arr中的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。

示例代码：

var a, b, c;

a = [0, 1, 2, 3, 4];

b = a.join("-");    // 0-1-2-3-4

c = a.toString();   // 0,1,2,3,4

10、reverse 颠倒数组中元素的顺序，该方法会改变原来的数组，而不会创建新的数组。

语法：arr.reverse()

示例代码：

var a = [1,2,3,4,5];

a.reverse();    //a：[5, 4, 3, 2, 1] 返回值为数组[5, 4, 3, 2, 1]

ES6数组新增的几个方法

ES6语法，IE9及以上才支持。不过可以通过babel转意支持IE低版本

 1.foreach()

var arr = [1,2,3,4];

arr.foreach((item,index,arr)=>{

    console.log(item);  //结果为1,2,3,4

});

//foreach遍历数组，无返回值，不改变原数组，仅仅只是遍历，常用于注册组件、指令等等。

2.map()

返回一个新数组。

var arr = [1,2,3,4];

arr.map((item,index,arr)=>{

    return item*10;  //结果为10,20,30,40

});

//map遍历数组，返回一个新数组，不改变原数组

3.filter()

返回一个新数组。

var arr = [1,2,3,4];

arr.filter((item,index,arr)=>{

   return item >2; //结果为[3,4]

});

//filter过滤掉数组中不满足条件的值,返回一个新数组,不改变原数组

4.reduce()

让数组的前后两项进行某种计算，返回最终操作的结果。

var arr = [1,2,3,4];

arr.reduce((result,item,index,arr)=>{

  console.log(result);

  console.log(item);

  console.log(inddx);

  return result+item; 

});

//reduce让数组的前后两项进行某种计算,然后返回其值，并继续计算,不改变原数组,返回计算的最终结果，从数组的第二项开始遍历。

5.some()

返回true、false。

var arr = [1,2,3,4];

arr.some((item,index,arr)=>{

   return item > 2; //返回true

});

//遍历数组每一项,有一项返回true,则停止遍历，结果返回true。不改变原数组。

6.every()

返回true、false。

var arr = [1,2,3,4];

arr.every((item,index,arr)=>{

   return item >1; //返回false

});

//遍历数组每一项，每一项返回true,最终结果为true.有一项返回false,停止遍历,结果返回为false。不改变原数组。