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