在 JavaScript 开发中，循环是处理数据的基本方法之一，而选择正确的循环类型可以让代码更简洁、高效。对于 for...in 和 for...of，它们在迭代对象或数组时有着不同的应用场景和效果。本文将深入剖析 for...in 和 for...of 的工作原理、适用场景及常见的误区，以便帮助开发者在实际开发中更好地选择适合的循环。
一、for...in 循环
1. for...in 的基本原理
for...in 主要用于遍历对象的可枚举属性，它会遍历对象自身的属性以及从原型链继承的属性。换句话说，for...in 针对的是属性名，而不是属性值。对于一个对象，for...in 循环会返回该对象所有的键，而不仅仅是它的值。
示例：
const obj = {a: 1, b: 2, c: 3};
for (let key in obj) {
console.log(key); // 输出: "a", "b", "c"
}
在此例中，for...in 输出的是对象的属性名。由于 for...in 会遍历所有可枚举属性，包括从原型继承的属性，因此在使用时需要注意。
2. for...in 的适用场景
for...in 更适合用于对象的遍历，尤其是在需要访问键值对的情况下。对于数组，虽然也可以使用 for...in，但它更适合对象而非数组。因为对于数组，它会返回数组的索引，而非元素的值。
示例：
const arr = [10, 20, 30];
for (let index in arr) {
console.log(index); // 输出: "0", "1", "2"
}
如上所示，for...in 返回了数组的索引，而非值。
二、for...of 循环
1. for...of 的基本原理
for...of 是 ES6 中引入的一种循环结构，它专门用于遍历可迭代对象。相比 for...in，for...of 的一个显著区别在于，它直接访问的是值而非键。可迭代对象包括数组、字符串、Map、Set 等。
示例：
const arr = [10, 20, 30];
for (let value of arr) {
console.log(value); // 输出: 10, 20, 30
}
在此例中，for...of 循环直接输出数组中的值，便于获取元素而不需要通过索引来访问。
2. for...of 的适用场景
for...of 适用于需要直接获取可迭代对象（如数组、字符串、Map 等）中的值的场景。对于对象，for...of 并不适用，因为对象并不天然是可迭代的。
如果需要在对象中同时获取键和值，Object.entries() 是一种常用的解决方案：
示例：
const obj = {a: 1, b: 2, c: 3};
for (let [key, value] of Object.entries(obj)) {
console.log(key, value); // 输出: a 1, b 2, c 3
}
三、两者的区别和常见误区
1. 针对属性和值的区别
for...in：迭代对象的属性名（键），适合对象属性的遍历。for...of：迭代可迭代对象的值，适合数组和其他可迭代结构的遍历。
2. 与原型链的关系
for...in 会遍历对象原型链上的可枚举属性，可能导致一些意料之外的结果；而 for...of 则只关注对象本身，不会访问继承属性。这也是为什么在数组遍历时，推荐使用 for...of 而非 for...in。
示例：
const arr = [10, 20, 30];
Array.prototype.extra = 100;
for (let key in arr) {
console.log(key); // 输出: "0", "1", "2", "extra"
}
for (let value of arr) {
console.log(value); // 输出: 10, 20, 30
}
在此例中，for...in 还会遍历原型链上的 extra 属性，而 for...of 则不会受到影响。
3. 使用场景总结
for...in：适用于对象的属性遍历，尤其是需要键名时。for...of：适用于可迭代对象（数组、字符串等）的值遍历。
四、性能差异
从性能角度来看，for...of 在遍历大量数据时，通常比 for...in 更高效，因为它不会遍历原型链上的属性。特别是在数组遍历中，由于 for...of 直接处理值，可以避免对索引进行额外操作，因此在效率上略胜一筹。
五、总结
在 JavaScript 中选择适合的循环类型，可以让代码更简洁、高效。for...in 和 for...of 各有适用场景，了解它们的工作机制和适用范围，有助于避免一些潜在的性能问题和逻辑错误。在日常开发中，我们可以记住以下要点：
- 对象属性的遍历优先使用
for...in。 - 可迭代对象的值遍历推荐使用
for...of。 - 对于需要获取对象键和值的场景，可以结合
Object.entries()与for...of使用。