一站式超全JavaScript数组方法大全

一站式JavaScript数组方法大全（建议收藏）

方法一览表
详细操作

本人总结了JavaScript中有关数组的几乎所有方法(包含ES6之后新增的)，并逐一用代码进行演示使用，希望可以帮助大家！

方法一览表

方法名	功能	是否改变原数组
pop()	删除最后一位，并返回删除的数据	是
push()	在最后一位新增一或多个数据，返回长度	是
shift()	删除第一位，并返回删除的数据	是
unshift()	在第一位新增一或多个数据，返回长度	是
reverse()	反转数组，返回结果	是
sort()	排序（字符规则），返回结果	是
splice()	删除指定位置，并替换，返回删除的数据	是
copyWithin()	指定位置的成员复制到其他位置	是
fill()	使用给定的值，填充到数组中，类似于替换	是
concat()	合并数组，并返回合并之后的数据	否
join()	使用分隔符，将数组转为字符串并返回	否
slice()	截取指定位置的数组，并返回	否
toString()	直接转为字符串，并返回	否
valueOf()	返回数组对象的原始值	否
indexOf()	查询并返回数据的索引	否
lastIndexOf()	查询并返回数据最后一次出现的索引	否
find()	在数组内部, 找到第一个符合条件的数组成员，返回值	否
findIndex()	在数组内部, 找到第一个符合条件的数组成员，返回索引	否
includes()	表示某个数组是否包含给定的值，与字符串的includes()方法类似	否
forEach()	参数为回调函数，会遍历数组所有的项，回调函数接受三个参数，分别为value，index，self；forEach没有返回值	否
map()	同forEach，同时回调函数返回数据，组成新数组由map返回	否
filter()	同forEach，同时回调函数返回布尔值，为true的数据组成新数组由filter返回	否
every()	同forEach，同时回调函数返回布尔值，全部为true，由every返回true	否
some()	同forEach，同时回调函数返回布尔值，只要有一个为true，由some返回true	否
reduce()	归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduce返回	否
reduceRight()	反向归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduceRight返回	否
from()	将类数组对象和可遍历对象转化为数组	否
of()	将一组值转化为数组	否

详细操作

1. pop()
功能：用于删除并返回数组的最后一个元素。
参数：无
返回值：删除的元素(即最后一位元素)
代码示例：

let arr = [1,2,3,4]
console.log(arr.pop())  //4
console.log(arr)   //[1,2,3]

2. push()
功能：在最后一位新增一或多个数据，返回长度。
参数：push(newData1, newData2, …)
返回值：新增后的数组长度
代码示例：

let arr = [1, 2, 3, 4, 5]
console.log(arr.push(6,7,8))  //8
console.log(arr)   //[1,2,3,4,5,6,7,8]

3. shift()
功能：删除第一位，并返回删除的数据
参数：无
返回值：删除的元素(即原数组第一个元素)
代码示例：

let arr = [1, 2, 3, 4, 5]
console.log(arr.shift())  //1
console.log(arr)   //[1,2,3,4,5]

4. unshift()
功能：在第一位新增一或多个数据，返回长度在第一位新增一或多个数据，返回长度
参数：unshift(newData1, newData2, …)
返回值：新增后的数组长度
代码示例：

let arr = [1, 2, 3, 4, 5]
console.log(arr.unshift(1,1,1))  //8
console.log(arr)   //[1,1,1,1,2,3,4,5]

5. reverse()
功能：反转数组，返回结果
参数：无
返回值：反转后的数组
代码示例：

let arr = [1, 2, 3, 4, 5]
console.log(arr)//[ 1, 2, 3, 4, 5 ]
arr.reverse()
console.log(arr)//[ 5, 4, 3, 2, 1 ]

6. sort()
功能：排序（字符规则），返回结果
参数：无（或传入callback）
返回值：排序后的数组
代码示例：

let arr = [1,3,5,2,0]
console.log(arr)//[ 1, 3, 5, 2, 0 ]
arr.sort()
console.log(arr)//[ 0, 1, 2, 3, 5 ]

注意：JavaScript中数组的排序如果默认无参情况下，通常会先调用数组的toString方法，将每个元素都转成字符之后，再进行排序，此时会按照字符串的排序，逐位比较（ASCII），进行排序。证明如下：

