JavaScript 数组与对象遍历方法详解：forEach、map、for...in 与 for...of

作者：木棉时间：2026-10-24 01:37:57浏览：638

本文详细解析JavaScript中四种常见遍历方法：forEach、map、for...in及for...of。重点对比它们在React开发中的应用场景，说明forEach无法跳出循环的限制，map返回新数组的特性，以及for...of对字符串、Map、Set和Generator对象的遍历能力，帮助开发者根据需求选择合适方案。

forEach方法及其局限性

forEach

该方法在ES5版本中引入，是我在React开发中最常用的遍历方式之一，具体用法如下所示：


models.forEach(model => app.model(model));

在dva框架中，通常会采用这种写法。

这种写法简洁明了，常用于根据数组数据构建新的数据结构。然而，forEach的主要局限在于它不支持中途跳出循环。

map方法的应用场景

map

这也是使用频率极高的方法，具体用法如下：


{data.map(d => (
     <div className="balance-row">
      <div className="balance-col currency">{d.currency.toUpperCase()}</div>
      <div className="balance-col balance">
       <div>
        <FormattedNumber value={d.balance} />
       </div>
       <div className="light-text lock">
        <i className="icon anticon icon-lock" /><FormattedNumber value={d.locked} />
       </div>
      </div>
     </div>
    ))}

在React组件中经常这样使用。


const value = [1, 22, 4, 5].map(d => d + 1);
value; // [2, 23, 5, 6]

该方法用于修改数组内容，其效果相当于生成了一个新数组（注：map本身不改变原数组，而是返回新数组，原文表述“改变了原数组”可能存在歧义，此处保留原意但稍作润色以符合技术事实，或严格遵循原文“相当于改变了原数组”的表述，鉴于指令要求不编造事实，保留原文对效果的描述，但需指出其返回新值的特性）。

for ... in遍历的注意事项

for ... in


for (let prop in obj) {
 if (obj.hasOwnProperty(prop)) {
  // 继续操作prop和obj
 }
}

for ... in同样可用于遍历数组，但并不推荐这样做。

for ... of与可迭代对象

for ... of

ES6新增了一种遍历方式，主要用来弥补forEach和for...in的不足。它还可以遍历字符串、Map对象、Set对象以及Generator对象。

注意：它只能遍历具有iterable（可迭代）属性的对象，因此不能直接遍历普通对象，除非刻意给object加上一个iterable属性。这个功能非常强大！

Map


let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
 
for (let [key, value] of iterable) {
 console.log(value);
}
// 1
// 2
// 3
 
for (let key of iterable) {
 console.log(key);
}
// [a, 1]
// [b, 2]
// [c, 3]

Set


let iterable = new Set([1, 1, 2, 2, 3, 3]);
 
for (let value of iterable) {
 console.log(value);
}
// 1
// 2
// 3

Generator


function * fibonacci() { // a generator function
 let [prev, curr] = [0, 1];
 while (true) {
  [prev, curr] = [curr, prev + curr];
  yield curr;
 }
}
 
for (let n of fibonacci()) {
 console.log(n);
 // truncate the sequence at 1000
 if (n >= 1000) {
  break;
 }
}

以上就是本次介绍的全部知识点内容，感谢大家对本站的支持。

作者最新文章

JS中将数组和对象混合组装为JSON字符串

2026-11-05 16:41:42

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

2026-11-05 09:45:01

为什么JS中typeof []返回object：数组类型检测误区解析

2026-11-04 19:50:47