ES9 中的 for-in 循环、Object.keys() 和 Object.getOwnPropertyNames() 的对比-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要遍历对象中的属性，ES9 提供了三种方法来实现这个目的：for-in 循环、Object.keys() 和 Object.getOwnPropertyNames()。这三种方法都可以用于遍历对象的属性，但是它们有着不同的特点和适用场景。接下来，我们将分别介绍这三种方法的使用方法、优缺点和适用场景。

for-in 循环

for-in 循环是最常用的遍历对象属性的方法之一，它可以遍历对象的可枚举属性，包括自身属性和继承属性。下面是一个使用 for-in 循环遍历对象属性的示例代码：

// javascriptcn.com 代码示例
const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

输出结果为：

name: John
age: 30
gender: male

for-in 循环的优点是可以遍历对象的所有属性，包括继承属性。但是，它也有一些缺点。首先，它会遍历对象的原型链上的所有属性，这可能会导致一些意外的结果。其次，它只能遍历可枚举属性，不能遍历不可枚举属性。因此，如果你需要遍历一个对象的所有属性，包括不可枚举属性，你需要使用其他方法。

Object.keys()

Object.keys() 是一个静态方法，它返回一个由一个对象的可枚举属性组成的数组。下面是一个使用 Object.keys() 遍历对象属性的示例代码：

// javascriptcn.com 代码示例
const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

const keys = Object.keys(person);

for (let key of keys) {
  console.log(`${key}: ${person[key]}`);
}

输出结果与 for-in 循环相同：

name: John
age: 30
gender: male

Object.keys() 的优点是可以返回一个对象的所有可枚举属性，并且不会遍历对象的原型链上的属性。但是，它只能返回一个对象的可枚举属性，不能返回不可枚举属性和继承属性。因此，如果你需要遍历一个对象的所有属性，包括不可枚举属性和继承属性，你需要使用其他方法。

Object.getOwnPropertyNames()

Object.getOwnPropertyNames() 是一个静态方法，它返回一个由一个对象所有属性组成的数组，包括可枚举属性和不可枚举属性，但不包括继承属性。下面是一个使用 Object.getOwnPropertyNames() 遍历对象属性的示例代码：

// javascriptcn.com 代码示例
const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

const keys = Object.getOwnPropertyNames(person);

for (let key of keys) {
  console.log(`${key}: ${person[key]}`);
}

输出结果与 for-in 循环相同：

name: John
age: 30
gender: male

Object.getOwnPropertyNames() 的优点是可以返回一个对象的所有属性，包括可枚举属性和不可枚举属性，但不包括继承属性。但是，它只能返回一个对象的所有自身属性，不能返回继承属性。因此，如果你需要遍历一个对象的所有属性，包括自身属性和继承属性，你需要使用其他方法。

总结

三种方法都可以用于遍历对象的属性，但是它们有着不同的特点和适用场景。如果你只需要遍历一个对象的可枚举属性，你可以使用 for-in 循环或 Object.keys() 方法。如果你需要遍历一个对象的所有属性，包括不可枚举属性和继承属性，你可以使用 Object.getOwnPropertyNames() 方法。在使用这些方法时，你需要注意它们的优缺点和适用场景，选择合适的方法来实现你的需求。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656ae7d1d2f5e1655d363aa6