JavaScript数组创建及常见方法汇总

数组不仅仅在JavaScript中扮演着非常重要的角色，而且在其它的程序语言中的重要性也是不言而喻的。数组在面试的过程中被提及的频率是非常高的，同时JavaScript中的数组与其他语言中的的数组还是有些区别的。

创建数组

• 通过使用Array构造函数创建数组：

/*************创建一个空的数组**************/var arr1=new Array();//创建一个空的数组console.log(arr1);//[]arr1[0]="张三";//设置数组下标0的值为张三arr1[1]="李四";//设置数组下标1的值为李四console.log(arr1);//[ '张三', '李四' ]console.log(arr1.length);//2/*************创建指定长度的数组************/var arr2 = new Array(2);//创建一个长度为2的数组arr2[0]="red";//arr2下标0的值为"red"arr2[1]="yellow";//arr2下标1的值为"yellow"arr2[2]="green";//arr2下标2的值为"green"，arr2声明长度为2，但可以添加超过其指明长度的元素console.log(arr2);//[ 'red', 'yellow', 'green' ]/*********创建指定数组初始值的数组*********/var arr3 = new Array("laoLiu","laoTie","laoWang");console.log(arr3.length);//3console.log(arr3);//[ 'laoLiu', 'laoTie', 'laoWang' ]

• 通过数组字面量的形式创建数组：

//其实即为Array的简化写法var arr1 = []; //创建一个空数组var arr2 = [20]; // 创建一个长度为1的数组var arr3 = ["red","yellow","green"]; // 创建一个具有初始值的数组arr3[arr3.length] = "blue"; //下标3处（数组尾部）添加一项"blue"arr3[1]="gold";//修改下标为1的值为"gold"//注：数组的length属性是可修改的！arr3.length = arr3.length-1; //将数组的最后一项删除console.log(arr3);// ["red","gold","green"]

数组常见方法

• push():将一个或多个元素添加到数组尾部，返回值为添加元素后的数组长度。

var arr = ["red"];
var len=arr.push("blue");//尾部添加一个元素
console.log(len,arr);//2, [ 'red', 'blue' ]
len=arr.push("gold","white");//尾部添加多个元素
console.log(len,arr);//4 ,[ 'red', 'blue', 'gold', 'white' ]

• unshift():将一个或多个元素添加到数组头部，返回值为添加元素后的数组长度。

var arr = ["red"];
var len=arr.unshift("blue");//头部添加一个元素
console.log(len,arr);//2, [ 'blue', 'red' ]
len=arr.unshift("gold","white");//头部添加多个元素
console.log(len,arr);//4 ,[ 'gold', 'white', 'blue', 'red' ]

• pop():数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。

var arr = ["red","yellow","green"];var item=arr.pop();//移除arr最后一项greenconsole.log(item);//greenconsole.log(arr.length);//2console.log(arr);//[ 'red', 'yellow' ]

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

var arr = ["red","yellow"];var item=arr.shift();//移除arr第一项redconsole.log(item);//redconsole.log(arr);//[ 'yellow' ]item=arr.shift();//继续移除第一项console.log(item);//yellowconsole.log(arr);//[ ]item=arr.shift();//arr已为空数组，但我还要继续shiftconsole.log(item);//undefinedconsole.log(arr);//[ ]

• reverse():数组的元素顺序进行反转，返回结果为反转后的数组。

var arr=[2,4,6,8,10];console.log(arr.reverse());//[ 10, 8, 6, 4, 2 ]console.log(arr);//[ 10, 8, 6, 4, 2 ]

• concat():连接两个或多个数组，它不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

//连接多个元素var arr = [1,2,3];console.log(arr.concat(4,5));//[ 1, 2, 3 , 4, 5]console.log(arr);//[ 1, 2, 3 ]//连接数组var arr2 = [1,2,3];console.log(arr2.concat([4,5],[6,7]));//[ 1, 2, 3, 4, 5, 6, 7 ]console.log(arr2);//[ 1, 2, 3 ]

• slice():该方法可从数组中返回选定的元素。接收一个或两个参数，即要返回的起始与结束位置。如果只有一个参数，返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，返回起始和结束之间的元素，但不包括结束位置的元素。

var arr = [1,2,3,4,5,6];var arr2 = arr.slice(1);var arr3 = arr.slice(1,3);var arr4 = arr.slice(1,-2);var arr5 = arr.slice(-3,-1);//原数组没有发生变化console.log(arr); //[ 1, 2, 3, 4, 5, 6 ]//返回从下标1到数组最后的项console.log(arr2); //[ 2, 3, 4, 5, 6 ]//返回开始下标为1，结束下标(不包括3)之间的元素。console.log(arr3); //[ 2, 3 ]//下标为负数时，将负数加上数组的长度6，来替换该位置的数，所以应与arr.slice(1,4)的结果一致console.log(arr4); //[ 2, 3, 4 ]//负数与数组长度相加，替换位置的数字，即与arr.slice(3,5)的结果相同。console.log(arr5); //[ 4, 5 ]

• join():通过指定的分隔符将数组的各个元素进行连接成为一个字符串。如果不指定分隔符，则默认使用逗号作为分隔符。

var arr=["red","yellow","green"];//指定"-"为分隔符，进行分隔console.log(arr.join("-"));//red-yellow-green//未指定分隔符，返回字符串默认以,进行分隔console.log(arr.join());//red,yellow,green//对原数组无影响console.log(arr);//[ 'red', 'yellow', 'green' ]

• splice():非常强大的数组方法，可以实现删除、插入和替换。返回值为一个数组，该数组为删除元素，如果没有删除任何元素，则返回一个空数组。
  删除：可以删除任意数量的元素，需要指定2个参数：要删除的第一项的位置和要删除的项数。返回的结果为删除的内容。

var arr=[2,4,6,8,10];var arr2=arr.splice(0,2);//从下标0开始删除，删除2个元素console.log(arr2);//[ 2, 4 ]console.log(arr);//[ 6, 8, 10 ]

插入：可以向指定位置插入任意数量的元素，需要提供3个参数：起始位置、0(要删除的元素数量)、插入的元素

var arr=[2,3];//从数组第2个位置插入3，4var arr2=arr.splice(2,0,3,4);console.log(arr2);//[]console.log(arr);//[2,3,3,4]

替换：其实就是先删除，然后再插入

var arr=[2,3];//将3替换为4，5//先删除元素3，然后在3的位置插入4，5var arr2=arr.splice(1,1,4,5);console.log(arr2);//[3]console.log(arr);//[ 2, 4, 5 ]

• forEach():对数组进行遍历。参数为函数，默认有传参，参数分别为：遍历数组的元素，与元素对应的下标（索引），数组本身

var arr=[2,3,6,7,9];
arr.forEach(function(v,i,a){    console.log(v+"|"+i+"|"+(a==arr));
})// 结果：// 2|0|true// 3|1|true// 6|2|true// 7|3|true// 9|4|true

• split():把一个字符串分割为数组

var arr="day day up";//使用空格符作为分隔符console.log(arr.split(" "));//[ 'day', 'day', 'up' ]//使用字符串"a"作为分隔符console.log(arr.split("a"));//[ 'd', 'y d', 'y up' ]console.log(arr);//"day day up"

作者：张培跃
链接：https://www.jianshu.com/p/4fbdc05398ec