let arr1 = [1999, 3, 51, 200, 0]
console.log(arr1)//[ 1999, 3, 51, 200, 0 ]
arr1.sort()
console.log(arr1)//[ 0, 1999, 200, 3, 51 ]

此时会发现并没有按照想象中的情况排，而是按照元素首位字符排序，那么如何解决呢，JavaScript提供了传参的方式，即通过传入回调函数（callback）解决，并可控制升序和降序：

let arr2 = [1999, 3, 51, 200, 0]
console.log(arr2)//[ 1999, 3, 51, 200, 0 ]
//升序
arr2.sort((a, b) => a - b)
console.log(arr2)//[ 0, 3, 51, 200, 1999 ]
//降序
arr2.sort((a, b) => b - a)
console.log(arr2)//[ 1999, 200, 51, 3, 0 ]

7. splice()
功能：删除指定位置，并替换，返回删除的数据
参数：splice(newData1, newData2, …)
返回值：删除元素组成的数组

注意：splice()是一个比较特殊的方法，根据传入参数的个数不同可实现不同的效果，下面依次举例
①无参：原数组不改变，返回一个空数组

let arr = [1, 2, 3, 4, 5]
console.log(arr)//[ 1, 2, 3, 4, 5 ]
arr.splice()
console.log(typeof (arr.splice()))//object
console.log(arr)//[ 1, 2, 3, 4, 5 ]

②一个参数：从给定位置下标开始，向后删除所有所有元素，返回删除的元素

let arr1 = [1, 2, 3, 4, 5]
console.log(arr1)//[ 1, 2, 3, 4, 5 ]
console.log(arr1.splice(1)) //[ 2, 3, 4, 5 ]
console.log(arr1) //[1]

③两个参数：第一个为开始删除的下标，第二个为删除的个数，返回删除的元素

let arr2 = [1, 2, 3, 4, 5]
console.log(arr2)//[ 1, 2, 3, 4, 5 ]
console.log(arr2.splice(1, 2)) //[ 2, 3 ]
console.log(arr2) //[ 1, 4, 5 ]

④三个及以上参数：第一个为开始删除的下标，第二个为删除的个数，其后为要在删除位置插入的元素，返回删除的元素

let arr3 = [1, 2, 3, 4, 5]
console.log(arr3)//[ 1, 2, 3, 4, 5 ]
console.log(arr3.splice(1, 2, 0, 0, 0)) //[ 2, 3 ]
console.log(arr3) //[ 1, 0, 0, 0, 4, 5 ]

8. copyWithin()
功能：在当前数组内部，将指定位置的成员复制到其他位置顶替掉原来位置的元素，并返回新数组
参数：

target：从该索引位置开始替换元素，如果为负值，则表示从右往左
start：从该索引位置开始读取元素（包括该索引对应的元素）。默认为0，如果为负值，则表示从右往左
end：到该索引位置前停止读取元素（不包括该索引对应的元素）。默认等于数组长度，使用负数可从数组结尾处规定位置开始

返回值：操作后的数组
代码示例：

let arr = [11, 22, 33, 44, 55, 66, 77, 88, 99]
console.log(arr.copyWithin(1, 3, 6));
//[ 11, 44, 55, 66, 55,66, 77, 88, 99 ]
//从索引为1的元素开始被替换,从索引为3的元素开始读取要替换的 索引为6的元素前面停止替换
//简单来说就是将索引为3,4,5位置的元素复制到索引为1,2,3的位置上.后面的元素不变。

注意：操作后数组长度不变

9. fill()
功能：使用给定的值，填充到数组中，类似于替换
参数：

value：要填充数组的值
start：填充开始的位置。默认为0
end：到填充结束的位置，默认值是this.length(数组长度)

返回值：填充后的数组
代码示例：

let arr = [0, 0, 0, 0, 0, 0]
console.log(arr)//[0, 0, 0, 0, 0, 0]
//未指定开始以及结束位置
console.log(arr.fill(1))//[ 1, 1, 1, 1, 1, 1 ]
console.log(arr)//[ 1, 1, 1, 1, 1, 1 ]
//指定开始以及结束位置
console.log(arr.fill(2,1,3)) //[ 1, 2, 2, 1, 1, 1 ]

10. concat()
功能：合并数组
参数：concat(data1,data2,…);
返回值：合并后的数组

代码示例：

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [7, 8, 9]
console.log(arr1.concat(arr2, arr3)) //[1, 2, 3, 4, 5, 6, 7, 8, 9]

