1. 背景
ES6带来了很多方便的语法糖，其中对象字面量扩展和解构赋值是非常实用的两个特性。它们已经成为前端代码中的常见语法了。本文将介绍ES6中对象字面量扩展和解构赋值的进阶用法，包括：动态属性名、缩写属性名、扩展运算符、解构赋值默认值等。
2. 动态属性名
通常情况下，为一个对象设置属性名需要使用点符号或方括号。如果属性名是一个变量，就需要使用方括号的方式来设置属性名。ES6中，我们可以使用动态属性名的方式来设置属性名。
例如：
const dynamicPropName = 'name';
const obj = {
[dynamicPropName]: '张三',
age: 20,
};
console.log(obj); // {name: "张三", age: 20}在上述例子中，我们使用了变量 dynamicPropName 设置对象属性名，这个属性名分别是 name。
3. 缩写属性名
当我们定义一个对象的属性名和属性值都是同一个变量名时，可以使用缩写属性名的方式。缩写属性名可以简化代码，提高可读性。
例如：
const name = '小明';
const age = 25;
const obj = {
name,
age,
};
console.log(obj); // {name: "小明", age: 25}在上述例子中，我们使用了缩写属性名的方式，省去了重复的变量名。
4. 扩展运算符
扩展运算符可以在对象字面量中快速地复制一个原对象，然后进行一些修改。当然，也可以直接用扩展运算符来合并多个对象。
例如：
-- -------------------- ---- ------- ----- ---- - - ----- ----- ---- --- -- ----- ---- - - ------ ----- -- ----- ---- - - -------- -------- -- ------------------ -- ------ ----- ---- --- ------ -----
在上述例子中，我们使用扩展运算符复制了 obj1 和 obj2 两个对象的属性，并合并成一个新的对象 obj3。
5. 解构赋值
在ES6中，我们可以使用解构赋值的方式来快速地获取对象的属性值。除此之外，解构赋值也支持给变量设置默认值。
例如：
-- -------------------- ---- ------- ----- --- - - ----- ----- ---- --- -- ----- - ----- --- - - ---- ----------------- ----- -- -- -- ----- - --- - --- - - ---- ----------------- -- -
在上述例子中，我们使用解构赋值快速地获取了 obj 对象的两个属性 name 和 age 并打印。同时，我们还对 sex 设置了默认值，当 obj 对象中没有 sex 属性时，它的默认值就是男。
6. 结论
本文介绍了ES6中对象字面量扩展和解构赋值的进阶用法，包括：动态属性名、缩写属性名、扩展运算符、解构赋值默认值等。通过这些语法糖，我们可以使前端代码更加简洁、易读，提高开发效率。在项目中，我们可以多加使用这些特性，以达到优化代码的目的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670ce3855f551281025bf1bd