js 数组详细操作方法及解析合集

在开发中，数组的使用场景非常多，平日中也涉及到很多数组的api/相关操作，一直也没有对这块内容进行一块整理总结，很多时候就算用过几次这个api，在开发中也很容易忘记，还是要谷歌一下。所以就希望对这块内容有一个比较系统性的总结，在这背景下，就有了本篇文章，如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。

创建一个数组

// 字面量方式:

// 这个方法也是我们最常用的，在初始化数组的时候 相当方便

vara=[3,11,8];

// [3,11,8];

// 构造器:

// 实际上 new Array === Array,加不加new 一点影响都没有。

vara=Array();

// []

vara=Array(3);

// [,,]

vara=Array(3,11,8);

// [ 3,11,8 ]

ES6 Array.of() 返回由所有参数值组成的数组

定义：返回由所有参数值组成的数组，如果没有参数，就返回一个空数组。

目的：Array.of() 出现的目的是为了解决上述构造器因参数个数不同，导致的行为有差异的问题。

leta=Array.of(3,11,8);

// [3,11,8]

leta=Array.of(3);

// [3]

ES6 Arrary.from() 将两类对象转为真正的数组

定义：用于将两类对象转为真正的数组（不改变原对象，返回新的数组）。

参数：

第一个参数(必需): 要转化为真正数组的对象。

第二个参数(可选): 类似数组的map方法，对每个元素进行处理，将处理后的值放入返回的数组。

第三个参数(可选): 用来绑定this。

// 1\. 对象拥有length属性

letobj={:'a',1:'b',2:'c',length:3};

letarr=Array.from(obj);

// ['a','b','c'];

// 2\. 部署了 Iterator接口的数据结构 比如:字符串、Set、NodeList对象

letarr=Array.from('hello');

// ['h','e','l','l','o']

letarr=Array.from(newSet(['a','b']));

// ['a','b']

方法

数组原型提供了非常多的方法，这里分为三类来讲，一类会改变原数组的值，一类是不会改变原数组，以及数组的遍历方法。

改变原数组的方法(9个):

leta=[1,2,3];

// ES5:

a.splice();

a.sort();

a.pop();

a.shift();

a.push();

a.unshift();

a.reverse();

// ES6:

a.copyWithin();

a.fill();

splice() 添加/删除数组元素

对于这些能够改变原数组的方法，要注意避免在循环遍历中改变原数组的选项，比如: 改变数组的长度，导致遍历的长度出现问题。

定义： splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目语法：array.splice(index,howmany,item1,.....,itemX)参数:

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

howmany：可选。要删除的项目数量。如果设置为 0，则不会删除项目。

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

返回值: 如果有元素被删除,返回包含被删除项目的新数组。

eg1:删除元素

leta=[1,2,3,4,5,6,7];

letitem=a.splice(,3);// [1,2,3]

console.log(a);// [4,5,6,7]

// 从数组下标0开始，删除3个元素

letitem=a.splice(-1,3);// [7]

// 从最后一个元素开始删除3个元素，因为最后一个元素，所以只删除了7

eg2: 删除并添加

leta=[1,2,3,4,5,6,7];

letitem=a.splice(,3,'添加');// [1,2,3]

console.log(a);// ['添加',4,5,6,7]

// 从数组下标0开始，删除3个元素，并添加元素'添加'

letb=[1,2,3,4,5,6,7];

letitem=b.splice(-2,3,'添加1','添加2');// [6,7]

console.log(b);// [1,2,3,4,5,'添加1','添加2']

// 从数组最后第二个元素开始，删除3个元素，并添加两个元素'添加1'、'添加2'

eg3: 不删除只添加:

leta=[1,2,3,4,5,6,7];

letitem=a.splice(,,'添加1','添加2');// [] 没有删除元素，返回空数组

console.log(a);// ['添加1','添加2',1,2,3,4,5,6,7]

letb=[1,2,3,4,5,6,7];

letitem=b.splice(-1,,'添加1','添加2');// [] 没有删除元素，返回空数组

console.log(b);// [1,2,3,4,5,6,'添加1','添加2',7] 在最后一个元素的前面添加两个元素

从上述三个栗子可以得出:

数组如果元素不够，会删除到最后一个元素为止

操作的元素，包括开始的那个元素

可以添加很多个元素

添加是在开始的元素前面添加的

sort() 数组排序

定义: sort()方法对数组元素进行排序，并返回这个数组。

参数可选: 规定排序顺序的比较函数。

默认情况下sort()方法没有传比较函数的话，默认按字母升序，如果不是元素不是字符串的话，会调用toString()方法将元素转化为字符串的Unicode(万国码)位点，然后再比较字符。

// 字符串排列 看起来很正常

vara=["Banana","Orange","Apple","Mango"];

a.sort();// ["Apple","Banana","Mango","Orange"]

// 数字排序的时候 因为转换成Unicode字符串之后，有些数字会比较大会排在后面 这显然不是我们想要的

vara=[10,1,3,20,25,8];

console.log(a.sort())// [1,10,20,25,3,8];

比较函数的两个参数：