11. join()
功能：根据指定分隔符将数组中的所有元素放入一个字符串（默认分隔符为","）
参数：join(string);
返回值：一个字符串

代码示例：

let arr = [1, 2, 3, 4, 5]
console.log(arr);//[ 1, 2, 3, 4, 5 ]
console.log(arr.join())//1,2,3,4,5
console.log(arr.join('*'))//1*2*3*4*5
console.log(arr.join('java'))//1java2java3java4java5
console.log(arr)//[ 1, 2, 3, 4, 5 ]

12. slice()
功能：截取指定位置的数组，并返回
参数：slice(start, end)
返回值：截取元素组成的数组

代码示例：

let arr = [1, 2, 3, 4, 5, 6, 7, 9]
console.log(arr) //[1, 2, 3, 4, 5, 6, 7, 9]
console.log(arr.slice())  //[1, 2, 3, 4, 5, 6, 7, 9]
console.log(arr.slice(1, 4))  //[2, 3, 4]
console.log(arr)  //[1, 2, 3, 4, 5, 6, 7, 9]

13. toString()
功能：直接转为字符串，并返回，类似于无参的join()方法
参数：无
返回值：转换后的字符串

代码示例：

let arr = [1,2,3,4]
console.log(arr)  //[ 1, 2, 3, 4 ]
console.log(arr.toString())  //1,2,3,4
console.log(arr)  //[ 1, 2, 3, 4 ]

14. valueOf()
功能：返回数组的原始值（一般情况下其实就是数组自身）
参数：无
返回值：数组本身

代码示例：

let arr = [1, 2, 3]
console.log(arr)  //[1, 2, 3]
console.log(arr.valueOf())  //[1, 2, 3]
console.log(arr.valueOf() === arr)  //true  证明返回的是原数组

15. indexOf()
功能：查询并返回数据的索引，找不到则返回-1
参数：indexOf(value[,start]);
返回值：下标

代码示例：

let arr = [1, 2, 3, 4, 5]
console.log(arr)  //[1, 2, 3, 4, 5]
console.log(arr.indexOf(3))  //2
console.log(arr.indexOf(0))  //-1
console.log(arr.indexOf(2, 1))  //1
console.log(arr.indexOf(2, 2))  //-1

16. lastIndexOf()
功能：查询并返回数据最后一次出现的索引，找不到则返回-1
参数：lastIndexOf(value[,start]);
返回值：下标

代码示例：

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
console.log(arr)  //[1, 2, 3, 4, 5, 4, 3, 2, 1]
console.log(arr.lastIndexOf(3))  //6
console.log(arr.lastIndexOf(0))  //-1
console.log(arr.lastIndexOf(2, 1))  //1
console.log(arr.lastIndexOf(2, 2))  //1

17. find()
功能：在数组内部, 找到第一个符合条件的数组成员，返回值，找不到返回undefined
参数：find(callback[, thisArg])；callback回调函数接受三个参数（element，index，self）

element：可选；当前遍历到的元素
index：可选：当前遍历到的索引
self：可选：数组本身
thisArg：执行回调时用作this 的对象

返回值：符合条件的元素

代码示例：

let arr = [9, 11, 8, 21, 15, 13, 20]
console.log(arr)  //[9, 11, 8, 21, 15, 13, 20]
console.log(arr.find((e) => e > 12)) //21 意思是从头遍历数组，直到遇见符合条件的元素为止，返回符合条件的元素
console.log(arr.find((e) => e > 100)) //undefined 
console.log(arr)  //[9, 11, 8, 21, 15, 13, 20]

18. findIndex()
功能：在数组内部, 找到第一个符合条件的数组成员，返回索引，找不到返回-1
参数：findIndex(callback[, thisArg])；callback回调函数接受三个参数（element，index，self）

element：可选；当前遍历到的元素
index：可选：当前遍历到的索引
self：可选：数组本身
thisArg：执行回调时用作this 的对象

返回值：符合条件的元素的索引

代码示例：

let arr = [9, 11, 8, 21, 15, 13, 20]
console.log(arr)  //[9, 11, 8, 21, 15, 13, 20]
console.log(arr.findIndex((e) => e > 12)) //3 意思是从头遍历数组，直到遇见符合条件的元素为止，返回符合条件的元素
console.log(arr.findIndex((e) => e > 100)) //-1
console.log(arr)  //[9, 11, 8, 21, 15, 13, 20]

