【JavaScript】高级语法——常用的数组处理方法
1. filter 过滤
filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
示例代码如下：
// 要求： 使用filter方法过滤出nums数组中的偶数/* 三个参数： * item ：数组中的每一项 * index : 数组中每一项的索引值 * arr ：该数组 （本案例中为数组nums）*/var nums = [10, 5, 16, 21, 55, 37]var newNums1 = nums.filter((item, index, arr) => { // console.log(item, index, arr) return item % 2 == 0})console.log(newNums1) // [ 10, 16 ]2. map 映射
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
示例代码如下：
// map 映射/* callback 为数组中每个元素执行的函数，该函数接收三个参数： * currentValue ：数组中正在处理的当前元素。 * index : 数组中正在处理的当前元素的索引。 * array 可选 ：forEach() 方法正在操作的数组。*/var nums = [10, 5, 16, 21, 55, 37]var newNums2 = nums.map(item => { return item * 2})console.log(newNums2) // [ 20, 10, 32, 42, 110, 74 ]需要注意的是
map()方法回调函数的结果组成了新数组的每一个元素。而不是修改了原数组。
3. forEach 迭代
forEach() 方法对数组的每个元素执行一次提供的函数。
/* callback 为数组中每个元素执行的函数，该函数接收三个参数： * currentValue ：数组中正在处理的当前元素。 * index : 数组中正在处理的当前元素的索引。 * array 可选 ：forEach() 方法正在操作的数组。*/var nums = [10, 5, 16, 21, 55, 37]var arr = []nums.forEach(item => { if (item % 2 == 0) { arr.push(item) }})console.log(arr) // [ 10, 16 ]4. find 查找
find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
var nums = [10, 5, 16, 21, 55, 37]var result1 = nums.find(item => { return item == 16})var result2 = nums.find(item => { return item == 200})console.log(result1) // 16console.log(result2) // undefined// 也可以深入查找对象中的某个属性，如下所示：var arr2 = [ { name: 'L', age: 19 }, { name: 'W', age: 6 }, { name: 'Z', age: 24 }]console.log(arr2.find(item => { return item.age == 24})) // { name: 'Z', age: 24 }5. findIndex 查找索引
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
var arr2 = [ { name: 'L', age: 19 }, { name: 'W', age: 6 }, { name: 'Z', age: 24 }]var findIndex1 = arr2.findIndex(item => { return item.name === 'Z' })var findIndex2 = arr2.findIndex(item => { return item.name === 'K' // })console.log(findIndex1) // 2 索引从0开始，{ name: 'Z', age: 24 }索引为2console.log(findIndex2) // -1 查找不到name叫K的对象，返回-16. reduce 累积
reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
/* 语法： arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) 两个参数： 回调函数callback 中的四个参数： * accumulator 累计器 （上一次的返回值） * currentValue 当前值 * index(可选) 当前索引 * array(可选) 数组 第二个参数（可选）： * initialValue 作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的 空数组上调用 reduce 将报错。*/var nums = [10, 5, 16, 21, 55, 37]var total = nums.reduce((acc, cur) => { return acc + cur}, 0) // 0 代表initialValue值console.log(total) // 144 (nums数组元素之和)reduce()方法比较难理解，这里就进行一个详细一点的解释。
reduce为数组中的每一个元素依次执行callback函数，不包括数组中被删除或从未被赋值的元素。
回调函数第一次执行时，accumulator 和currentValue的取值有两种情况：如果调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值；如果没有提供initialValue ，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。
注意：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。
如果感觉本篇文章有用请点赞收藏谢谢！祝大家顺利上岸！