首页 > 技术文章 > es6数组遍历(map、filter、find、findIndex)

MrSlow 2021-07-08 14:16 原文

数组遍历

arr.map(callback [, thisArg])

map方法我们用得最最最多了吧,超级好用,当你需要批量改变数组中的值的时候就要想到它了
注:map方法不会改变原始值,它会返回一个新的数组
例:

let arr = [1, 2, 3, 4, 5, 6]
// 把上面的arr中数据统一加2
arr = arr.map(val => val + 2)
console.log(arr) // [3, 4, 5, 6, 7, 8]

arr.filter(callback [, thisArg])

当我们需要对数组进行筛选的时候,就用得上了。
注:此方法也不会改变原始数组,会返回一个筛选成功匹配的元素组成的新数组。

例:

let arr = [{
    age: 25,
    address: '你猜'
}, {
    age: 40,
    address: '你猜'
}, {
    age: 30,
    address: '你猜'
}]
// 此时我们要把年龄大于30的人筛选出来
let newArr = arr.filter(item => {
    return item.age > 30
})
console.log(newArr.length) // 1
console.log(newArr[0].age) // 40

findIndex(callback [, thisArg])查找数组中匹配的元素

找到一个就返回匹配的元素的下标,没找到就返回-1。注:跟find一样,只是返回值不一样。例:
let arr = [1, 2, 3, 4, 5, 6]// 此时我们找大于2的数
let newArr = arr.findIndex(val => {return val > 2})
console.log(newArr) // 2

find(fn(callback [, thisArg])

查找数组中匹配的元素,找到一个就返回匹配的元素,没找到就返回undefined。

注:下面的例子相对于需求是一个错误的示范,因为我们要找出大于2的数,当找到匹配到3时,满足条件,函数就会停止。

例:

let arr = [1, 2, 3, 4, 5, 6]
// 此时我们找大于2的数
let newArr = arr.find(val => {
    return val > 2
})
console.log(newArr) // 3

另外

还有一些其他方法,也比较好用,但支持版本太高,比如:

// 此方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值
arr.reduce(callback [, initialValue]); 
[1, 2, 3].reduce((prev, current) => {
    return prev + current;  // 1 + 2, 3+ 3
});

// 测试数组中所有元素是否都通过了指定函数的测试
arr.every(callback [, thisArg]); 

// 测试数组中是否至少有一项元素通过了指定函数的测试
str.some(callback [, thisArg]); 

推荐阅读