在 JavaScript 中，对象是一种很常见的数据类型。我们经常需要从对象中提取出一部分数据，或者将一组数据组合成一个对象。传统的对象操作方法，如使用点运算符或者 for 循环，存在代码量大、易错等问题。在 ES6 中，为了解决这些问题，增加了解构赋值这一特性，可以更加简洁高效地操作对象。
对象解构赋值
对象解构赋值是指从一个对象中取出若干属性，将这些属性值赋给新的变量。下面是一个简单的例子：
-- -------------------- ---- ------- ----- ------ - - ----- ------ ---- --- ------- ------ -- ----- - ----- ---- ------ - - ------- ------------------ -- ----- ----------------- -- -- -------------------- -- ------
在这个例子中，我们定义了一个 person 对象，包含三个属性 name、age 和 gender。然后使用解构赋值语法，将 person 对象中的这三个属性的值分别赋给了三个新变量 name、age 和 gender。这就是对象解构赋值的基本用法。
如果对象中存在一些没有定义的属性，则将会被忽略。
-- -------------------- ---- ------- ----- ------ - - ----- ------ ---- -- -- ----- - ----- ---- ------ - - ------- ------------------ -- ----- ----------------- -- -- -------------------- -- ---------
如果你想为变量赋默认值，可以使用这种语法：
const { name = 'Alice', age = 20, gender = 'Female' } = person;
console.log(name); // 'Tom'
console.log(age); // 18
console.log(gender); // 'Female'对象嵌套解构赋值
当对象中存在嵌套对象时，也可以使用同样的语法进行解构赋值。
例如，读取嵌套在 person 对象中的 address 对象：
-- -------------------- ---- -------
----- ------ - -
----- ------
---- ---
-------- -
----- ----------
------- ----- --------
--------- --------
-
--
----- - ----- ---- -------- - ----- -------- - - - -------
------------------ -- -----
----------------- -- --
------------------ -- ---------
---------------------- -- --------在这个例子中，我们使用了对象嵌套解构赋值语法，将 person 对象中的 address 对象的 city 和 postcode 属性值分别赋给了新变量 city 和 postcode。
对象解构赋值的常见用途
对象解构赋值不仅可以从对象中提取属性，还可以将一组属性组合成一个新对象。例如：
-- -------------------- ---- -------
----- ------ - -
----- ------
---- ---
------- -------
-------- -
----- ----------
------- ----- --------
--------- --------
-
--
----- - ----- ---- ------- -------- - ---- - - - -------
----- --------- - - ----- ---- ------- ---- --
-----------------------
-- - ----- ------ ---- --- ------- ------- ----- --------- -在这个例子中，我们使用对象解构赋值语法，将 person 对象中的 name、age、gender 和 address.city 属性值分别赋给了新变量 name、age、gender 和 city，然后将这些属性组合成一个新的对象 newPerson。
总结
对象解构赋值是 ES6 中非常有用的一个特性。通过它，我们可以更加简洁高效地从一个对象中提取出一部分数据，或者将一组数据组合成一个对象。掌握这个特性可以极大地减少冗余代码，增加 JavaScript 代码的可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b13aa448841e9894d8edbf