随着 JavaScript 的不断发展，ES7（ECMAScript 2016）也带来了很多新特性，其中的一项是对象属性的扩展语法。这一特性可以让开发者更轻松地定义对象的属性和方法，提高代码的可读性和可维护性。本文将介绍 ES7 对象属性的扩展语法，包括示例代码和使用案例。
对象属性的扩展语法
在 ES7 中，我们可以使用“对象属性的扩展”语法，使用更加方便。下面是一个简单的示例：
const name = 'Alice';
const age = 18;
const person = { name, age };
console.log(person);这段代码会输出：
{ name: 'Alice', age: 18 }在这个示例中，我们使用了对象属性的扩展语法来定义了一个名为 person 的对象，它有两个属性，分别是 name 和 age。可以看到，这个语法让代码更加简洁易读。
除了上面的这种简单的用法，对象属性的扩展语法还有很多其他的用途，下面我们将更深入地探讨它的用法和案例。
对象方法的扩展语法
在 ES7 中，我们也可以使用对象方法的扩展语法来定义对象里的方法。例如：
const obj = {
foo() {
console.log('foo');
},
bar() {
console.log('bar');
}
};
obj.foo();
obj.bar();这段代码会输出：
foo bar
上面的代码定义了一个 obj 对象，这个对象里面有两个方法 foo 和 bar。我们可以直接调用这些方法，得到对应的结果。
计算属性名
除了使用常量来定义属性名外，ES7 还支持使用表达式来定义属性名，这称为“计算属性名”。例如：
const obj = {
[1 + 2]: 'three'
};
console.log(obj[3]);这段代码会输出：
three
上面的代码定义了一个 obj 对象，这个对象里面只有一个属性，它的属性名是 1 + 2 的计算结果，即 3，对应的属性值是字符串 'three'。我们可以通过 obj[3] 来访问这个属性。
对象属性的默认值
在 ES7 中，我们可以为对象属性指定默认值。例如：
const obj = {
name: 'Alice',
age: 18,
gender: 'female',
show() {
console.log(`My name is ${this.name}, I am ${this.age} years old, and I am a ${this.gender}.`);
}
};
const { name = 'Bob', age = 20, gender = 'male' } = obj;
console.log(name, age, gender);这段代码会输出：
Alice 18 female
上面的代码定义了一个 obj 对象，这个对象里面有 name、age、gender 三个属性，以及一个 show 方法。然后我们通过解构赋值的方式，将这些属性的默认值设为 'Bob'、20 和 'male'，并打印出这些属性的值。
总结
本文介绍了 ES7 对象属性的扩展语法，它让开发者更方便地定义属性和方法、设定默认值、使用计算属性名等。这些语法可以提高代码的可读性和可维护性。希望读者可以通过本文的内容，更好地了解和应用 ES7 的新特性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a3a9d9add4f0e0ffbccc92