在 JavaScript 中，循环是一项非常基础和常见的任务。为了处理集合中的每一个元素，我们需要使用循环。在 ES11 中，for-in 和 Object.keys() 循环是常见的两种循环方式。但是，这两种方式在实现上有明显的差异，本文将详细介绍它们之间的区别，并提供示例代码以帮助读者更好地理解。
for-in 循环
for-in 循环是 JavaScript 中最早的循环方式之一。它用于遍历对象的所有可枚举属性。它的语法如下所示：
--- --------- -- ------- - -- ---- -- -- -------- -
其中，variable 是用于存储对象属性名称的变量，object 是要遍历的对象。在循环体中，可以使用 variable 访问当前对象属性的值。例如：
----- --- - - ----- -------- ----- -------- ------ ---- -- --- ---- ---- -- ---- - ------------------------ - --------------- -
上面的代码将输出：
-------- - ----- -------- - ----- --------- - ----
尽管 for-in 循环使用方便，但它可能会遍历对象原型链上的属性，并且不保证属性的顺序。
Object.keys() 循环
Object.keys() 是一个返回对象中所有可枚举属性名称的数组的函数。它的语法如下：
----------------
其中，obj 是要遍历的对象。它返回一个包含对象所有可枚举属性名称的数组。
可以使用 forEach() 或 for...of 循环遍历 Object.keys() 返回的数组：
----- --- - - ----- -------- ----- -------- ------ ---- -- --------------------------------------- - ------------------------ - --------------- ---
或者，可以使用 for...of 循环结合 Object.keys() 来遍历对象：
----- --- - - ----- -------- ----- -------- ------ ---- -- --- ---- ---- -- ----------------- - ------------------------ - --------------- -
上面两个示例的输出都是：
-------- - ----- -------- - ----- --------- - ----
与 for-in 循环相比，使用 Object.keys() 遍历不会遍历对象原型链上的属性，并且返回的属性名称数组的顺序与对象属性的定义顺序相同。
两种循环的区别
for-in 循环和 Object.keys() 循环的主要区别在于：
- for-in 循环会遍历对象原型链上的所有属性，而 Object.keys() 只会返回对象本身的可枚举属性名称。
- for-in 循环的属性遍历顺序是不确定的，并且在 ECMAScript 2015 规范之前可能还会遍历不可枚举属性。Object.keys() 返回的属性名称数组的顺序与对象属性的定义顺序相同。
在大多数情况下，除非需要遍历对象原型链上的属性，否则应使用 Object.keys() 循环。
结论
本文介绍了 ES11 中 for-in 和 Object.keys() 循环之间的区别和差异。总体来说，Object.keys() 循环在大多数情况下更加适合使用。它可以避免遍历对象原型链上的属性，并且返回的属性名称数组的顺序与对象属性的定义顺序相同。避免使用 for-in 循环是 JavaScript 编程中的一个良好实践。
示例代码
-- -- ------ ------ ----- ---- - - ----- -------- ----- -------- ------ ---- -- --- ---- ---- -- ----- - ------------------------ - ---------------- - -- -- ------------- ------ ----- ---- - - ----- -------- ----- -------- ------ ---- -- ---------------------------------------- - ------------------------ - ---------------- --- -- -- ------------- - -------- ------ ----- ---- - - ----- -------- ----- -------- ------ ---- -- --- ---- ---- -- ------------------ - ------------------------ - ---------------- -
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67399d1e317fbffedf17ad39