JavaScript ES6获取对象属性的几种方式

1. JavaScript ES6获取对象的属性

在 ES6（ECMAScript 2015）中，获取对象的属性有几种方式。

下面是其中的一些方法：

1. 点符号（.） - 这是最常用的访问对象属性的方式。
2. 方括号（[]） - 当你需要动态地获取属性名或者属性名包含特殊字符（如空格、破折号等），不能用点符号时，可以使用方括号。
3. 计算属性名 - 当你需要通过变量来决定属性名时，可以结合使用变量和方括号。

1.1. 示例代码

let user = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    'full-name': 'John Doe' // 注意这里包含破折号
};

// 使用点符号
console.log(user.firstName); // 输出 John

// 使用方括号
console.log(user['lastName']); // 输出 Doe

// 访问包含特殊字符的属性名
console.log(user['full-name']); // 输出 John Doe

// 动态属性名
let key = 'age';
console.log(user[key]); // 输出 30

// 计算属性名
let property = 'first' + 'Name';
console.log(user[property]); // 输出 John

1.2. 解构赋值

ES6 引入了解构赋值（destructuring assignment），这是一种从数组或对象中提取数据的有效方式。

对于对象，你可以直接提取出你关心的属性：

let { firstName, age } = user;

console.log(firstName); // 输出 John
console.log(age);       // 输出 30

你还可以提供默认值，以防对象中没有这些属性：

let { email = 'no-email@example.com', phone = 'no-phone' } = user;

console.log(email); // 如果 user 对象中没有 email 属性，则输出 no-email@example.com
console.log(phone); // 如果 user 对象中没有 phone 属性，则输出 no-phone

这些就是 ES6 中获取和处理对象属性的基本方法。

更多详细内容，请微信搜索“前端爱好者“， ⇲ 戳我 查看 。

1.1. object.getKeys

在 JavaScript 中，如果你想获取一个对象的所有键（即属性名），可以使用 Object.keys() 方法。

这个方法返回一个由对象自身的可枚举属性名组成的数组。

这里有一个简单的例子来说明如何使用它：

let user = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    'full-name': 'John Doe'
};

let keys = Object.keys(user);
console.log(keys); // 输出 ['firstName', 'lastName', 'age', 'full-name']

Object.keys() 只会返回对象自身的可枚举属性，不会包括原型链上的属性，也不会包括不可枚举的属性。

如果你需要检查一个对象的所有属性，包括继承自原型链上的属性，可以使用 for...in 循环：

let allKeys = [];
for (let key in user) {
    if (user.hasOwnProperty(key)) {
        allKeys.push(key);
    }
}
console.log(allKeys); // 也会输出 ['firstName', 'lastName', 'age', 'full-name']

在这个例子中，hasOwnProperty 方法用来确保只添加对象自身的属性，而不是继承来的属性。

如果你只是想获取对象自身的所有键，并且这些键都是可枚举的，那么 Object.keys() 是最简单和直接的方式。

来源：前端老兵 前端爱好者