js数组常用方法详解
原创
接着之前数组常用方法详解(一)第二部分介绍数组剩下的一些常用方法
2.12 *** concat()
concat()方法可以在现有数组全部元素基础上创建一个新数组，它首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组。如果传入一个或多个数组，则 concat()会把这些数组的每一项都添加到结果数组。如果参数不是数组，则直接把它们添加到结果数组末尾：
不改变原始数组。
let arr = [1, 2, 3];
let arr1 = arr.concat(4, [5, 6]);
// arr1: [1, 2, 3, 4, 5, 6] arr: [1, 2, 3]
let arr2 = [1, 2, 3];
let arr3 = arr2.concat(4, 5, 6);
// arr3: [1, 2, 3, 4, 5, 6] arr2: [1, 2, 3]2.13 *** slice()
slice()用于创建一个包含原有数组中一个或多个元素的新数组(截取数组中的某一段， 不改变原始数组)。
slice()方法可以接收一个或两个参数：返回元素的开始索引和结束索引。如果只有一个参数，则slice()会返回该索引到数组末尾的所有元素。如果有两个参数，则 slice()返回从开始索引到结束索引对应的所有元素，其中不包含结束索引对应的元素。
let arr = [1, 2, 3];
arr.slice(1); // [2, 3]
arr.slice(0, 1); // [1]
arr.slice(-2, -1); // [2]
arr.slice(1, -1); // [2]
// arr: [1, 2, 3]2.13 *** splice()
或许最强大的数组方法就属 splice()了，使用它的方式可以有很多种。splice()的主要目的是在数组中间插入元素（会改变原数组）。
删除： 需要给 splice()传 2 个参数：要删除的第一个元素的位置和要删除的元素数量。可以从数组中删除任意多个元素，比如 splice(0, 2)会删除前两个元素(返回被删除的元素数组)：
let arr = [1, 2, 3];
arr.splice(0, 2); // 从第0位开始删除，删除两个元素 [1, 2]
// arr: [3]
插入： 需要给 splice()传 3 个参数：开始位置、0（要删除的元素数量）和要插入的元素，可
以在数组中指定的位置插入元素。第三个参数之后还可以传第四个、第五个参数，乃至任意多个要插入的元素。比如，splice(2, 0, “red”, “green”)会从数组位置 2 开始插入字符串"red"和"green"：
let arr = [1, 2, 3];
arr.splice(1, 0, "red", "green"); // []
// 从第一位索引处删除0个元素，在1索引处插入"red"，"green"; 返回被删除的元素[]
// arr: [1, 'red', 'green', 2, 3]替换：splice()在删除元素的同时可以在指定位置插入新元素，同样要传入 3 个参数：开始位
置、要删除元素的数量和要插入的任意多个元素。要插入的元素数量不一定跟删除的元素数量一致。比如，splice(2, 1, “red”, “green”)会在位置 2 删除一个元素，然后从该位置开始向数组中插入"red"和"green"：
let arr = [1, 2, 3];
arr.splice(1, 1, "red");
// 从索引1处的元素开始，删除1个元素，在索引1处插入"red" 返回被删除的元素[2]
// arr: [1, "red", 3]2.14 *** indexOf()、lastIndexOf()
indexOf()、lastIndexOf()方法都接收两个参数：要查找的元素和一个可选的起始搜索位置。indexOf()方法从数组前头（第一项）开始向后搜索，而lastIndexOf()从数组末尾（最后一项）开始向前搜索;indexOf()和 lastIndexOf()都返回要查找的元素在数组中的位置，如果没找到则返回-1：
let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
arr.indexOf(4); // 3
arr.lastIndexOf(4); // 5
arr.indexOf(4, 4); // 5
arr.lastIndexOf(4, 4); // 32.15 *** includes() (ES7)
includes()接收两个参数：要查找的元素和一个可选的起始搜索位置，includes()方法从数组前头（第一项）开始向后搜索，includes()返回布尔值，表示是否至少找到一个与指定元素匹配的项：
let arr = [1, 2, 3];
arr.includes(3); // true2.16 find()、findIndex()
find()和findIndex()里是一个回调函数，接收 3 个参数：元素、索引和数组本身。其中元素是数组中当前搜索的元素，索引是当前元素的索引，而数组就是正在搜索的数组这两个方法都从数组的最小索引开始。find()返回第一个匹配的元素，findIndex()返回第一个匹配元素的索引：
// find()
let arr = [1, 2, 3];
let result = arr.find((element, index, array) => {
return element < 3;
}) // result: 1
// findIndex()
let result1 = arr.findIndex((element, index, array) => {
return element < 3
}) // result1: 02.17 *** every()、some()
every(): 对数组每一项都运行传入的函数，如果对每一项函数都返回 true，则这个方法返回 true。
some(): 对数组每一项都运行传入的函数，如果有一项函数返回 true，则这个方法返回 true。
// every()
let arr = [1, 2, 3];
let result = arr.every((element, index, array) => {
return element >= 1;
}) // 因为每一项都满足>=1的条件，所以result为true;如果有一个不满足，返回false
// some()
let result1 = arr.some((element, index, array) => {
return element > 2;
}) // 因为3满足 > 2 的条件，所以reslut1为true; 如果都不满足的话返回false2.18 *** filter()
对数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回（将满足条件的筛选出来组成一个数组）。
let arr = [1, 2, 3];
let result = arr.filter((element, index, array) => {
return element > 1;
}) // 结果为: [2, 3]2.19 *** map()
对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组(可以理解为对数组的每一项进行操作后返回)。
let arr = [1, 2, 3];
let result = arr.map((element, index, array) => {
return element * 2;
}) // result: [2, 4, 6]2.20 *** forEach()
对数组每一项都运行传入的函数，没有返回值(遍历数组)；
let arr = [1, 2, 3];
arr.forEach((element, index, array) => {
console.log(element);
console.log(index);
})
// 1 值
// 0 索引
// 2 值
// 1 索引
// 3 值
// 2 索引2.20 *** reduce()
reduce(callback, initialValue) reduce为数组中的每个元素依次执行回调函数，接受4个参数：初始值（或者上次回调函数的返回值）、当前元素值、当前索引、调用reduce的数组；initialValue：以之为归并起点的初始值。
例：
let arr = [1, 2, 3, 4, 5];
arr.reduce((prev, current, index, array)，initialValue)：如果有initialValue，prev的初始值就initialValue，current的初始值是arr数组的第一项1；如果没有initialValue，prev的初始值是arr数组中的第一项 1， current的初始值是第二项2； 每次循环过后的值也会赋给prev。
// 当无initialValue参数时
let arr = [1, 2, 3, 4];
let result = arr.reduce((prev, cur, index) => {
console.log(prev, cur, index);
return prev + cu
})
console.log(result);
// 1 2 1
// 3 3 2
// 6 4 3
// 10
// 可以看出，index是从1开始的，第一次的prev的值是数组的第一个值,数组长度为4，但是reduce循环次数为3
// 当有initialValue参数时
let arr = [1, 2, 3, 4];
let result = arr.reduce((prev, cur, index) => {
console.log(prev, cur, index);
return prev + cu
}, 0)
console.log(result);
// 0 1 0
// 1 2 1
// 3 3 2
// 6 4 3
// 10
//可以看出，index是从0开始的，第一次的prev的值是我们设置的initialValue的值。数组长度为4，reduce函数循环4次如果数组为空，且没有initialValue，会报错
reduce数组的用法
// 数组求和
let arr = [1, 2, 3];
let result = arr.reduce((pre, cur) => {
return pre + cur;
}, 0) // result: 6
// 求乘积
let result1 = arr.reduce((pre, cur) => {
return pre * cur;
}) // result1: 6
// 计算数组中每个元素的个数
let arr1 = [1, 2, 3, 4, 5, 5, 1, 2, 1, 4, 4, 6, 5];
let result1 = arr1.reduce((pre, cur) => {
if(cur in pre) {
pre[cur]++
} else {
pre[cur] = 1
}
return pre;
}, {})
console.log(result1); // {1: 3, 2: 2, 3: 1, 4: 3, 5: 3, 6: 1}// 数组去重
let arr2 = [1, 2, 3, 4, 5, 5, 1, 2, 1, 4, 4, 6, 5];
let result2 = arr2.reduce((pre, cur) => {
if (!pre.includes(cur)) {
pre.push(cur);
}
return pre;
}, []) // result2: [1, 2, 3, 4, 5, 6]
2.20 *** reduceRight()
reduceRight()用法和reduce()一样，不同的是reduce()方法从数组第一项开始遍历到最后一项。而 reduceRight()从最后一项开始遍历至第一项。
以上就是数组的一些常用方法和属性，对一些我认为比较重要且常用的方法我都会在标题处加上 *** ，希望可以帮助到各位，谢谢！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
