极简三分钟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

牢记

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

相关推荐
gihigo199817 分钟前
在CentOS上配置SVN至Web目录的自动同步
前端·svn·centos
珍宝商店21 分钟前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript
excel36 分钟前
楖览:Vue3 源码研究导读
前端
proud121238 分钟前
开源的 CSS 动画库
前端·css·开源
折翼的恶魔41 分钟前
HTML媒体标签
前端·html
excel1 小时前
前端项目中的测试分类与实践 —— 以 Vue 项目为例
前端
宋辰月1 小时前
echarts项目积累
前端·javascript·echarts
du青松1 小时前
onlyoffice 服务搭建及配置 - 前端 office 文件预览解决方案
前端
北海-cherish1 小时前
Wouter 和 React Router的区别
前端·react.js·前端框架
醉方休1 小时前
TensorFlow.js高级功能
javascript·人工智能·tensorflow