js数组方法大全及Demo，包括深度递归flat、填充、迭代、findIndex、归并、遍历、过滤、查找等

数组的方法有数组原型方法，也有从object对象继承来的方法，这里我们只介绍数组的原型方法，数组原型方法主要有以下这些,附在console中的演示方法：

splice()

join()

push()和pop()

shift() 和 unshift()

sort()

reverse()

concat()

slice()

indexOf()和 lastIndexOf() （ES5新增）

includes()

forEach() （ES5新增）

map() （ES5新增）

filter() （ES5新增）

every() （ES5新增）

some() （ES5新增）

reduce()和 reduceRight() （ES5新增）

findIndex()

entries()

fill() （ES6新增)

flat() （ES6新增)

flatMap() （ES6新增)

 

1、splice(index,length,item1,.....,itemX); //修改数组，可增删改

向/从数组中添加/删除项目，然后返回被删除的项目组成的数组。此方法会改变原始数组。此方法极其重要！

index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
length	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

例：

var arr=[1,2,3,4,5];

arr.splice(-2,2,11,12); //[4,5]

arr; //[1,2,3,11,12]

 

2、join(separator) //数组变字符串

将数组的所有元素组合成一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。

var arr=[1,2,3];

arr.join(); //"1,2,3"

 

3、push()和pop(); 删除/插入最后一个元素

push(item,item,...)：将任意元素添加到数组末尾，返回数组长度；

var arr=[1,2,3];

arr.push(4,5); //5

arr; //[1,2,3,4,5]

 

pop()：移除数组中的最后一个元素，并返回被删除的元素，如果数组为空，则返回undefined

var arr=[1,2,3];

arr.pop(); //3

arr; //[1,2]

 

4、shift()和unshift(); 删除/插入第一个元素

shift()：删除数组的第一项，并返回被删除的元素，如果数组为空，则返回undefined；

unshift()：将元素添加到数组头部，并返回数组长度

 

5、sort(sortFuc)排序

对数组做原地排序，并返回这个数组（会改变原数组），默认按照字符串UNICODE 的码位点排，sortFuc为可选参数，必须是函数，用于规定排序方法，例：

var arr=["c","a","b"];

arr.sort(); //["a","b","c"];

var numArr=[1,4,2,11];

numArr.sort(); //[1,11,2,4]

第二种排序多数情况 不是我们想看到的。我们可以给sort传一个回调函数，例如：

var numArr=[1,4,2,11];

numArr.sort(function(a,b){return a-b}); //[1,2,4,11]

 

6、reverse()反转

即颠倒数组中元素的顺序，会改变原数组，例：

var arr=[1,2,3];

arr.reverse(); //[3,2,1]

 

7、concat(item1,...,itemN)连接两个或者多个数组。

本方法将创建一个新的数组，然后调用它的对象(this 指向的对象)中的元素以及所有参数中的数组类型的参数中的元素以及所有的非数组类型参数，按顺序放入这个新数组中，并返回该数组，itemN可以是数组或者其他值，如果没有给concat传递参数，它只是复制当前数组并返回。例：

var arr=["c","a","b"],numArr=[1,4,2,11];

arr.concat(numArr,20); // ["c", "a", "b", 1, 4, 2, 11, 20]

 

8、slice(start,end):从当前数组中截取选中的元素并返回一个新数组，包括start，但不包括end例：

var arr=[1,2,3,4,5];

arr.slice(1,4); //[2, 3, 4]

 

9、indexOf()和 lastIndexOf() : 查找

indexOf()查询数组对应元素位置，可以传递两个参数，第一个是要匹配的元素，必须是基本类型，如string、number等，如是object则不可匹配。第二个参数是指定查询的起始位置，例：

ar arr=[1,2,3,4,5,4,3,2,1];

arr.indexOf(3); //2

arr.indexOf(3,3); //6

lastIndexOf()查询数组对应元素位置，可以传递两个参数，功能与indexOf一样，不过是从后往前查，例：

arr.lastIndexOf(3); //6

arr.lastIndexOf(3,3); //2

 

10、includes()

是否包含某个元素，仅适用于基本类型，例：

var arr=[1,2,3,4,5,4,3,2,1];

arr.includes(3) //true

arr.includes(6) //false

 

 

11、forEach(function(item,index,arr),this) 遍历

将数组中的每一个元素传给指定函数一次，需要传递两个参数，第一个是必选的回调函数，第二个参数用于改变回调函数中的this指向 ，可不写，不写则默认为window对象。

