玩转数组各类方法

数组在咱们前端开发中扮演着举足轻重的角色，全面而熟悉的了解数组各类方法的使用，对于开发可谓是事半功倍，下面进入正题。

JavaScript中建立数组有两种方式：

第一种是使用Array构造函数：

var  arr = new Array();//建立一个空数组var arr = new Array(20);//建立一个包含20 项的数组var arr = new Array('Lily','Lucy','Tom');//建立一个包含三个字符的数组复制代码

第二种建立数组的方式是使用数组字面量表示法：

var arr = [];//建立一个空数组var arr = [10];//建立一个包含一项的数组复制代码

数组方法：

join(), push(), pop(), shift(), unshift(), sort(), reverse(), concat(), slice(), splice(), indexOf(),

ES5新增：lastIndexOf(), forEach(), map(), filter(), every(), some(), reduce(), reduceRight(),

针对ES5新增的方法浏览器支持的状况：Opera 11+， Firefox 3.6+， Safari 5+， Chrome 8+， Internet Explorer 9+

1.join()方法：

join(separator):将数组的元素按顺序组成一个字符串，separator做为分隔符，省略的话则默认以','做为分隔符。示例以下：

var arr = [1,2,3,4,5];var arr1 = arr.join();var arr2 = arr.join(',');var arr3 = arr.join('-');var arr4 = arr.join(':');console.log(arr); //[1, 2, 3, 4, 5]console.log(arr1);//1,2,3,4,5console.log(arr2);//1,2,3,4,5console.log(arr3);//1-2-3-4-5console.log(arr4);//1:2:3:4:5复制代码

注意：join()不会改变原始数组，而返回新的数组

2.push()和pop():

push(): 接收任意多个参数，把他们添加到数组的末尾，并返回数组的长度。

var arr = [1,2,3,4];
var arr1 = arr.push(5);
var arr2 = arr.push(6,7);
var arr3 = arr.push([8,9]);
var arr4 = arr.push([10,11],[12]);
console.log(arr); //[1,2,3,4,5,6,7,[8,9],[10,11],[12]]
console.log(arr1);//5
console.log(arr2);//7
console.log(arr3);//8
console.log(arr4);//10复制代码

注意：push()方法改变原来数组。

pop(): 移除数组最后一项，而后返回移除的项

var arr = [1,2,3,4,5];
var a = arr.pop();
console.log(arr);// [1,2,3,4];
console.log(a); // 5;复制代码

3. shift() 和 unshift()

shift(): 删除原数组第一项，并返回删除元素的值，若是数组为空则返回undefined；

var arr = [1,2,3,4,5];
var a = arr.shift();
console.log(arr);// [2,3,4,5];
console.log(a); // 1复制代码

unshift(): 将参数添加到原数组开头,能够有多个参数，并返回数组的长度；

var arr = [4,5,6,7];
var a = arr.unshift(2);
console.log(arr);// [2,4,5,6,7]
console.log(a);// 5
var arr = [3,4,5,6];var a = arr.unshift(1,2);console.log(arr);//[1,2,3,4,5,5];console.log(a); //6复制代码

注意： shift 和 unshift 都会改变原数组长度。

4.sort():

5.reverse(): 反转数组项的顺序,原数组改变，返回反转后的结果

var arr = [3,4,5,6,7,8];var a = arr.reverse();

console.log(arr);[8,7,6,5,4,3]console.log(a);//[8,7,6,5,4,3]复制代码

注意： 改变原数组；

6.concat(): 建立一个当前数组的副本，将参数添加到副本中而且返回副本，原数组不变；

var arr = [3,4,5];
var a = arr.concat(6);//
console.log(a);//[3,4,5,6]
var b = arr.concat([7,8]);
console.log(b);//[3,4,5,7,8]
var c = arr.concat(9,[10,11]);
console.log(c); //[3,4,5,9,10,11]
var d = arr.concat([6,[7,8]]);
console.log(d);//[3,4,5,6,[7,8]]
console.log(arr);//[3,4,5];复制代码

测试发现，若是添加的不是数组，则直接将参数添加到副本的末尾，若是参数是数组，则将数组的各个项添加到副本末尾，若是参数是二维数组，则如上所示。

注意： 不改变原数组，返回新的数组；

