这么多数组方法，你掌握了么？
今天总结一下常用的JS数组方法，以免搞忘了或者记混了，大家觉得还有哪些数组方法在项目里用的特别多我没提到的可以补充。。
1.map ：遍历数组的每一项并对其进行操作。 有返回值 且 不改变原数组。
var arr = [1, 2, 3, 4, 5, 6]; var res = arr.map(item => { return item * 2; }); console.log(arr); //[1, 2, 3, 4, 5, 6] console.log(res); //[2, 4, 6, 8, 10, 12]
2. forEach ：遍历数组每一项并可对其操作，但是结果无用功。 因为forEach没有返回值 且 不改变原数组 可以针对数组的长度对你想要改变的变量进行修改。
var arr1 = [3, 4, 5, 6, 7]; var nums = 0; arr1.forEach(item => { console.log(item); nums++; }); console.log(arr1, nums);//[3,4,5,6,7],5
3. some： 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。每一项都会遍历。
const result = []; var arr2 = [ { name: "lx", age: 35 }, { name: "lxx", age: 20 }, { name: "l1x", age: 5 }, { name: "1lx", age: 15 }, { name: "zlx", age: 25 }, { name: "xlx", age: 22 } ]; arr2.some(item => { // console.log(item.age) console.log(item.age % 5 == 0); // 5true false if (item.age % 5 == 0) { result.push({ age: item.age }); } else { result.push({ unage: item.age }); } }); console.log(result);
4.every ： 该方法 测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。当有一项与条件成立时 后面的项停止遍历。同样返回值是一个Boolean类型。
var arr3 = [3, 2, 3, 4, 5, 6, 7]; function test(item) { return item > 1; } console.log(arr3.every(test)); //true
5.filter: 顾名思义 过滤 该数组方法就是能够做到拿到你想要得到的那条数据的一个数组 注意是数组！ 不会改变原数组
var arr4 = [ { name: "lx", age: 28 }, { name: "l1x", age: 5 }, { name: "1lx", age: 15 }, { name: "zlx", age: 25 }, { name: "xlx", age: 22 } ]; let res4 = arr4.filter(item => { return item.age == 25; }); console.log(res4); // [{…}]0: {name: "zlx", age: 25} length: 1__proto__: Array(0)
6. concat: 合并 该方法是将两个数组或多个数组合并成一个数组 不会改变原数组 可以采用扩展运算符... 结果是一样的
var arr5 = [13, 5, 6, 7]; var arr6 = [23, 5, 6, 7]; let res6 = arr6.concat(arr5); let res7 = [...arr5, ...arr6]; //求数组并集 res7 = [...new Set([...arr5, ...arr6])]; console.log(res7); // [13, 5, 6, 7, 23] // 求数组交集 var bs = new Set(arr5); var sa = new Set(arr6); //{23,5,6,7} let res8 = arr5.filter(item => sa.has(item)); console.log(res8);
7. reduce: 这个方法相当强大 基本上所有操作都可以实现 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。 参数callback，
//initialValue（不传 默认取数组的第一个元素）
// reducer 函数接收4个参数:
// Accumulator (acc) (累计器)
// Current Value (cur) (当前值)
// Current Index (idx) (当前索引)
// Source Array (src) (源数组)
//简单的例子 var arr7 = [1, 2, 3, 4, 5]; var ress7 = arr7.reduce((acc, cur) => { return acc + cur; }, 0); console.log(ress7); //15
注意：下面分场景分别介绍一下reduce这个方法的强大之处
//reduce场景1：累加对象数组中的值 var arr8 = [ { name: "lx", age: 28 }, { name: "l1x", age: 5 }, { name: "1lx", age: 15 }, { name: "zlx", age: 25 }, { name: "xlx", age: 22 } ]; var initValue = 0; const ress8 = arr8.reduce((acc, cur) => { return acc + cur.age; }, 0); console.log(ress8); //95
//场景2： 将二维数组降一维 var arr9 = [[1, 2], 4, 8, 9]; let res9 = arr9.reduce((acc, cur) => { return acc.concat(cur); }, []); console.log(res9); // [1, 2, 4, 8, 9]
//场景3： 计算数组中每个元素出现的个数 var arr10 = ["Alice", "Bob", "Tiff", "Bruce", "Alice"]; let res10 = arr10.reduce((acc, cur) => { if (cur in acc) { acc[cur]++; } else { acc[cur] = 1; } return acc; }, {}); console.log(res10);
// 场景4： 按属性对Object分类 var people = [ { name: "Alice", age: 21 }, { name: "Max", age: 20 }, { name: "Jane", age: 20 } ]; var resPeople = people.reduce((acc, obj) => { var key = obj["age"]; if (!acc[key]) { acc[key] = []; } acc[key].push(obj); return acc; }, {}); console.log(resPeople);
// 场景5：数组去重 var arr11 = ["a", "b", "a", "b", "c", "e", "e", "c", "d", "d", "d", "d"]; var res11 = arr11.reduce((acc, cur) => { if (acc.indexOf(cur) === -1) { acc.push(cur); } return acc; }, []); console.log(res11);
//场景6： 按顺序执行Promise function peomise1(a) { return new Promise((resolve, reject) => { //当异步代码执行成功后才会执行resolve setTimeout(() => { resolve(a * 5); }, 1000); }); } function peomise2(a) { return new Promise((resolve, reject) => { //当异步代码执行成功后才会执行resolve setTimeout(() => { resolve(a * 2); }, 2000); }); } function peomise3(a) { return new Promise((resolve, reject) => { //当异步代码执行成功后才会执行resolve setTimeout(() => { resolve(a * 6); }, 1000); }); } console.log(Promise.resolve(3)); //reduce 方式 顺序执行并返回一个结果 function runPromise(arr, input) { return arr.reduce((acc, cur) => acc.then(cur), Promise.resolve(input)); } const promiseArr = [peomise1, peomise3, peomise2]; runPromise(promiseArr, peomise1(3)).then(console.log);
8.slice： 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。同样不会对原数组改变
let arr12 = [24, 3, 6, 8, 7, 9]; //省略第二个参数end 会一直拷贝到数组结尾处的元素 let res12 = arr12.slice(3); console.log(res12); // [8,7,9]
9. splice(start[, deleteCount[, item1[, item2[, ...]]]]): 这个方法之前一直和slice分不清楚，其实它们有个最大的不同点就是，这个方法是改变原数组的，不会重新开辟一个空间去改变数组长度。
参数 start 指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等
价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
deleteCount 可选 整数，表示要移除的数组元素的个数。
item1, item2, ... 可选 要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。
let arr13 = [1, 3, 5, 7, 9, 7, 2, 6, 57, 7]; //增 第一个参数代表位置索引 arr13.splice(1, 0, "2"); // [1, "2", 3, 5, 7, 9, 7, 2, 6, 57, 7] //删 第二个参数表示删除元素的个数，当省略时表示从索引处到数组结尾处全删 arr13.splice(2); //[1,"2"] //改 arr13.splice(0, 1, "哈哈"); console.log(arr13); // ["哈哈", "2"]
//例题熟悉一下这两个方法： 从第 2 位开始删除 0 个元素，插入“drum” var myFish = ["angel", "clown", "mandarin", "sturgeon"]; myFish.splice(1, 0, "drum"); console.log(myFish); //["angel", "drum", "clown", "mandarin", "sturgeon"] //从第 3 位开始删除 1 个元素 var myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"]; myFish.splice(3, 1); console.log(myFish); // ["angel", "clown", "drum", "sturgeon"]
10. pop：没有参数，负责删除数组的最后一个元素,改变原数组
var arr14 = [1, 4, 5, 9]; arr14.pop(); //[1, 4, 5] console.log(arr14);
11. push: 像数组末尾添加一个元素或多个元素 arr.push(element1, ..., elementN)
var arr14 = [1, 4, 5, 9]; arr14.push("3"); //[1, 4, 5,9,"3"] arr14.push("3", 2); console.log(arr14);
12.shift: 删除数组的第一个元素 改变原数组
var arr15 = [1, 4, 5, 9]; arr15.shift(); //[4, 5, 9] console.log(arr15);
13.unshift: 在数组首位添加一个或多个元素
var arr16 = [6, 1, 4, 5, 9, 8]; arr16.unshift("5", 3); //["5", 3, 6, 1, 4, 5, 9, 8] console.log(arr16);
14. fill : 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
arr.fill(value[, start[, end]])
参数：value 填充数组元素的值
start 起始索引 默认0
end 终止索引 默认this.length
var arr17 = [2, 3, 4]; arr17.fill(6); //[6,6,6] arr17.fill("7", 0, 2); //["7", "7", 6] console.log(arr17);
15. flat: 大家对这个方法一定不熟悉，我在一次做项目的时候用到了它，下面看看它的作用 方法很强大 扁平化数组 但是有兼容性的影响
// 参数表示扁平化的层级 var arr18 = [2, 6, 8, [9, 10, 26]]; let res18 = arr18.flat(1); //[2, 6, 8, 9, 10, 26] //Infinity 可以扁平任意深度的数组 // let res18 = arr18.flat(Infinity) //[2, 6, 8, 9, 10, 26] console.log(res18);
16.join： 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。
// 不改变原数组 var arr19 = [2, 2, 6, 3, 4, 5, 6, "y"]; var res19 = arr19.join(","); //2,2,6,3,4,5,6,y var res20 = arr19.join(""); //2263456y console.log(res20);
17. find ： 方法返回数组中满足提供的测试函数的第一个元素 的值。否则返回 undefined。 注意是第一个
var arr21 = [ { name: "lz", age: 21 }, { name: "lx", age: 21 }, { tine: "xx", ageL: 23 } ]; let res21 = arr21.find(ele => ele.age === 21) console.log(res21) //{name: "lz", age: 21} 返回元素 //想要所有符合条件的 就可以用filter方法 let res22 = arr21.filter(ele => ele.age === 21) console.log(res22) //返回数组 [{…}, {…}]
18.findIndex: 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。 注意是第一个
var arr23 = [ { name: "lz", age: 21 }, { name: "lx", age: 21 }, { tine: "xx", ageL: 23 } ]; let res23 = arr23.findIndex(ele => ele.age === 21) console.log(res23) //0 返回索引
19.indexOf： 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
var arr24 = [1, { name: "lz", age: 21 }, { name: "lx", age: 21 }, { tine: "xx", ageL: 23 } ]; let res24 = arr24.indexOf(1) console.log(res24) //0 返回索引
先总结这些，后续会补充，还会总结一些对象常用的方法，只有不断总结，才能让自己对这些方法不陌生，才能在项目中能有多种解决方法，选择一种最优解。
