与众不同：for..of与for..in中的关键差异

2023-12-07 16:39:47

引子

在浩瀚的编程语言海洋中，JavaScript凭借其灵活性与多功能性脱颖而出。谈到JavaScript中的循环语句，我们不得不提及两个功不可没的成员：for..of和for..in。这两个循环语句可谓是JS编程的得力助手，它们各有千秋，用途广泛。今天，我们就将从独到的视角，为你揭示for..of与for..in之间的关键差异，让你对这两个循环语句有更深入的了解。

一、剖析循环：for..of与for..in的本质区别

作用对象：

for..of：遍历的对象通常是数组或具有类似数组特性的对象，如字符串、Set和Map。它的本质是遍历集合中的元素。
for..in：遍历的对象可以是数组，也可以是对象。它的本质是遍历对象的属性。

循环变量：

for..of：循环变量通常是一个新声明的变量，用于存储集合中的元素。
for..in：循环变量通常是一个已有的变量，用于存储对象的属性名。

二、示例展示：for..of与for..in的实际运用

1. 数组遍历

const fruits = ["apple", "orange", "banana"];

// 使用 for..of 遍历数组中的元素
for (const fruit of fruits) {
  console.log(fruit); // 输出: apple, orange, banana
}

// 使用 for..in 遍历数组的索引
for (const index in fruits) {
  console.log(fruits[index]); // 输出: apple, orange, banana
}

在数组遍历中，for..of可以直接输出数组中的元素，而for..in则输出的是数组的索引，需要使用fruits[index]才能访问元素本身。

2. 对象遍历

const person = { name: "John", age: 30, city: "New York" };

// 使用 for..in 遍历对象中的属性名
for (const property in person) {
  console.log(property); // 输出: name, age, city
}