在 JavaScript 中，For-in 循环是一种常见的循环方式，它可以遍历对象的所有可枚举属性。这个特性在一些场景下非常有用，例如遍历对象的属性，但它也存在一些问题。在 ES2021 中，添加了一个新的语法来解决这个问题。
问题描述
在 JavaScript 中，For-in 循环的问题在于它可以遍历对象的原型链上的属性，这可能导致一些不必要的问题。
考虑以下例子：
-- -------------------- ---- ------- -- --------- ----- --- - - -- -- -- -- -- -- - --- -------- ------------------ - -- -- -- ------ ---- --- ----- --- ------ ---- -- ---- - --------------------- --------------- - -- -- -- -- - -- -- - -- -- -
在循环中，我们遍历了对象 obj 的所有属性，但是由于 Object.prototype 上也有一个属性 c，因此它也被遍历到了。
这个问题可能导致代码中出现奇怪的行为，而且用户很难察觉到这个问题。因此，我们需要一种更好的方式来遍历对象的属性。
ES2021 的解决方案
在 ES2021 中，我们可以使用 Object.keys() 方法获取对象的所有属性，然后使用 for..of 循环来遍历这些属性，这样就可以避开原型链上的属性。
考虑以下例子：
-- -------------------- ---- ------- ----- --- - - -- -- -- -- -- -- - --- -------- ------------------ - -- -- -- --- ----- ----- ----- - ----------------- -- -- ------ ------ --- ------ ---- -- ------ - --------------------- --------------- - -- -- -- -- - -- -- -
在这个例子中，我们使用 Object.keys() 获取 obj 的属性，然后使用 for..of 循环来遍历这些属性。由于 Object.prototype 上的属性没有被包括在 props 数组中，因此它也没有被遍历到。
总结
在 JavaScript 中，For-in 循环的问题在于它可以遍历对象的原型链上的属性。为了解决这个问题，可以使用 ES2021 中的 Object.keys() 方法获取对象的属性，然后使用 for..of 循环来遍历这些属性。
这种方式可以避免遍历原型链上的属性，从而避免了潜在的问题。而且，由于 Object.keys() 返回的是一个数组，因此我们也可以使用其他方式来遍历这些属性，例如数组的 forEach() 方法。
通过使用这种方式，我们可以写出更加健壮的代码，让代码更易于维护和调试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654f495a7d4982a6eb83e101