for...in 和 for...of 的区别

JavaScript 是一门强大而灵活的编程语言,提供了多种迭代对象的方式。两个常见的迭代方式是 for...infor...of 循环。这两种循环用于遍历对象和数组中的元素,但它们有许多重要的区别和适用场景。在本文中,我们将深入探讨 for...infor...of 循环的区别,以及何时使用它们。

1. for...in 循环

for...in 循环是一种用于遍历对象的属性的迭代方式。它的语法结构如下:

javascript 复制代码
for (const key in object) {
  // 执行代码
}

1.1 遍历对象属性

for...in 循环主要用于遍历对象的属性,它会将对象的每个可枚举属性作为迭代变量 key 的值。

javascript 复制代码
const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (const key in person) {
  console.log(key, person[key]);
}

在上面的示例中,for...in 循环遍历了 person 对象的属性,并打印了每个属性的名称和值。

1.2 遍历原型链属性

for...in 循环不仅会遍历对象自身的属性,还会遍历其原型链上的属性。这可能会导致意外的结果,因为你可能会获取到不是你期望的属性。

javascript 复制代码
function Person(name) {
  this.name = name;
}

Person.prototype.age = 30;

const john = new Person('John');

for (const key in john) {
  console.log(key, john[key]);
}

在上面的示例中,for...in 循环不仅遍历了 john 对象自身的属性(name),还遍历了其原型链上的属性(age)。

1.3 按照随机顺序

for...in 循环不保证按照属性的顺序进行迭代。属性的顺序可能是随机的,这取决于 JavaScript 引擎的实现。

javascript 复制代码
const colors = {
  a: 'red',
  b: 'green',
  c: 'blue'
};

for (const key in colors) {
  console.log(key, colors[key]);
}

在上面的示例中,属性的遍历顺序可能是 bac 或其他随机顺序。

1.4 不能直接访问属性值

for...in 循环中,你需要通过属性的名称来访问属性的值,这可能会使代码看起来更加冗长。

javascript 复制代码
const person = {
  name: 'John',
  age: 30,
};

for (const key in person) {
  const value = person[key];
  console.log(key, value);
}

在上面的示例中,我们需要使用 person[key] 来访问属性值,而不能直接访问。

2. for...of 循环

for...of 循环是一种用于遍历可迭代对象(如数组、字符串、Map、Set 等)的迭代方式。它的语法结构如下:

javascript 复制代码
for (const element of iterable) {
  // 执行代码
}

2.1 遍历数组元素

for...of 循环非常适合遍历数组中的元素,它会将数组的每个元素作为迭代变量 element 的值。

javascript 复制代码
const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  console.log(num);
}

在上面的示例中,for...of 循环遍历了 numbers 数组的元素,并打印了每个元素的值。

2.2 不遍历对象属性

for...in 循环不同,for...of 循环不会遍历对象的属性,它专门用于遍历可迭代对象。如果你尝试将对象用于 for...of 循环,将会得到错误。

javascript 复制代码
const person = {
  name: 'John',
  age: 30,
};

for (const value of person) {
  console.log(value);
}
// TypeError: person is not iterable

在上面的示例中,尝试遍历 person 对象会导致类型错误,因为对象不是可迭代的。

2.3 按照顺序迭代

for...of 循环保证按照对象中元素的顺序进行迭代。这意味着遍历数组时会按照数组的顺序进行,不会出现随机顺序的情况。

javascript 复制代码
const colors = ['red', 'green', 'blue'];

for (const color of colors) {
  console.log(color);
}

在上面的示例中,属性的遍历顺序是 redgreenblue

2.4 直接访问元素值

for...of 循环中,你可以直接访问可迭代对象的元素值,而不需要使用索引或属性名称。

javascript 复制代码
const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  console.log(num);
}

在上面的示例中,我们可以直接访问 num 变量来获取数组元素的值,而不需要使用 numbers[num]

4. 总结

for...infor...of 循环都是 JavaScript 中用于迭代的有用工具,但它们有不同的用途和适用场景。了解它们的区别可以帮助你更好地选择合适的迭代方式。

  • 使用 for...in 循环遍历对象的属性,但要注意遍历原型链上的属性。
  • 使用 for...of 循环遍历可迭代对象的元素,例如数组、字符串、Map、Set 等,它更直观且不会遍历原型链属性。
相关推荐
聚客AI21 小时前
🌸万字解析:大规模语言模型(LLM)推理中的Prefill与Decode分离方案
人工智能·llm·掘金·日新计划
聚客AI10 天前
🤯RAG系统升级:微调嵌入模型提升上下文检索质量
人工智能·llm·掘金·日新计划
聚客AI15 天前
💬深入解析:向量数据库如何为LLMs添加长期记忆
人工智能·llm·掘金·日新计划
聚客AI22 天前
📝工程级开源:PyTorch手搓LLaMA4-MoE全栈指南
人工智能·llm·掘金·日新计划
聚客AI24 天前
🔷告别天价算力!2025性价比最高的LLM私有化训练路径
人工智能·llm·掘金·日新计划
聚客AI1 个月前
🚀碾压传统方案!vLLM与TGI/TensorRT-LLM性能实测对比
人工智能·llm·掘金·日新计划
聚客AI1 个月前
🔥MoE技术大揭秘:混合专家模型如何重塑AI大模型?
人工智能·llm·掘金·日新计划
聚客AI1 个月前
💡小白都能看懂的RAG分块实战:从递归分割到LLM智能拆解的全解析
人工智能·llm·掘金·日新计划
聚客AI1 个月前
✅掌握ReAct=掌控AI代理灵魂:从工具调用、循环架构到生产级优化
人工智能·llm·掘金·日新计划
聚客AI1 个月前
✨17种RAG实现方法:全面提升生成质量
人工智能·llm·掘金·日新计划