19. includes()
功能：表示某个数组是否包含给定的值，与字符串的includes()方法类似
参数：includes(valueToFind[, fromIndex])
返回值：布尔值

代码示例：

let arr = [1, 2, 3, 4, 5]
console.log(arr)  //[1, 2, 3, 4, 5]
console.log(arr.includes(3))  //true
console.log(arr.includes(3, 3))  //false

20. forEach()
功能：表示某个数组是否包含给定的值，与字符串的includes()方法类似
参数：forEach(callback[, thisArg])；callback回调函数接受三个参数（value，index，self）

value：可选；当前遍历到的元素
index：可选：当前遍历到的索引
self：可选：数组本身

返回值：无

代码示例：

let arr = [1, 2, 3, 4, 5]
console.log(arr) //[1, 2, 3, 4, 5]
arr.forEach((value, index) => {
    console.log(index + '--' + value)
})
//0--1
//1--2
//2--3
//3--4
//4--5

21. map()
功能：表示某个数组是否包含给定的值，与字符串的includes()方法类似，但绝对数组进行操作，返回一个新数组，原数组不改变
参数：map(callback[, thisArg])；callback回调函数接受三个参数（value，index，self）

value：可选；当前遍历到的元素
index：可选：当前遍历到的索引
self：可选：数组本身
返回值：新数组

代码示例：

let arr = [1, 1, 1, 1, 1]
console.log(arr) //[1, 2, 3, 4, 5]

//第一个功能同forEach()一样
arr.map((value, index) => {
    console.log(index + '--' + value)
})
//0--1
//1--1
//2--1
//3--1
//4--1

//第二个功能，可有返回值，返回一个符合规则的数组
let a = arr.map((value)=>{
    return value + 10
})
console.log(a)  //[ 11, 11, 11, 11, 11 ]

22. filter()
功能：同forEach，同时回调函数返回布尔值，为true的数据组成新数组由filter返回
参数：filter(callback[, thisArg])；callback回调函数接受三个参数（value，index，self）

value：可选；当前遍历到的元素
index：可选：当前遍历到的索引
self：可选：数组本身
返回值：新数组

代码示例：

let arr = ['java', 'mysql', 'javascript', 'c++', 'python']
console.log(arr) //['java', 'mysql', 'javascript', 'c++', 'python']

// 第一个功能同forEach()一样
arr.filter((value, index) => console.log(index + '--' + value))
// 0--java
// 1--mysql
// 2--javascript
// 3--c++
// 4--python

//第二个功能，可有返回值，返回一个满足条件的数组
let a = arr.filter((value) => value.length > 4)
console.log(a)  //[ 'mysql', 'javascript', 'python' ]

23. every()
功能：同forEach，同时回调函数返回布尔值，全部为true，由every返回true
参数：every(callback[, thisArg])；callback回调函数接受三个参数（value，index，self）

value：可选；当前遍历到的元素
index：可选：当前遍历到的索引
self：可选：数组本身
返回值：布尔值

代码示例：

let arr = ['java', 'mysql', 'javascript', 'c++', 'python']
console.log(arr) //['java', 'mysql', 'javascript', 'c++', 'python']

// 第一个功能同forEach()一样
arr.every((value, index) => console.log(index + '--' + value))
// 0--java
// 区别在于：如果为false，那么停止执行，因为回调函数中没有return true，默认返回undefined，等同于return false

//第二个功能，返回布尔值，只有所有元素都满足条件时，才返回true
let a = arr.every((value) => value.length > 4)
console.log(a)  //false

24. some()
功能：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true
参数：some(callback[, thisArg])；callback回调函数接受三个参数（value，index，self）

value：可选；当前遍历到的元素
index：可选：当前遍历到的索引
self：可选：数组本身
返回值：布尔值

代码示例：

let arr = ['java', 'mysql', 'javascript', 'c++', 'python']
console.log(arr) //['java', 'mysql', 'javascript', 'c++', 'python']

// 第一个功能同forEach()一样
arr.filter((value, index) => console.log(index + '--' + value))
// 0--java
// 1--mysql
// 2--javascript
// 3--c++
// 4--python

//第二个功能，返回布尔值，只要有一个元素满足条件，就返回true
let a = arr.every((value) => value.length > 4)
console.log(a)  //true