sort的比较函数有两个默认参数，要在函数中接收这两个参数，这两个参数是数组中两个要比较的元素，通常我们用 a 和 b 接收两个将要比较的元素：

若比较函数返回值

若比较函数返回值=0，那么a 和 b 相对位置不变；

若比较函数返回值>0，那么b 排在a 将的前面；

对于sort()方法更深层级的内部实现以及处理机制可以看一下这篇文章深入了解javascript的sort方法

sort排序常见用法：

1.数组元素为数字的升序、降序:

vararray=[10,1,3,4,20,4,25,8];

// 升序 a-b

// 比如被减数a是10，减数是20 10-20

array.sort(function(a,b){returna-b;});

console.log(array);// [1,3,4,4,8,10,20,25];

// 降序 被减数和减数调换了 20-10>0 被减数b(20)在减数a(10)的前面

array.sort(function(a,b){returnb-a;});

console.log(array);// [25,20,10,8,4,4,3,1];

2.数组多条件排序

vararray=[

{id:10,age:2},

{id:5,age:4},

{id:6,age:10},

{id:9,age:6},

{id:2,age:8},

{id:10,age:9},

]

array.sort(function(a,b){

if(a.id===b.id){

// 如果id的值相等，按照age的值降序

returnb.age-a.age

}else{

// 如果id的值不相等，按照id的值升序

returna.id-b.id

}

})

// [{"id":2,"age":8},{"id":5,"age":4},{"id":6,"age":10},{"id":9,"age":6},{"id":10,"age":9},{"id":10,"age":2}]

3.自定义比较函数，天空才是你的极限

类似的：运用好返回值，我们可以写出任意符合自己需求的比较函数

vararray=[

{name:'Koro1'},

{name:'Koro1'},

{name:'OB'},

{name:'Koro1'},

{name:'OB'},

{name:'OB'},

]

array.sort(function(a,b){

if(a.name==='Koro1'){

// 如果name是'Koro1' 返回-1 ，-1

return-1

}else{

// 如果不是的话，a排在b的后面

return1

}

})

// [{"name":"Koro1"},{"name":"Koro1"},{"name":"Koro1"},{"name":"OB"},{"name":"OB"},{"name":"OB"}]

pop() 删除一个数组中的最后的一个元素

定义: pop() 方法删除一个数组中的最后的一个元素，并且返回这个元素。参数: 无。

leta=[1,2,3];

letitem=a.pop();// 3

console.log(a);// [1,2]

shift() 删除数组的第一个元素

定义: shift()方法删除数组的第一个元素，并返回这个元素。参数: 无。

leta=[1,2,3];

letitem=a.shift();// 1

console.log(a);// [2,3]

push() 向数组的末尾添加元素

定义: push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。参数: item1, item2, ..., itemX ,要添加到数组末尾的元素

leta=[1,2,3];

letitem=a.push('末尾');// 4

console.log(a);// [1,2,3,'末尾']

unshift()

定义：unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。参数: item1, item2, ..., itemX ,要添加到数组开头的元素

leta=[1,2,3];

letitem=a.unshift('开头');// 4

console.log(a);// ['开头',1,2,3]

reverse() 颠倒数组中元素的顺序

定义: reverse() 方法用于颠倒数组中元素的顺序。参数: 无

leta=[1,2,3];

a.reverse();

console.log(a);// [3,2,1]

ES6: copyWithin() 指定位置的成员复制到其他位置

定义: 在当前数组内部，将指定位置的成员复制到其他位置,并返回这个数组。语法:

array.copyWithin(target,start=,end=this.length)

参数: 三个参数都是数值，如果不是，会自动转为数值.

target（必需）：从该位置开始替换数据。如果为负值，表示倒数。

start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。

end（可选）：到该位置前停止读取数据，默认等于数组长度。使用负数可从数组结尾处规定位置。

浏览器兼容(MDN): chrome 45、Edge 12、Firefox32、Opera 32、Safari 9、 IE 不支持

eg:

// -2相当于3号位，-1相当于4号位

[1,2,3,4,5].copyWithin(,-2,-1)// [4, 2, 3, 4, 5]

vara=['OB1','Koro1','OB2','Koro2','OB3','Koro3','OB4','Koro4','OB5','Koro5']

// 2位置开始被替换,3位置开始读取要替换的 5位置前面停止替换

a.copyWithin(2,3,5)

// ["OB1","Koro1","Koro2","OB3","OB3","Koro3","OB4","Koro4","OB5","Koro5"]

从上述栗子:

第一个参数是开始被替换的元素位置

要替换数据的位置范围:从第二个参数是开始读取的元素，在第三个参数前面一个元素停止读取

数组的长度不会改变

读了几个元素就从开始被替换的地方替换几个元素

ES6: fill() 填充数组

定义: 使用给定值，填充一个数组。参数:第一个元素(必须): 要填充数组的值第二个元素(可选): 填充的开始位置,默认值为0第三个元素(可选): 填充的结束位置，默认是为this.length

['a','b','c'].fill(7)// [7, 7, 7]

['a','b','c'].fill(7,1,2)// ['a', 7, 'c']

不改变原数组的方法(8个):

