小陈同学の前端笔记 | 关于数组一些常用方法的整理（三）

「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」

本期是数组常用方法系列的最后一期，将介绍关于数组遍历的方法。

数组遍历方法

forEach()

定义：forEach()方法对数组的每个含有效值的元素执行一次给定的函数，那些已删除或未初始化的将被跳过,总是返回undefined。

语法：Array.prototype.forEach( callback(currentValue,index,array),thisArg )

参数：

callback（必选）：数组中每个含有效值的元素执行一次的函数，含有一至三个参数。
currentValue（必选）：数组中正在处理的当前元素。
index（可选）：数组中正在处理的当前元素的索引。
array（可选）：正在操作的数组。
thisArg（可选）：当执行callback时，用作this的值。

使用：

let arr = [1,2,3,,4,5]
let callback = function(currentValue,index,array) {
    if(currentValue == 3)
        return;
    if(currentValue == 4)
        throw Error('抛出异常可以中止/跳出循环')
    console.log(currentValue,index,array)
}
arr.forEach(callback)
复制代码

注：只有 抛出异常 才能中止/跳出循环。使用 return 只能退出本次回调，进行下次回调。

map()

定义：map()方法创建一个新数组，其结果是该数组中的每个元素调用一次回调函数后的返回值。

语法：Array.prototype.map( callback(currentValue,index,array),thisArg )

参数：

callback（必选）：数组中每个含有效值的元素执行一次的函数，含有一至三个参数。
currentValue（必选）：数组中正在处理的当前元素。
index（可选）：数组中正在处理的当前元素的索引。
array（可选）：正在操作的数组。
thisArg（可选）：当执行callback时，用作this的值。

使用：

let arr = [1,2,3,,4,5]
let resArr = arr.map(item => item * 2)
console.log(arr)        // [1, 2, 3, empty, 4, 5]
console.log(resArr)     // [2, 4, 6, empty, 8, 10]
复制代码

filter()

定义：filter()方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

语法：Array.prototype.filter( callback(currentValue,index,array),thisArg )

参数：同上。

使用：

let arr = [1,2,3,4,5]
let filterArr = arr.filter(item => item >= 3)
console.log(filterArr)   // [3, 4, 5]
复制代码

every()

定义：every()方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

语法：Array.prototype.every( callback(currentValue,index,array),thisArg )

参数：同上。

使用：

let arr = [1,2,3,4,5]
let everyRes = arr.every(item => item > 0)
let everyRes1 = arr.every(item => {
    console.log(item);
    return item > 2
})                                  // 1
                                    // 若有一个不满足，则直接返回false
console.log(everyRes,everyRes1)     // true false
复制代码

some()

定义：some()方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个布尔值。

语法：Array.prototype.some( callback(currentValue,index,array),thisArg )

参数：同上。

使用：

let arr = [1,2,3,4,5]
let someRes =arr.some(item => item < 0)
let someRes1 = arr.some(item => {
    console.log(item)
    return item > 0
})                               // 1
                                 // 若有一个满足，则直接返回true
console.log(someRes,someRes1)    // false true
复制代码

reduce()

定义：reduce()方法对数组中的每个元素执行一个自定义的reducer函数(升序执行)，将其结果汇总为单个返回值。

语法：Array.prototype.reduce( reducer(pre,cur,index,array),initialValue )

参数：

reducer（必选）：由用户自定义的函数，含有二至四个参数。
pre（必选）：上一次调用回调返回的累计值，或initialValue。
cur（必选）：数组中当前正在处理的值。
index（可选）：数组中当前正在处理的值的索引。
array（可选）：调用该方法的原数组。
initialValue（可选）：作为第一次调用reducer函数第一个参数的值。

注：回调函数第一次执行时，若提供了initialValue，则pre等于它，cur为数组第一个元素；
若没有提供，则pre取数组中第一个元素的值，cur为数组中第二个元素。

使用：

let arr = [1,2,3,4,5]
arr.reduce((pre,cur,index,array) => {
    console.log(pre,cur,index,arr)
})
console.log('---分割线---')

// 使用reduce求和
let sum = arr.reduce((pre,cur) => {
    console.log(pre,cur)
    return pre + cur
})
console.log('sum = ',sum)

// 使用reduce计算重复次数
let nums = [1,1,2,3,4,4,4,5,6,7,8,8,8,8,8,8,9]
let res = nums.reduce((pre,cur)=>{
    if(!pre[cur]) pre[cur] = 1
    else pre[cur] ++
    return pre
},{})
console.log(res)
复制代码

思考一下，为什么会出现红框中的undefined？

因为我们在第一段代码中，回调函数并没有返回值，导致在第二次回调的时候，pre一直是undefined。

reduceRight()

与reduce()没有什么区别，只是顺序是从右往左。

find() & findIndex()

定义：find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined。

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。

两者皆可识别 NaN。

语法：Array.prototype.find/findIndex( callback(currentValue,index,array),thisArg )

参数：

callback（必选）：数组中每个含有效值的元素执行一次的函数，含有一至三个参数。
currentValue（必选）：数组中正在处理的当前元素。
index（可选）：数组中正在处理的当前元素的索引。
array（可选）：正在操作的数组。
thisArg（可选）：当执行callback时，用作this的值。

使用：

let arr = [1,2,NaN,-1,-3,NaN,4]
let item = arr.find(item => item < 0)
let index = arr.findIndex(item => Object.is(NaN,item))
console.log(item,index)      // -1 2
复制代码

结语

以上就是本期关于数组遍历方法的介绍。

如有纰漏，欢迎指出！