25. reduce()
功能：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true
参数：reduce(callback,initial); reduce()接收一个或两个参数：第一个是回调函数，表示在数组的每一项上调用的函数；第二个参数（可选的）作为归并的初始值，被回调函数第一次执行时的第一个参数接收。
callback默认有四个参数，分别为prev，now，index，self
callback返回的任何值都会作为下一次执行的第一个参数。
如果initial参数被省略，那么第一次迭代发生在数组的第二项上，因此callback的第一个参数是数组的第一项，第二个参数就是数组的第二项。

prev：初始值, 或者计算结束后的返回值
now：当前元素值
index：当前元素的索引
self：数组自身

返回值：视情况而定，如下：

代码示例：

//1:不省略initial参数，回调函数没有返回值
let arr = [10, 20, 30, 40, 50];
arr.reduce((prev, now, index, self) =>
        console.log(prev + "--" + now + "--" + index + "--" + (arr === self))
    , 2019)
// 2019--10--0--true
// undefined--20--1--true
// undefined--30--2--true
// undefined--40--3--true
// undefined--50--4--true
// 此时回调函数没有return，所以从第二次开始，prev拿到的是undefined

//2:省略initial参数，回调函数没有返回值
arr.reduce((prev, now, index, self) => console.log(prev + "--" + now + "--" + index + "--" + (arr === self)))
// 第一次，回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
// 10--20--1--true
// undefined--30--2--true
// undefined--40--3--true
// undefined--50--4--true
// 此时回调函数没有return，所以从第二次开始，prev拿到的是undefined

//3:不省略initial参数，回调函数有返回值
arr.reduce((prev, now, index, self) => {
    console.log(prev + "--" + now + "--" + index + "--" + (arr === self))
    return "hello"
}, 2019)
// 2019--10--0--true
// hello--20--1--true
// hello--30--2--true
// hello--40--3--true
// hello--50--4--true
// 此时回调函数有return，所以从第二次开始，prev拿到的是回调函数return的值

//4:省略initial参数，回调函数有返回值
arr.reduce((prev, now, index, self) => {
    console.log(prev + "--" + now + "--" + index + "--" + (arr === self))
    return "hello"
})
// 第一次，回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
// 10--20--1--true
// hello--30--2--true
// hello--40--3--true
// hello--50--4--true
// 此时回调函数有return，所以从第二次开始，prev拿到的是回调函数return的值

//5：使用reduce计算数组中所有数据的和
let sum = arr.reduce((prev, now, index, self) => prev + now)
console.log(sum);      //150
// 回调函数的最后一次return的结果被返回到reduce方法的身上

//6：使用reduce计算数组中所有数据的和
let sum1 = arr.reduce((prev, now, index, self) => prev + now, 8)
console.log(sum1);      //158
// 回调函数的最后一次return的结果被返回到reduce方法的身上
// 因为reduce有第二个参数initial，在第一次执行时被计算，所以最终结果被加上8

26. reduceRight()
功能：reduceRight 和 reduce一样，只是他是从右向左进行迭代的

27. from()
功能：将类数组对象和可遍历对象转化为数组
参数：from(object, mapFunction, thisValue)

object：必需，要转换为数组的对象
mapFunction：可选，数组中每个元素要调用的函数
thisValue：可选，映射函数(mapFunction)中的 this 对象

返回值：新数组

代码示例：

let arr = "java";
console.log(Array.from(arr));//[ 'j', 'a', 'v', 'a' ] 将类数组对象转换为数组
console.log(arr);//"java"

28. of()
功能：将一组值(可以为集合)转化为数组
参数：of(element0[, element1[, …[, elementN]]])

elementN：任意个参数，将按顺序成为返回数组中的元素

返回值：新数组

代码示例：

let set = new Set([1, 2, 3]);
console.log(Array.of(1));         // [1]
console.log(Array.of(1, 2, 3));   // [1, 2, 3]
console.log(Array.of(set)); // [ Set(3) { 1, 2, 3 } ]

写的比较多，希望能帮到大家！！！

posted @ 2022-02-09 19:45 soberw- 阅读(157) 评论(0) 编辑收藏举报

刷新页面返回顶部

soberw-

一站式超全JavaScript数组方法大全

一站式JavaScript数组方法大全（建议收藏）

方法一览表

详细操作

公告