在 ECMAScript 2019 中，使用 for..in 和 Object.keys() 都可以用来遍历对象的属性。但是，它们之间有一些区别和适用场景。在本文中，我们将深入探讨 for..in 和 Object.keys() 的用法和区别，并提供实际的示例以方便理解。
for..in 的用法和特点
for..in 是一个用于迭代对象属性的语法结构。它的基本语法如下：
for (var prop in obj) {
// do something with obj[prop]
}其中，obj 是要遍历的对象，prop 则是 obj 的属性名。
for..in 的特点包括：
- 遍历对象可枚举的属性，包括自己和继承来的属性。
- 遍历的顺序并不是固定的，取决于 JavaScript 引擎的具体实现。
- 在遍历过程中，可以修改对象的属性。
Object.keys() 的用法和特点
Object.keys() 是 ECMAScript 5 中引入的一个方法，用于获取对象本身的可枚举属性的属性名，它的基本语法如下：
var keys = Object.keys(obj);
其中，obj 是要获取属性名的对象，keys 则是属性名的数组。
Object.keys() 的特点包括：
- 获取对象自身的可枚举属性的属性名，不包括继承来的属性。
- 获取的属性名的顺序与
for..in语句中的顺序相同。 - 不会修改对象本身的属性。
for..in 和 Object.keys() 的比较
根据上面的介绍，我们可以得出 for..in 和 Object.keys() 的一些比较，如下表所示。
for..in |
Object.keys() |
|
|---|---|---|
| 遍历对象属性 | 包括继承来的属性 | 不包括继承来的属性 |
| 遍历顺序 | 不固定 | 与 for..in 相同 |
| 修改属性 | 可以修改对象本身的属性 | 不会修改对象本身的属性 |
示例代码
下面是一些示例代码，演示了 for..in 和 Object.keys() 之间的区别。
示例 1
-- -------------------- ---- ------- --- --- - - -- -- -- - -- --------------- - -- --- ---- ---- -- ---- - ------------------ - -- -- ----- --- ---- - ----------------- ------------------ -- -- ---
在这个例子中，我们添加了一个 c 属性到 obj 的原型上。当使用 for..in 语句遍历 obj 时，它会包括 c 属性；而使用 Object.keys() 方法获取属性名时，它不包括 c 属性。
示例 2
-- -------------------- ---- -------
--- --- - -
-- --
-- -
--
--- ---- ---- -- ---- -
-- ----- --- ---- -
------ ----------
-
-
-----------------
-- -- - -- - -
--- ---- - -----------------
------------------
-- -- - --- -在这个例子中，我们使用 for..in 语句遍历 obj 并删除了 a 属性。由于 for..in 语句可以修改对象的属性，所以 obj 对象变为 { b: 2 }。而使用 Object.keys() 方法则不会修改对象的属性，所以属性名数组中仍保留了 b 属性。
结论
在 ECMAScript 2019 中，for..in 语句和 Object.keys() 方法都可以用于遍历对象属性，但是它们之间有些许的区别和适用场景。如果要遍历对象的所有属性，包括继承来的属性，或者需要修改对象的属性时，可以使用 for..in 语句。如果只需要遍历对象本身的属性，并且不需要修改对象的属性时，则应该使用 Object.keys() 方法。最终，请根据实际需求来选择使用哪种方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fa7d7e44713626014ccdc0