玩转数组各种方法

253 阅读6分钟

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

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 新增的数组方法,敬请期待。。。