5、js关于数组的常用方法（19种）

一、改变原数组的方法

1.push（）末尾添加数据

语法：

arr.push(要插入的数据可以多个)

        // push 尾部添加数据const arr = [1,2,3,4,5];arr.push(6,7);console.log(arr);//(7) [1, 2, 3, 4, 5, 6, 7]

2. pop（）末尾删除一个数据

语法：

arr.pop() 删除一个数据

        //pop 尾部删除一个数据const arr1 =[1,2,3,4,5,6];arr1.pop();console.log(arr1);//(5) [1, 2, 3, 4, 5]

3.unshift（）头部添加数据

语法：

arr.unshift(要添加的数据，可以多个)

// unshift头部添加数据const arr2 = [1,2,3,4,5];arr2.unshift(0,3);console.log(arr2);//(6) [0,3, 1, 2, 3, 4, 5]

4.shift（）头部删除一个数据

语法：

arr.shift()删除一个数据

        // shift头部删除数据const arr3 = [1,2,3,4,5];arr3.shift();console.log(arr3);//(4) [2, 3, 4, 5]

5.reverse（）翻转数组

语法：

arr.reverse

// reverse 翻转数组const arr4 = [1,2,3,4,5];arr4.reverse();console.log(arr4);//(5) [5, 4, 3, 2, 1]

6.sort（）排序

语法：

（1）正常：arr.sort() 按位排序

（2）正序：arr.sort(function(a,b){return(a-b)});

（3）倒序：arr.sort(function(a,b){return(b-a)});

// sort排序const arr5 = [3,12,35,24,40,87,56,2,1,8,4];arr5.sort();console.log(arr5);//(11) [1, 12, 2, 24, 3, 35, 4, 40, 56, 8, 87]// 正序排列arr5.sort(function(a,b){return(a-b)});console.log(arr5);//(11) [1, 2, 3, 4, 8, 12, 24, 35, 40, 56, 87]// 倒序排列arr5.sort(function(a,b){return(b-a)});console.log(arr5);//(11) [87, 56, 40, 35, 24, 12, 8, 4, 3, 2, 1]

7.splice（）截取数组

语法：