// ES5： slice、join、toLocateString、toStrigin、cancat、indexOf、lastIndexOf

// ES7： includes

slice() 浅拷贝数组的元素

定义： 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，且原数组不会被修改。

注意：字符串也有一个slice() 方法是用来提取字符串的，不要弄混了。

语法:

array.slice(begin,end);

参数:begin(可选): 索引数值,接受负值，从该索引处开始提取原数组中的元素,默认值为0。end(可选):索引数值(不包括),接受负值，在该索引处前结束提取原数组元素，默认值为数组末尾(包括最后一个元素)。

leta=['hello','world'];

letb=a.slice(,1);

// ['hello'] a

[]='改变原数组';

console.log(a,b);// ['改变原数组','world'] ['hello']

b[]='改变拷贝的数组';

console.log(a,b);// ['改变原数组','world'] ['改变拷贝的数组']

如上：新数组是浅拷贝的，元素是简单数据类型，改变之后不会互相干扰。如果是复杂数据类型(对象,数组)的话，改变其中一个，另外一个也会改变。

leta=[{name:'OBKoro1'}];

letb=a.slice();

console.log(b,a);// [{"name":"OBKoro1"}] [{"name":"OBKoro1"}]

// a[0].name='改变原数组';

// console.log(b,a);

// [{"name":"改变原数组"}] [{"name":"改变原数组"}]

// b[0].name='改变拷贝数组',b[0].koro='改变拷贝数组';

// [{"name":"改变拷贝数组","koro":"改变拷贝数组"}] [{"name":"改变拷贝数组","koro":"改变拷贝数组"}]

原因在定义上面说过了的：slice()是浅拷贝，对于复杂的数据类型浅拷贝，拷贝的只是指向原数组的指针，所以无论改变原数组，还是浅拷贝的数组，都是改变原数组的数据。

join() 数组转字符串

定义: join() 方法用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串，返回生成的字符串。

语法:

array.join(str);

参数:str(可选): 指定要使用的分隔符，默认使用逗号作为分隔符。

leta=['hello','world'];

letstr=a.join();// 'hello,world'

letstr2=a.join('+');// 'hello+world'

使用join方法或者下文说到的toString方法时，当数组中的元素也是数组或者是对象时会出现什么情况？

leta=[['OBKoro1','23'],'test'];

letstr1=a.join();// OBKoro1,23,test

letb=[{name:'OBKoro1',age:'23'},'test'];

letstr2=b.join();// [object Object],test

// 对象转字符串推荐JSON.stringify(obj);

所以，join()/toString()方法在数组元素是数组的时候，会将里面的数组也调用join()/toString(),如果是对象的话，对象会被转为[object Object]字符串。

toLocaleString() 数组转字符串

定义: 返回一个表示数组元素的字符串。该字符串由数组中的每个元素的 toLocaleString() 返回值经调用 join() 方法连接（由逗号隔开）组成。

语法:

array.toLocaleString();

参数：无。

leta=[{name:'OBKoro1'},23,'abcd',newDate()];

letstr=a.toLocaleString();// [object Object],23,abcd,2018/5/28 下午1:52:20

如上述栗子：调用数组的toLocaleString方法，数组中的每个元素都会调用自身的toLocaleString方法，对象调用对象的toLocaleString,Date调用Date的toLocaleString。

toString() 数组转字符串 不推荐

定义: toString() 方法可把数组转换为由逗号链接起来的字符串。

语法:

array.toString();

参数: 无。该方法的效果和join方法一样，都是用于数组转字符串的，但是与join方法相比没有优势，也不能自定义字符串的分隔符，因此不推荐使用。

值得注意的是：当数组和字符串操作的时候，js 会调用这个方法将数组自动转换成字符串

letb=['toString','演示'].toString();

// toString,演示

leta=['调用toString','连接在我后面']+'啦啦啦';

// 调用toString,连接在我后面啦啦啦

concat

定义： 方法用于合并两个或多个数组，返回一个新数组。语法：

varnewArr=oldArray.concat(...arrayX);

参数：arrayX（必须）：该参数可以是具体的值，也可以是数组对象。可以是任意多个。

eg1:

leta=[1,2,3];

letb=[4,5,6];

//连接两个数组

letnewVal=a.concat(b);// [1,2,3,4,5,6]

// 连接三个数组

letc=[7,8,9];

letnewVal2=a.concat(b,c);// [1,2,3,4,5,6,7,8,9]

// 添加元素

letnewVal3=a.concat('添加元素',b,c,'再加一个');

// [1,2,3,"添加元素",4,5,6,7,8,9,"再加一个"]

// 合并嵌套数组 会浅拷贝嵌套数组

letd=[1,2];

letf=[3,[4]];

letnewVal4=d.concat(f);// [1,2,3,[4]]

ES6扩展运算符...合并数组：

因为ES6的语法更简洁易懂，所以现在合并数组我大部分采用...来处理，...运算符可以实现cancat的每个栗子，且更简洁和具有高度自定义数组元素位置的效果。

leta=[2,3,4,5];

letb=[4,...a,4,4];

console.log(a,b);// [2, 3, 4, 5] [4,2,3,4,5,4,4]