分享 5 种在 JS 中访问对象属性的方法

1.点属性

点属性访问器是在 JavaScript 中访问对象属性的最常见和最直接的方式。它使用点 (.) 表示法来访问对象的特定属性。

const person = {
  name: 'John',
  age: 30,
};

console.log(person.name); // Output: John
console.log(person.age);  // Output: 30

在上面的示例中，我们有一个名为 person 的对象，其属性为 name 和 age。我们使用点属性访问器来访问这些属性的值。

当属性名称提前已知并且是有效标识符时，建议使用点属性访问器。它使用起来简单直观，使代码更具可读性。

2.方括号属性

方括号属性访问器是另一种在 JavaScript 中访问对象属性的方法。它使用方括号 ([]) 和属性名称的字符串表示来访问值。

const person = {
  name: 'John',
  age: 30,
};

console.log(person['name']); // Output: John
console.log(person['age']);  // Output: 30

在此示例中，我们使用方括号属性访问器来访问 person 对象的 name 和 age 属性。此方法的优点是它允许动态属性名称或不是有效标识符的属性名称。

const propertyName = 'age';
console.log(person[propertyName]); // Output: 30

在这里，我们使用一个变量 propertyName 来动态存储属性名称。这对于点属性访问器是不可能的。

3.对象解构

对象解构是 ECMAScript 2015 (ES6) 中引入的一项强大功能，它允许我们从对象中提取属性并将它们分配给变量。

const person = {
  name: 'John',
  age: 30,
};
const { name, age } = person;
console.log(name); // Output: John
console.log(age);  // Output: 30

在此示例中，我们解构 person 对象以提取 name 和 age 属性。然后为变量名称和年龄分配相应的值。

当我们想从一个对象中提取多个属性并将它们分配给各个变量时，对象解构特别有用。它提供了一种简洁易读的方式来访问对象属性。

我们还可以使用对象解构来使用别名将属性分配给具有不同名称的变量。

const { name: personName, age: personAge } = person;
console.log(personName); // Output: John
console.log(personAge);  // Output: 30

在此示例中，我们将 person 对象的 name 属性分配给变量 personName，将 age 属性分配给变量 personAge。这允许我们在访问对象属性时使用不同的变量名。

此外，对象解构可以通过使用计算属性名称来处理动态属性名称。

const propertyName = 'age';
const { [propertyName]: propertyValue } = person;
console.log(propertyValue); // Output: 30

在这里，我们在对象解构语法中使用方括号表示法来动态访问具有存储在 propertyName 变量中的名称的属性。

对象解构提供了一种灵活简洁的方式来访问和分配对象属性，使代码更具可读性和表现力。

4. Object.keys()

Object.keys() 方法返回给定对象自己的可枚举属性名称的数组。它允许我们通过获取属性名称数组然后遍历它们来访问对象属性。

const person = {
  name: 'John',
  age: 30,
};

const keys = Object.keys(person);
for (const key of keys) {
  console.log(key + ': ' + person[key]);
}

在此示例中，我们使用 Object.keys() 从 person 对象获取属性名称数组。然后，我们使用 for...of 循环遍历数组，并使用方括号属性访问器访问相应的属性值。

当我们需要对一个对象的每个属性进行操作，或者当我们想要获取一个属性名数组以进行进一步处理时，Object.keys() 方法很有用。

5. Object.entries()

Object.entries() 方法返回给定对象自身的可枚举属性 [key, value] 对的数组。它允许我们访问属性名称及其对应的值。

const person = {
  name: 'John',
  age: 30,
};

const entries = Object.entries(person);
for (const [key, value] of entries) {
  console.log(key + ': ' + value);
}

在此示例中，我们使用 Object.entries() 从 person 对象中获取 [key, value] 对数组。然后我们使用 for...of 循环遍历数组并访问每个属性的键和值。

Object.entries() 方法在我们需要对属性名称及其值执行操作时特别有用，例如基于特定条件的映射或过滤。

总结

在选择合适的方法时，请记住考虑属性名称的可预测性、动态属性名称、代码可读性和特定用例等因素。通过遵循最佳实践并适当地使用这些方法，你可以编写更清晰、更高效且更易于维护的 JavaScript 代码。

最后，感谢你的阅读。