极简三分钟ES6 - 数组遍历

基础循环遍历

for 循环

最原始的方式:通过索引逐项访问数组

js 复制代码
const fruits = ["🍎", "🍌", "🍊"];
for (let i = 0; i < fruits.length;  i++) {
  console.log(fruits[i]);  // 依次输出苹果、香蕉、橘子 
}

其特点

  • 可随时用 break 中断循环
  • 可通过 continue 跳过当前项

功能型遍历(返回新数组)

1、map():映射新数组

作用:对每个元素加工后生成新数组(原数组不变)

js 复制代码
const nums = [1, 2, 3];
const doubled = nums.map(n  => n * 2); // [2, 4, 6]

场景:数据转换(如价格翻倍)

2、filter():过滤子集

作用:筛选符合条件的元素

js 复制代码
const scores = [80, 45, 90, 60];
const passed = scores.filter(s  => s >= 60); // [80, 90, 60]

场景:搜索符合条件的项(如及格成绩)

条件判断型遍历

1、some():是否存在满足条件的项

作用 :只要有一项满足即返回 true

js 复制代码
const hasBanana = fruits.some(fruit  => fruit === "🍌"); // true

2、every():是否所有项都满足条件

作用 :全部满足才返回 true

js 复制代码
const allPassed = [80, 75, 90].every(s => s > 60); // true

两者区别

  • some:像"或"运算(一人达标就通过)
  • every:像"与"运算(全员达标才通过)

搜索定位型遍历

1、find():找首个符合条件的元素

作用 :返回元素值(找不到时返回 undefined

js 复制代码
const users = [
  {id: 1, name: "小明"},
  {id: 2, name: "小红"}
];
const user = users.find(u  => u.id  === 2); // {id:2, name:"小红"}

2、findIndex():找首个符合条件的索引

作用 :返回位置(找不到时返回 -1

js 复制代码
const index = users.findIndex(u => u.name === "小红"); // 1

场景:精确查找数据位置

聚合计算遍历(reduce()

作用:将数组压缩为单个值(如求和、拼接)

js 复制代码
const sum = [1, 2, 3].reduce((total, num) => total + num, 0); // 6

场景:数据汇总(如购物车总价)

ES6简洁遍历语法

1、for...of 循环

直接获取元素值 (比传统 for 更简洁)

js 复制代码
for (const fruit of fruits) {
  console.log(fruit);  // , ,  
}

优势:无需操作索引,避免越界错误

2、forEach():替代 for 循环

作用:遍历执行操作(无返回值)

js 复制代码
fruits.forEach(fruit => console.log(fruit));

注意 :无法用 break 中断循环

特殊遍历方法

keys() / values() / entries()

获取索引或键值对(常用于 Map 结构)

js 复制代码
for (const index of fruits.keys())  {
  console.log(index);  // 0, 1, 2
}

场景:需要同时操作索引和值的场景

遍历方法对比总结

方法 返回值 是否修改原数组 典型场景
map() 新数组 数据批量转换
filter() 过滤后数组 条件筛选
some() 布尔值 检查是否存在符合项
reduce() 聚合结果 累加/拼接/统计
find() 首个匹配元素 精确查找对象
forEach() 遍历执行操作(无中断)
for...of - 简洁遍历元素

如何选择

  • 新数组map(加工)、filter(过滤)
  • 检查条件some(任一)、every(全部)
  • 找单个元素find(取值)、findIndex(找位置)
  • 汇总计算reduce
  • 遍历不返回forEachfor...of

牢记

选择大于努力,方法虽多,各有其用

相关推荐
艾小码2 小时前
彻底搞懂 Vue 生命周期:从 created 到 unmounted 的完整指南
前端·javascript·vue.js
GHOME2 小时前
复习-网络协议
前端·网络协议·面试
秦清2 小时前
组态可视化软件【导入属性】
前端·javascript·后端
小桥风满袖2 小时前
极简三分钟ES6 - 函数的参数
前端·javascript
艾小码2 小时前
只会npm install?这5个隐藏技巧让你效率翻倍!
前端·npm·node.js
hwjfqr3 小时前
VSCode终端中文乱码问题解决
前端·后端
3 小时前
前端页面空白监控:从检测到溯源的全链路实战方案
前端
妮妮喔妮3 小时前
如何把HTML转化成桌面Electron
前端·javascript·electron
日月晨曦3 小时前
React 在线 playground 实现指南:让代码在浏览器里「原地爆炸」的黑科技
前端·react.js