for-in和for-of

for-in

用途：

• 用于遍历对象的 可枚举属性（包括原型链上的属性）。
• 适合遍历对象的键（key）。

特点：

• 遍历的是对象的 键（key），而不是值（value）。
• 遍历顺序不固定，取决于 JavaScript 引擎的实现。
• 会遍历对象自身的属性以及继承的属性（除非使用 hasOwnProperty 过滤）。

语法：

for (let key in object) {
  // 操作 key
}

示例：

const person = {
  name: "Alice",
  age: 25,
};

for (let key in person) {
  console.log(key); // 输出 "name", "age"
  console.log(person[key]); // 输出 "Alice", 25
}

注意事项：

• 如果对象是数组，for-in 会遍历数组的索引（包括非数字键）。
• 使用 hasOwnProperty 过滤继承的属性：

for (let key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key); // 只输出对象自身的属性
  }
}

for-of

用途：

• 用于遍历 可迭代对象（如数组、字符串、Map、Set 等）的 值（value）。
• 适合遍历数组、字符串等可迭代对象。

特点：

• 遍历的是对象的 值（value），而不是键（key）。
• 只能遍历可迭代对象（实现了 [Symbol.iterator] 方法的对象）。
• 不会遍历对象的属性或原型链。 语法：

for (let value of iterable) {
  // 操作 value
}

示例：

const numbers = [1, 2, 3];

for (let num of numbers) {
  console.log(num); // 输出 1, 2, 3
}

const str = "hello";

for (let char of str) {
  console.log(char); // 输出 "h", "e", "l", "l", "o"
}

注意事项：

• 不能直接遍历普通对象（因为普通对象不是可迭代对象）。
• 如果需要遍历对象的键值对，可以结合 Object.entries 使用：

const person = {
  name: "Alice",
  age: 25,
};

for (let [key, value] of Object.entries(person)) {
  console.log(key, value); // 输出 "name Alice", "age 25"
}

for-in和for-of的区别

特性	for-in	for-of
遍历对象	对象的可枚举属性（包括原型链）	可迭代对象的值（如数组、字符串）
遍历内容	键（key）	值（value）
适用对象	普通对象	可迭代对象（数组、字符串、Map 等）
遍历顺序	不固定	固定（按迭代器顺序）
原型链属性	会遍历	不会遍历
数组遍历	遍历索引（包括非数字键）	遍历值

总结

• for-in：用于遍历对象的键，适合操作普通对象。
• for-of：用于遍历可迭代对象的值，适合操作数组、字符串、Map、Set 等。

根据具体需求选择合适的循环语句：

• 如果需要遍历对象的属性，使用 for-in。
• 如果需要遍历数组或可迭代对象的值，使用 for-of。