ES7 中的增强对象字面量语法

ES7（ECMAScript 7）中新增了一些增强对象字面量语法，这些语法可以让我们更加方便地创建和操作对象。本文将详细介绍 ES7 中的增强对象字面量语法，包括对象解构赋值、属性简写、方法简写、计算属性名和展开运算符。

对象解构赋值

对象解构赋值可以将一个对象的属性赋值给一个变量，语法如下：

let person = { name: 'Tom', age: 18 };
let { name, age } = person;
console.log(name); // 'Tom'
console.log(age); // 18

上面的代码中，我们使用了对象解构赋值将 person 对象中的 name 和 age 属性分别赋值给了 name 和 age 变量。对象解构赋值可以让我们不用一个个访问对象的属性，直接将其赋值给变量，更加方便。

属性简写

在 ES7 中，如果一个对象的属性名和属性值的变量名相同，我们可以使用属性简写的方式书写对象字面量。属性简写语法如下：

let name = 'Tom';
let age = 18;
let person = { name, age };
console.log(person); // { name: 'Tom', age: 18 }

上面的代码中，我们使用了属性简写语法来创建一个 person 对象，将 name 和 age 变量作为其属性名和属性值，更加简便。

方法简写

在 ES7 中，如果一个对象的方法名和方法定义的变量名相同，则可以使用方法简写的方式来书写对象字面量。方法简写语法如下：

let person = {
  name: 'Tom',
  sayName() {
    console.log(this.name);
  }
};
person.sayName(); // 'Tom'

上面的代码中，我们使用了方法简写的方式来定义了一个 person 对象的 sayName() 方法。方法简写可以让我们更加简便地定义对象的方法。

计算属性名

在 ES7 中，我们可以使用计算属性名语法来动态定义对象的属性名。计算属性名语法如下：

let name = 'Tom';
let person = {
  [name]: 18
};
console.log(person); // { Tom: 18 }

上面的代码中，我们使用计算属性名语法来动态定义了 person 对象的属性名。计算属性名语法可以让我们更加灵活地定义对象的属性名。

展开运算符

在 ES7 中，我们可以使用展开运算符来将一个对象或数组展开成一系列值。展开运算符语法如下：

let person1 = { name: 'Tom', age: 18 };
let person2 = { ...person1, gender: 'male' };
console.log(person2); // { name: 'Tom', age: 18, gender: 'male' }

上面的代码中，我们使用展开运算符将 person1 对象展开，然后用其属性值创建了一个新的 person2 对象。展开运算符可以让我们更加方便地将一个对象或数组展开成一系列值，更加灵活。

总结

以上就是 ES7 中的增强对象字面量语法的详细介绍，包括对象解构赋值、属性简写、方法简写、计算属性名和展开运算符。这些语法可以让我们更加方便地创建和操作对象，提高代码效率。学习这些语法很容易，只需要多加练习就可以熟练掌握它们的使用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649a2bb948841e98947075ef