在 JavaScript 中，对象解构赋值是一种常见的操作方式，它可以让开发者更加方便地从对象中提取数据并赋值给变量。在 ES7 中，对象解构赋值得到了进一步的加强，本文将介绍 ES7 中对象解构赋值的使用技巧。
基本语法
在 ES7 中，对象解构赋值的基本语法如下：
--- - ------ ----- - - ----
其中，obj 是一个对象，prop1 和 prop2 是对象的属性。这行代码的作用是将 obj.prop1 的值赋给变量 prop1，将 obj.prop2 的值赋给变量 prop2。
默认值
在 ES6 中，对象解构赋值支持默认值语法，ES7 中也是如此。在对象解构赋值中，当对象中的属性不存在时，可以给变量设置默认值。例如：
--- - ----- - ----------- ----- - ---------- - - ----
如果 obj.prop1 不存在，那么变量 prop1 的值就会被设置为 'default1'。如果 obj.prop2 不存在，那么变量 prop2 的值就会被设置为 'default2'。
嵌套对象
在 ES7 中，对象解构赋值也支持嵌套对象。例如：
--- - ------ - --------- -------- - - - ----
这行代码的作用是将 obj.prop1.subProp1 的值赋给变量 subProp1，将 obj.prop1.subProp2 的值赋给变量 subProp2。
别名
在 ES7 中，对象解构赋值也支持给变量设置别名。例如：
--- - ------ ------- ------ ------ - - ----
这行代码的作用是将 obj.prop1 的值赋给变量 alias1，将 obj.prop2 的值赋给变量 alias2。
扩展运算符
在 ES7 中，对象解构赋值也支持扩展运算符，它可以将对象中的剩余属性赋值给一个变量。例如：
--- - ------ ------- - - ----
这行代码的作用是将 obj.prop1 的值赋给变量 prop1，将对象 obj 中除 prop1 以外的属性赋值给变量 rest。
实例
下面是一个使用 ES7 对象解构赋值的实例：
--- --- - -
----- ------
---- ---
-------- -
----- ----------
--------- ---------
-
--
--- - ----- ---- -------- - ----- -------- - - - ----
------------------ -- -----
----------------- -- --
------------------ -- ---------
---------------------- -- ---------在这个例子中，我们首先定义了一个对象 obj，包含了 name、age 和 address 三个属性。然后我们使用对象解构赋值，将 obj 中的属性值赋值给了变量 name、age、city 和 district。最后，我们分别输出了这些变量的值。
总结
ES7 中对象解构赋值是一种非常方便的操作方式，它可以让开发者更加方便地从对象中提取数据并赋值给变量。在本文中，我们介绍了 ES7 中对象解构赋值的基本语法、默认值、嵌套对象、别名和扩展运算符等使用技巧。希望本文能够对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65dd78901886fbafa4ad3249