重点：forEach没有返回值，写return也是无效的，无法正常打断，除非你使用try{}catch(err){}

例：

var arr=[1,2,3];

arr.forEach(function(item){console.log(item)}) //1 //2 //3

var arr=[1,2];

var a="windowA";

var test={

a:"testA",

}

arr.forEach(function(item){

console.log(this.a)`

})

// windowA

 

arr.forEach(function(item){

console.log(this.a)

},test)

//testA

 

12、map(function(item,index,arr),this) 遍历

创建一个新数组，其元素是执行map方法函数中每个元素调用指定函数后返回的结果。第一个为必选参数，必须是函数，this用于改变callback函数中的this指向 ，可不写，不写则默认为window对象。例：

var arr=[1,2,3];

arr.map(function(item){return item*2}) //[2,4,6]

 

13、filter(function(item,index,arr),this) //过滤

返回一个匹配过滤条件的新数组，其接收两个参数，第一个为必选参数，必须是函数，this用于改变函数中的this指向，与forEach、map类似。例：

var arr=[1,2,3];

arr.filter(function(item){return item>1}) //[2,3]

 

14、every(function(currentValue,index,arr),this) //每个元素是否符合回调函数条件

接收两个参数，第一个为必选参数，必须是函数，this用于改变函数中的this指向，与forEach、map类似。如果每个参数执行函数后返回true，则为true，否则为false。例：

var arr=[1,2,3];

arr.every(function(item){return item>1}) //false

arr.every(function(item){return item>0}) //true

 

15、some(function(currentValue,index,arr),this) //是否有某个元素符合回调函数条件

接收两个参数，第一个为必选参数，必须是函数，this用于改变函数中的this指向，与forEach、map类似。如果有一个参数执行函数后返回true，则为true，否则为false。例：

var arr=[1,2,3];

arr.some(function(item){return item>1}) //true

arr.some(function(item){return item<1}) //false

 

16、reduce()和 reduceRight()

reduce(function(previousValue,currentValue,index,arr),initialValue)

对数组进行归并操作，对数组每个元素累加并返回所有元素通过函数之和/差/积等运算后的结果。接收两个参数，第一个为回调函数，第二个为初始参数。例：

var arr=[1,2,3,4];

arr.reduce(function(previousValue,currentValue,index,arr){return currentValue*previousValue},1) //24

 

reduceRight(function(previousValue,currentValue,index,arr),initialValue)

与reduce类似，对数组进行归并操作,从数组末尾开始（方向与之相反）。例：

arr.reduceRight(function(previousValue,currentValue,index,arr){return currentValue*previousValue},1) //24

 

17、findIndex() 查询数组元素位置

findIndex(function(currentValue,index,arr),this)

查询数组元素的位置，和indexOf不同的是，它是通过回调函数来指定匹配的元素，this用于改变函数中的this指向，与forEach、map类似。例：

var arr=[1,2,3,4,3,2,1];

arr.findIndex(function(currentValue,index,arr){return currentValue==2 }) //1

 

18、entries() 返回一个数组的迭代对象，该对象包含数组的键，例：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

for (var [index, item] of fruits.entries()) {

console.log(index +" "+ item);

}

//0 Banana

//1 Orange

//2 Apple

//3 Mango

 

19、fill(value,start,end) 使用固定值填充数组

使用固定值填充数组，但IE11及之前不支持，例：

var arr=[1,2,3,4,3,2,1];

arr.fill(3,0,4); //[3, 3, 3, 3, 3, 2, 1]

 

20、flat(depth) //深度递归遍历数组

按一个指定但深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回，depth为深度，默认为1，本方法会移除空项

var arr1 = [1, 2, [3, 4]]; arr1.flat();

// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6]

//使用 Infinity，可展开任意深度的嵌套数组

var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

 

var arr4 = [1, 2, , 4, 5]; arr4.flat(); // [1, 2, 4, 5]

 

21、flatMap(function(currentValue, index, array),this)

生成一个新的数组，其中每个元素都是回调函数的结果，且深度为1，this用于改变函数中的this指向，与forEach、map类似；它与map连着深度值为1的flat几乎相同，但效率稍高。IE11及以下不兼容。例：

var arr = ["it's Sunny in", "", "California"];

arr.flatMap(x => x.split(" ")); // ["it's","Sunny","in", "", "California"]

 

最好不如下这么做，会出现不合乎心意的结果，记住，是与map连着的flat：

var arr= [1, 2, [3, 4]];

arr.flatMap(function(currentValue, index, array){

return currentValue*2;

})

//(3) [2, 4, NaN]