7.slice(): 当只有一个参数时，指删除该参数索引位置之后的所有元素,当有两个参数时，第一个参数表明开始删除的索引位置，第二个参数表明结束的索引位置，删除的元素包含起始位置，不包含结束位置。若是参数是负数，则该参数加上数组的长度做为此处的值。

var arr = [3,4,5,6];
var a = arr.slice(1);
console.log(arr);//[3,4,5,6]
console.log(a);//[4,5,6]
var b = arr.slice(1,3)
console.log(arr);//[3,4,5,6]
console.log(b);//[4,5]
var c = arr.slice(1,-1);
console.log(c);//[4,5]
var d = arr.slice(-3,-1)
console.log(d);//[4,5]复制代码

注意： 不改变原数组，返回新数组。

8.splice():

删除数组，一个参数的时候，指删除当前索引位置之后的元素并以此删除的元素组成

新的数组返回，两个参数的时候，第一个参数为删除的起始位置，第二个参数表明删除的个数。

一个参数：
var arr = [2,3,4,5];
var a = arr.splice(2);
console.log(arr);//[2,3]
console.log(a);//[4,5]
两个参数：
var arr = [3,4,5,6,7,8];
var b = arr.splice(1,3);
console.log(arr);//[3,7,8]
console.log(b);//[4,5,6]
复制代码

插入数组：能够向指定位置插入任意数量的项，只需提供三个参数：起始位置、0、(要删除的项数) 和要插入的项，返回空数组。

var arr = [2,3,4,5,6,7,8,9];
var c = arr.splice(3,0,12,34,56);
console.log(arr);[2, 3, 4, 12, 34, 56, 5, 6, 7, 8, 9]
console.log(c);//[]复制代码

替换：能够向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定三个参数：起始位置、要删除的项数和要插入的任意数量的项。

var arr = [2,3,4,5,6];
var d = arr.splice(2,2,12,33);
console.log(arr);[2, 3, 12, 33, 6]
console.log(d);[4,5]复制代码

注意：splice会改变原始数组。

9.indexOf() 和 lastIndexOf():

indexOf(): 查找给定元素在数组中位置的索引值。
var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5));//2
console.log(arr.lastIndexOf(5));//5
console.log(arr.indexOf(3,3));//6  从索引3 开始查找到第一个
console.log(arr.indexOf(10));//-1
console.log(arr.indexOf('10'));//-1复制代码

10. forEach(): 对数组进行遍历循环，对数组中的每一项运行给定函数，这个方法没有返回值。

var arr = [2,3,4,5,6,7];
arr.forEach(function(item, index, array){//item表明每一项，index当前项的索引，array 当前数组；} )复制代码

11.map(): 指‘映射’, 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

var arr =  [1,2,3,4,5,6,7];
var arr2 = arr.map(function(item) {return item * item;})
console.log(arr);//[1,2,3,4,5,6,7];
console.log(arr2);//[1, 4, 9, 16, 25, 36, 49];复制代码

注意： 不改变原始数组。

12.filter(): ‘过滤’功能，数组中的每一项运行给定的函数，返回知足条件的项组成的新数组。

var arr = [1,2,3,4,5,6];
var b = arr.filter(function(item,index, array) {//item为每一项的值，index为每一项的索引，array就是arr.return item % 2 == 0;})
console.log(arr);//[1,2,3,4,5,6]
console.log(b);//[2,4,6]复制代码

13.erery(): 判断数组中每一项是否都知足给定函数运行的条件，只有全部项都知足，才会返回true。

var arr = [1,2,3,4,5,6,7];
var a = arr.every(function(item) {return item < 10;})
console.log(arr);//[1,2,3,4,5,6,7]
console.log(a);//true复制代码

14.some():判断数组中是否存在知足条件的项，只要有一项知足条件，就会返回true，不然返回false

var arr = [2,3,4,5,6];
var b = arr.some(function(x) { 	return x > 4;})
console.log(arr);// [2,3,4,5,6];
console.log(b);//true复制代码

15.reduce() 和 reduceRight(): 这两个方法都会实现迭代数组的全部项，而后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）做为归并基础的初始值。传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会做为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，所以第一个参数是数组的第一项，第二个参数就是数组的第二项。

var arr = [1,2,3,4,5,6,7];
var b = arr.reduceRight((prev,cur, index,array) => {	return prev + cur;})
console.log(arr);//[1,2,3,4,5,6,7]
console.log(b);//28复制代码

后续补充ECMAScript6 新增的数组方法，敬请期待。。。