| 遍历方法 | 返回值 | 使用场景 | 备注 | 副作用 |
|---|---|---|---|---|
| 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