在 ES11 中，JavaScript 引入了一些新特性，其中一项是有关 for...in 循环的改进。for...in 循环用于遍历对象的属性，但过去使用它可能会导致一些意外情况。在这篇文章中，我们将深入讨论 ES11 中的 for...in 循环，探讨其正确使用的方法，同时提供示例代码和指导意义。
为什么要注意 for...in 循环？
在现代前端开发中，对象已经成为了我们必不可少的一部分。我们创建、操作和传递对象实例时，总是需要考虑如何高效地遍历它们的属性。在过去，我们通常使用 for...in 循环来遍历对象属性。例如：
-- -------------------- ---- ------- ----- --- - - -- -- -- ------ -- ---- -- --- ---- ---- -- ---- - ----------------- ----------- -
这段代码简单清晰，输出结果为：
a 1 b 'two' c true
这看起来没有什么问题，但如果我们修改了 JavaScript 的内置方法呢？
Object.prototype.getA = function() { return this.a; };
for (let prop in obj) {
console.log(prop, obj[prop]);
}我们可以看到 getA 方法被遍历打印出来了：
a 1
b 'two'
c true
getA function() { return this.a; }问题在于 for...in 循环会遍历整个原型链上的所有可枚举属性，即使这些属性是我们自己写的原型方法。虽然修改 JavaScript 内置方法是一件非常规范的事情，但是并不保证其他第三方库没有修改内置方法。
为了解决这个问题，现在仍然有一些开发者会在循环中使用 hasOwnProperty 进行过滤：
for (let prop in obj) {
if (obj.hasOwnProperty(prop)) {
console.log(prop, obj[prop]);
}
}虽然这样确实可以过滤掉原型链中的方法，但是总结起来，我们可以得到两个结论：
- for...in 循环并不总是可靠的，因为它可能导致意想不到的结果，尤其是如果有其他库或代码在你不知道的地方修改了原型方法。
- 过滤器代码增加了循环的复杂性和不必要的代码。
在 ES11 中，for...in 循环有了一些改进，旨在扫除由于未正确使用 for...in 循环导致的这些问题。
新的 for...in 循环
在 ES11 中，我们有了一个新的遍历对象属性的语法：for...in 循环。
for (const prop of Object.keys(obj)) {
console.log(prop, obj[prop]);
}这里，我们使用了新的 Object.keys 方法，它将所有的属性名返回为一个数组，我们可以使用数组的 forEach 方法遍历它。它与 for...in 循环之间的主要区别在于只返回自身属性而不包括原型链中的属性。
可以看到新的 for...in 循环解决了两个问题：它只遍历自身属性与值，而忽略原型链方法和其他信息，并且代码更加简洁和易于理解。在大多数情况下，使用 Object.keys 代替 for...in 循环更加可靠和方便。
但是，当你确实需要遍历原型属性时，你可以使用 for...in 循环的改进版本。在 ES11 中，我们有一个新的选项，即：for...in 循环通过使用 Object.getPrototypeOf 方法，可以可靠地遍历对象及其原型链上的所有属性，而不仅仅是对象本身。例如：
const obj = {a:1};
const protoObj = {b:2};
Object.setPrototypeOf(obj, protoObj);
for (const prop in obj) {
console.log(prop, obj[prop]);
}这将输出：
a 1 b 2
这与过去的 for...in 循环不同，可以更好地控制循环的行为，从而更好地了解对象及其属性。
改进 for...in 循环的指导意义
在大多数情况下，我们应该使用下面这个语法：
for (const prop of Object.keys(obj)) {
console.log(prop, obj[prop]);
}它是最可靠和清晰的遍历对象属性的方法。在 forEach 项中，我们使用 prop 来访问对象的属性值。在任何时候，当我们需要遍历一个对象及其原型链时，我们可以使用改进后的 for...in 循环：
for (const prop in obj) {
console.log(prop, obj[prop]);
}这是一种比 hasOwnProperty 过滤器更简单且易于理解的方法。其次，避免对 JavaScript 的内置方法进行非标准修改是最佳实践之一。如果您需要使用自定义方法，请使用自定义方法名称。
最后，我们来看一下在 JavaScript 中正确使用for...in 循环的实际使用示例。在下面的代码中，玩家防御等级取决于武器和护甲的属性值：
-- -------------------- ---- -------
----- ------- - -
------ - ------- - --
---- - ------- - -
--
----- ----- - -
-------- - -------- - --
------ - -------- - -
--
----- ------ - -
-------- --------
------ -----
--
--- ------------ - --
--- ------ ---- -- ------- -
--- ------ ---- -- ------------- -
------------ -- -------------------------- -- --
-
-
---------------- ------ ----- ------- ----- - - - --------------这里，我们正确遍历了 player、weapons、armor 对象及其包含的属性，totalDefense 等于所有防御力值的总和。
结论
在这篇文章中，我们学习了如何正确使用 ES11 中的 for...in 循环。我们强调了旧版 for...in 循环的不足之处，并介绍了使用 Object.keys 和 for...in（包括原型链方法）来遍历对象属性和值的增强版，同时为你呈现了一个实际的示例，以便更好地了解如何使用这些工具正确地遍历 JavaScript 对象。掌握 for...in 的正确使用方法将使我们的代码更加清晰、简洁、易于维护，并确保代码在未来的版本中能够稳定运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e02b8af6b2d6eab3b40942