js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some

遍历方法 返回值 使用场景 备注 副作用
for 循环 ------ 遍历数组 通用 可以改变原数组
forEach 循环 ------ 遍历数组 ES5 新增,不支持中断和异步 可以改变原数组
for of 循环 ------ 遍历数组 ES6 新增 可以改变原数组
map 格式化后的数组 格式化 数组的API 不会改变原数组
filter 过滤后的数组 过滤 数组的API 不会改变原数组
reduce 最终计算结果 累计 数组的API 不会改变原数组
every 匹配结果 全部匹配 数组的API 不会改变原数组
some 匹配结果 部分匹配 数组的API 不会改变原数组

for 循环

缺点:编码不太便捷

js 复制代码
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

forEach 循环

缺点:不支持中断和异步

js 复制代码
let arr = [1, 2, 3]

arr.forEach((item, index) => {
  console.log(item, index)
})

不支持中断

使用 return 提前结束当次循环,但还会继续遍历!

js 复制代码
let arr = [1, 2, 3]

arr.forEach((item) => {
  console.log(item)
  if (item === 2) {
    return
  }
  console.log('执行完本次循环')
})

打印结果

bash 复制代码
1
执行完本次循环
2
3
执行完本次循环

不支持异步

js 复制代码
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 循环【推荐】

默认只能遍历数组中的元素

js 复制代码
let arr = [1, 2, 3]

for (let item of arr) {
  console.log(item)
}

要获取到数组的下标,需使用 entries

js 复制代码
let arr = [1, 2, 3]

for (let [index, item] of arr.entries()) {
  console.log(index, item)
}

支持中断

使用 break 提前跳出循环(常用于遍历数组,查找目标元素)

js 复制代码
let arr = [1, 2, 3]

for (let item of arr) {
  console.log(item)
  if (item === 2) {
    break
  }
}
// 1 2

支持异步

js 复制代码
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 实现

js 复制代码
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 格式化

js 复制代码
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 过滤

js 复制代码
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 累计

如求和

js 复制代码
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 全部匹配

js 复制代码
let arr = [1, 2, 3]

// 是否每一个元素都小于 3
const result = arr.every((item) => item < 3)

console.log(result)
// false

some 部分匹配

js 复制代码
let arr = [1, 2, 3]

// 是否存在元素小于 3
const result = arr.some((item) => item < 3)

console.log(result)
// true
相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD3 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding3 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空3 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
小李飞飞砖4 小时前
React Native 组件间通信方式详解
javascript·react native·react.js