（1）arr.splice(开始的位置索引，删除几个）返回截取后的数组

（2）arr.splice(开始的位置索引，删除几个，要插入的数据可以多个）

// splice截取数组const arr6 = [1,2,3,4,5,6,7]arr6.splice(3,2);console.log(arr6);//(5) [1, 2, 3, 6, 7]const arr7 = [1,2,3,4,5,6,7];arr7.splice(2,1,66,77);console.log(arr7);//(8) [1, 2, 66, 77, 4, 5, 6, 7]

二、不改变原数组的方法

1.concat（）合并数组

语法：

数组1.concat(数组2，数组3...) 返回一个合并后的新数组

        // concat合并数组const arr8 = [1,2,3,4,5,6,7];total = arr8.concat(8,8,4,2,1,'pp');//arr8.concat(arrx,arry...)console.log(total);//(13) [1, 2, 3, 4, 5, 6, 7, 8, 8, 4, 2, 1, 'pp']console.log(arr8);//原数组不改变

2.join（）数组转字符串

语法：

arr.join('要用什么拼接')

//join 数组转换为字符串const arr9 = [1,2,3,4,'pp','好的'];total = arr9.join("-");console.log(total);//1-2-3-4-pp-好的console.log(arr9);//原数组不变

3.slice（）截取数组的一部分数据

语法：

arr.slice(开始的索引值，结束的索引值) 返回一个截取后的数组

注意：包前不包后

        // slice截取数组的一部分const arr10 = [1,2,3,4,5,6,7];total = arr10.slice(3,5);console.log(total);//(2) [4, 5]console.log(arr10);//原数组不变

4.indexOf 从左检查数组中这个数值第一次出现的索引

语法一:数组名.indexOf(要查询的数据)

作用: 就是检查这个数组中有没有该数据

如果有就返回该数据第一次出现的索引

如果没有返回 -1

语法二:数组名.indexOf(要查询的数据,开始索引)

// indexOf 从左边检查数组中这个值出现的第一个索引const arr11 = [1,2,3,4,5,6,7,5,5];total = arr11.indexOf(5);console.log(total);//4 返回第一次出现的索引console.log(arr11);//原数组不变

5.lastIndexOf 从右检查数组中这个数值第一次出现的索引值

语法一:数组名.indexOf(要查询的数据)

作用: 就是检查这个数组中有没有该数据

如果有就返回该数据第一次出现的索引

如果没有返回 -1

语法二:数组名.lastIndexOf(要查询的数据,开始索引)

        // lastIndexOf 从右边开始检查这个值出现的第一个索引const arr12 = [1,2,3,4,5,6,7];total = arr12.lastIndexOf(3);console.log(total);//2console.log(arr12);//原数组不变

6.map 映射数组

语法：

arr.map(function(item){

return item;

// return item*10; 每一项都*10

}) 返回一个和原数组相同的数组

        // map const arr13 = [1,2,3,4,5,6,7];total = arr13.map(function(item){return item;// return item*10; 每一项都*10});console.log(total);//(7) [1, 2, 3, 4, 5, 6, 7]console.log(arr13);//原数组不变

7.forEach循环遍历

语法：

arr.forEach(function(item,index,arr){})

+item : 这个表示的是数组中的每一项

index : 这个表示的是每一项对应的索引

arr : 这个表示的是原数组

注意：

没有返回值，不会生成新数组，只是循环遍历数组

        // forEach遍历const arr14 = [1,2,3,4,5];arr14.forEach(function(item,index,arr){console.log(item,"---",index,"---",arr);})console.log(arr14);//原数组不变

8.filter过滤

语法：

arr.filter(function(item){return 条件}

返回一个过滤后的新数组，原数组不变。

        // filter过滤const arr15 = [1,2,3,4,5,6];total = arr15.filter(function(item){return item>3;})console.log(total);//(3) [4, 5, 6]console.log(arr15);//原数组不变

9.every 判断数组是不是满足所有条件

语法:

数组名.every(function (item,index,arr) {return条件})

+ item : 这个表示的是数组中的每一项

+ index : 这个表示的是每一项对应的索引

+ arr : 这个表示的是原数组

作用: 主要是用来判断数组中是不是每一个都满足条件

只有所有的都满足条件返回的是true

只要有一个不满足返回的就是false

返回值: 是一个布尔值

注意: 要以return的形式执行返回条件

        // everyconst arr16 = [1,2,3,4,5,6];total = arr16.every(function(item){return item>0;})console.log(total);//trueconsole.log(arr16);//原数组不变

10.some（）数组中有没有满足条件的

语法:

数组名.some(function (item,index,arr) {return条件})

+ item : 这个表示的是数组中的每一项

+ index : 这个表示的是每一项对应的索引

+ arr : 这个表示的是原数组

作用: 主要是用来判断数组中是不是每一个都满足条件

有一个满足条件就返回true

都不满足才返回false

返回值: 是一个布尔值

注意: 要以return的形式执行返回条件

        // someconst arr17 = [1,2,3,4,5,6];total = arr17.some(function(item){return item>1;})console.log(total);//trueconsole.log(arr17);//原数组不变

11.find（）用来获取数组中满足条件的第一个数据

语法:

数组名.find(function (item,index,arr) {return条件})

+ item : 这个表示的是数组中的每一项

+ index : 这个表示的是每一项对应的索引

+ arr : 这个表示的是原数组

作用: 用来获取数组中满足条件的数据

返回值: 如果有就是满足条件的第一个数据；如果没有就是undefined

注意: 要以return的形式执行返回条件

// findconst arr18 = [1,2,3,6];total = arr18.find(function(item){return item>4;})console.log(total);//6console.log(arr17);//原数组不变

12.reduce（）叠加后的效果

语法:

数组名.reduce(function (prev,item,index,arr) {},初始值)

+ prev :一开始就是初始值当第一次有了结果以后；这个值就是第一次的结果

+ item : 这个表示的是数组中的每一项

+ index : 这个表示的是每一项对应的索引

+ arr : 这个表示的是原数组

作用: 就是用来叠加的

返回值: 就是叠加后的结果

注意: 以return的形式书写返回条件

        // reduceconst arr19 = [1,2,3,6,9];total = arr19.reduce(function(prev,item){return prev += item;})console.log(total);//21 每一项累加的结果console.log(arr19);//原数组不变

三、总结

改变原数组的：

push末尾添加数据

pop末尾删除一个数据

unshift头部添加数据

shift 头部删除一个数据

reverse翻转数组

sort 排序

splice截取数组

不改变原数组的：

concat合并

join数组转字符串

slice截取数组一部分

indexOf左边检查

lastIndexOf右边检查

map映射数组

forEach循环遍历

filter过滤

every判断是否都满足条件

some判断有无满足条件

find 获取第一个满足条件的数据

reduce叠加