| 遍历方法 | 返回值 | 使用场景 | 备注 | 副作用 |
|---|---|---|---|---|
| for 循环 | —— | 遍历数组 | 通用 | 可以改变原数组 |
| forEach 循环 | —— | 遍历数组 | ES5 新增，不支持中断和异步 | 可以改变原数组 |
| for of 循环 | —— | 遍历数组 | ES6 新增 | 可以改变原数组 |
| map | 格式化后的数组 | 格式化 | 数组的API | 不会改变原数组 |
| filter | 过滤后的数组 | 过滤 | 数组的API | 不会改变原数组 |
| reduce | 最终计算结果 | 累计 | 数组的API | 不会改变原数组 |
| every | 匹配结果 | 全部匹配 | 数组的API | 不会改变原数组 |
| some | 匹配结果 | 部分匹配 | 数组的API | 不会改变原数组 |
for 循环
缺点：编码不太便捷
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
forEach 循环
缺点：不支持中断和异步
let arr = [1, 2, 3]
arr.forEach((item, index) => {
console.log(item, index)
})
不支持中断
使用 return 提前结束当次循环，但还会继续遍历！
let arr = [1, 2, 3]
arr.forEach((item) => {
console.log(item)
if (item === 2) {
return
}
console.log('执行完本次循环')
})
打印结果
1
执行完本次循环
2
3
执行完本次循环
不支持异步
import axios from 'axios'
let infoList = []
let id_list = ['1', '2', '3']
id_list.forEach(async (id) => {
let res = await axios.get(`http://jsonplaceholder.typicode.com/users/${id}`)
console.log(res)
infoList.push(res.data)
})
console.log(infoList) // []
for of 循环【推荐】
默认只能遍历数组中的元素
let arr = [1, 2, 3]
for (let item of arr) {
console.log(item)
}
要获取到数组的下标，需使用 entries
let arr = [1, 2, 3]
for (let [index, item] of arr.entries()) {
console.log(index, item)
}
支持中断
使用 break 提前跳出循环（常用于遍历数组，查找目标元素）
let arr = [1, 2, 3]
for (let item of arr) {
console.log(item)
if (item === 2) {
break
}
}
// 1 2
支持异步
import axios from 'axios'
let infoList = []
let id_list = ['1', '2', '3']
async function getInfo(id_list, infoList) {
for (let id of id_list) {
let res = await axios.get(`http://jsonplaceholder.typicode.com/users/${id}`)
infoList.push(res.data)
}
console.log(infoList) // 可得到预期结果
}
getInfo(id_list, infoList)
但更推荐使用 Promise.all 实现
import axios from 'axios'
let infoList = []
let id_list = ['1', '2', '3']
let promise_list = []
for (let id of id_list) {
promise_list.push(axios.get(`http://jsonplaceholder.typicode.com/users/${id}`))
}
Promise.all(promise_list).then((res) => {
infoList = res.map((item) => item.data)
console.log(infoList) // 可得到预期结果
})
map 格式化
let arr = [
{
age: 20
},
{
age: 30
},
{
age: 40
}
]
const result = arr.map((item) => {
return {
age: `${item.age}岁`
}
})
console.log(result)
// [ { age: '20岁' }, { age: '30岁' }, { age: '40岁' } ]
filter 过滤
let arr = [
{
name: '朝阳',
age: 20
},
{
name: '张三',
age: 30
},
{
name: '李四',
age: 40
}
]
const result = arr.filter(({ age }) => age < 30)
console.log(result)
//[ { name: '朝阳', age: 20 } ]
reduce 累计
如求和
let arr = [1, 2, 3]
let sum = arr.reduce((lastResult, nextItem) => lastResult + nextItem)
console.log(sum) // 6
更多 reduce 高级用法见
https://blog.csdn.net/weixin_41192489/article/details/116661854
every 全部匹配
let arr = [1, 2, 3]
// 是否每一个元素都小于 3
const result = arr.every((item) => item < 3)
console.log(result)
// false
some 部分匹配
let arr = [1, 2, 3]
// 是否存在元素小于 3
const result = arr.some((item) => item < 3)
console.log(result)
// true
