JavaScript 中的 `for...in` 和 `for.
在 JavaScript 的世界里，循环是我们日常编码中不可或缺的工具。而
for...in和for...of这两种循环结构，虽然名字相似，却有着截然不同的用途和行为。今天，我想聊聊它们之间的微妙差异，以及在实际开发中如何选择它们。
for...in：遍历对象的“钥匙”
for...in 是一个经典的循环结构，它的主要任务是遍历对象的可枚举属性。这里的“可枚举属性”不仅包括对象自身的属性，还包括从原型链继承的属性。它的返回值是对象的键名（key）。
举个例子：
const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
console.log(key); // 输出: a, b, c
}
在这个例子中，for...in 遍历了对象 obj 的所有键名。如果我们给对象的原型添加一个属性，for...in 也会将其遍历出来：
Object.prototype.customProp = 'I am from prototype';
for (let key in obj) {
console.log(key); // 输出: a, b, c, customProp
}
为了避免遍历到原型链上的属性，我们可以使用 hasOwnProperty 方法进行过滤：
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key); // 输出: a, b, c
}
}
for...in 的强大之处在于它的灵活性，但它并不适合遍历数组。因为数组的本质也是对象，for...in 会遍历数组的索引（包括非数字键），这可能会导致意外的结果。
for...of：遍历可迭代对象的“值”
与 for...in 不同，for...of 是 ES6 引入的新特性，专门用于遍历可迭代对象（如数组、字符串、Map、Set 等）。它的返回值是对象的值（value）。
举个例子：
const arr = [10, 20, 30];
for (let value of arr) {
console.log(value); // 输出: 10, 20, 30
}
for...of 的简洁性和直观性让它成为遍历数组的首选。它不会像 for...in 那样遍历非数字键或原型链上的属性，而是专注于可迭代对象的值。
需要注意的是，for...of 不能直接遍历普通对象（Object），因为普通对象默认不是可迭代的。如果我们想遍历对象的属性值，可以先将对象转换为可迭代的形式，比如使用 Object.values()：
const obj = { a: 1, b: 2, c: 3 };
for (let value of Object.values(obj)) {
console.log(value); // 输出: 1, 2, 3
}
for...in 和 for...of 的对比
为了更直观地理解两者的区别，我们来看一个综合示例：
const arr = [10, 20, 30];
arr.foo = 'bar'; // 给数组添加一个自定义属性
// for...in 遍历数组的索引（包括自定义属性）
for (let index in arr) {
console.log(index); // 输出: 0, 1, 2, foo
}
// for...of 遍历数组的值
for (let value of arr) {
console.log(value); // 输出: 10, 20, 30
}
在这个例子中，for...in 遍历了数组的索引和自定义属性 foo，而 for...of 只遍历了数组的值。这种差异清晰地展示了两种循环的适用场景。
如何选择？
在实际开发中，选择 for...in 还是 for...of 取决于你的需求：
- 如果你需要遍历对象的属性，尤其是键名，那么
for...in是更好的选择。 - 如果你需要遍历数组或其他可迭代对象的值，那么
for...of是更简洁、更安全的选择。
当然，JavaScript 还提供了其他循环方式，比如传统的 for 循环、forEach 方法等。每种方式都有其独特的优势和适用场景，灵活运用它们可以让我们的代码更加优雅和高效。
结语
for...in 和 for...of 是 JavaScript 中两种看似相似却截然不同的循环结构。它们的差异不仅体现在语法上，更体现在设计理念和适用场景上。理解它们的区别，能够帮助我们在实际开发中做出更明智的选择，写出更清晰、更健壮的代码。
正如编程中的许多细节一样，掌握这些微妙之处，往往能让我们的代码从“能用”升级到“优雅”。希望这篇随笔能为你带来一些启发，也欢迎你在评论区分享你的见解和经验。
