ES6形式常用的数组遍历函数

文章目录

0. 给定一个数组
1. find()：查找成员对象
2. findIndex()：查找成员下标
3. filter()：过滤数组
4. forEach()：迭代数组
5. some()和every()：量词遍历
6. map()：变换
7. reduce()：规约

0. 给定一个数组

const arr = [{name: '袁绍',age: 33,title: '本初',index: 2},{name: '曹操',age: 40,title: '孟德',index: 1},{name: '刘备',age: 35,title: '玄德',index: 6},{name: '马超',age: 30,title: '孟起',index: 7},{name: '张飞',age: 28,title: '翼德',index: 3},{name: '关羽',age: 27,title: '云长',index: 4},{name: '赵云',age: 22,title: '子龙',index: 4},
]

1. find()：查找成员对象

用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。find()返回的结果是一个对象。

const obj1 = arr.find(item => item.age < 30)
const obj2 = arr.find(item => item.index == 4)
const obj3 = arr.find(item => item.title !== '玄德')
const obj4 = arr.find(item => item.name.indexOf('关', 0) !== -1)console.log(obj1) //{"name": "张飞","age": 28,"title": "翼德","index": 3}
console.log(obj2) //{"name": "关羽","age": 27,"title": "云长","index": 4}
console.log(obj3) //{"name": "袁绍","age": 33,"title": "本初","index": 2}
console.log(obj4) //{"name": "关羽","age": 27,"title": "云长","index": 4}

字符串查找可参考这里

2. findIndex()：查找成员下标

返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。findIndex()返回的结果是一个整型的值。

const index1 = arr.findIndex(item => item.age < 30)
const index2 = arr.findIndex(item => item.index == 4)
const index3 = arr.findIndex(item => item.title !== '玄德')
const index4 = arr.findIndex(item => item.name.indexOf('关', 0) !== -1)console.log(index1) //4
console.log(index2) //5
console.log(index3) //0
console.log(index4) //5

3. filter()：过滤数组

使用指定的回调函数测试所有数组元素，并创建一个包含所有通过测试的元素构成的新数组。filter()不改变原数组内容，返回的结果是一个新的数组。

const arr1 = arr.filter(item => item.age < 30)
const arr2 = arr.filter(item => item.index == 4)
const arr3 = arr.filter(item => item.title !== '玄德')
const arr4 = arr.filter(item => item.name.indexOf('关', 0) !== -1)console.log(arr1)
console.log(arr2)
console.log(arr3)
console.log(arr4)

返回值

注意：上边所述的函数都是有返回值的。因此，箭头函数体部分都是一个可以得到布尔值的表达式，而不是一个语句块{…}。当然也可以显式return一个具有布尔值的表达式。

4. forEach()：迭代数组

遍历数组所有元素，利用回调函数对数组的每一个元素进行操作。不支持break或continue关键字。特别地，return只用于决定是否结束当前循环（不是整个循环），类似continue。forEach()仅是一个遍历操作，没有返回值——可理解为返回void。forEach()不会修改原来的数组。

let newArr = []
arr.forEach(item => {if (item.age < 30) {newArr.push(item.name)}
})newArr.forEach(item => {console.log(item)
})
/* 输出：
张飞
关羽
赵云
*/

既然是操作，箭头函数体部分当然要使用{…}语句块形式。

let nb
arr.forEach(item => {if (item.index === 4) { // 4可有两个呕！nb = item.name}
})console.log(nb) // 赵云//return到底有啥用？
let nb
arr.forEach(item => {if (item.index === 4) {nb = item.namereturn}
})console.log(nb) // 还是输出：赵云//再看
let nb
arr.forEach(item => {if (item.index === 4) {nb = item.namereturn // 相当于continueconsole.log(nb) //不被输出}
})

特殊方法修改原数组内容

let test = arr.forEach((item, index, input) => {input[index] = item.age + 10
})
console.log(test) // 没有返回值
console.log(arr) // 原数组被改了

结果

5. some()和every()：量词遍历

两个函数都遍历数组中的所有元素。两个函数都返回布尔值。

some()
存在量词，数组中只要存在（至少一个）满足条件的元素就返回true，否则返回false。
every()
全称量词，数组中的元素必须都满足条件才返回true，否则返回false。

console.log(arr.some(item => item.age > 39)
) // trueconsole.log(arr.every(item => item.age < 30)
) // false

6. map()：变换

依次处理数组中的每一个元素。每一个元素均被map()定义的回调函数进行变换，将变换后的元素再收集起来，最终返回一个新的数组。
map()不会对空数组进行处理，不会改变原始数组。

const newArr = arr.map(item => item.name)
console.log(newArr) //["袁绍","曹操","刘备","马超","张飞","关羽","赵云"]const newArr = arr.map(item => item.age > 30)
console.log(newArr) //[true,true,true,false,false,false,false]const newArr = arr.map(item => item.age > 30? 'A':'B')
console.log(newArr) //["A","A","A","B","B","B","B"]const newArr = arr.map(item => {if (item.index < 4) {return item}
})console.log(newArr)
/** 输出：
[{"name": "袁绍","age": 33,"title": "本初","index": 2},{"name": "曹操","age": 40,"title": "孟德","index": 1},null,null,{"name": "张飞","age": 28,"title": "翼德","index": 3},null,null
]
*/const newArr = arr.map(item => item.age + 10)
console.log(newArr) // [43,50,45,40,38,37,32]

数组成员是对象的变换

const newArr = arr.map(item => {let {name, age, title} = itemlet elem = {name,age: age+10,alias: title}return elem
})console.log(newArr)

结果

7. reduce()：规约

这里“规约”类似于SQL中的聚合函数。即把一个数组表达的集合聚合为一个值——多个值变一个值。该函数最终返回一个单值。

// preVal：前一次调用reduce()的返回值；currVal：当前遍历到的数组元素
const totle = arr.reduce((preVal, currVal) => {return preVal + currVal.age
}, 0) // 0是初始值console.log(totle) //215