在 ES6 中，对象的解构赋值是一种常见的语法，它可以方便地从一个对象中取出一部分属性，并将它们赋值给变量。本文将介绍如何使用对象的解构赋值，包括基本语法、嵌套对象的解构、默认值、计算属性等。
基本语法
对象的解构赋值使用花括号 {} 来表示，可以一次赋值多个变量。如下面的示例所示，我们定义了一个对象 person，然后使用解构赋值的语法取出了其中的 name 和 age 属性，并分别赋值给了 pname 和 page 变量。
const person = { name: 'Tom', age: 18 };
const { name: pname, age: page } = person;
console.log(pname); // "Tom"
console.log(page); // 18在上面的示例中，我们使用了 : 来给取出的属性定义新的变量名。我们也可以不指定新的变量名，直接使用属性名作为变量名。如下面的示例所示，我们取出了 name 和 age 属性，并分别赋值给了 name 和 age 变量。
const { name, age } = person;
console.log(name); // "Tom"
console.log(age); // 18嵌套对象的解构
当对象中存在嵌套对象时，我们可以使用类似于下面的语法来解构取出嵌套对象中的属性：
const nestedObj = { outer: { inner: 42 } };
const { outer: { inner } } = nestedObj;
console.log(inner); // 42在上面的示例中，我们使用了类似于 outer: { inner } 的语法，表示从 outer 属性中取出 inner 属性的值，并将其赋值给 inner 变量。
如果嵌套对象层数较多，我们也可以在解构赋值的过程中使用多个 {} 来表示。如下面的示例所示，我们定义了一个 person 对象，其中包含了多个嵌套对象。我们使用解构赋值的语法取出了 name 属性和 address 对象中的 city 属性，并分别赋值给了 name 和 city 变量。
-- -------------------- ---- -------
----- ------ - -
----- ------
---- ---
-------- - - ----- ------- ---- -- -- - ----- ------- ---- -- - --
-------- -
----- ----------
-------- ---------
--------- -
----- -- ----------
----- -----
-
-
--
----- - ----- -------- - ---- - - - -------
------------------ -- -----
------------------ -- ---------在上面的示例中，我们使用了类似于 address: { city } 的语法，表示从 address 属性中取出 city 属性的值，并将其赋值给 city 变量。
默认值
使用对象的解构赋值时，我们可以定义默认值，以防止赋值的属性为 undefined。如下面的示例所示，我们定义了一个对象 person，其中只包含了 name 属性。我们使用解构赋值的语法取出了 name 和 age 属性，并分别赋值给了 name 和 age 变量。由于 person 对象中没有 age 属性，因此我们在解构赋值时给 age 变量定义了默认值 0。
const person = { name: 'Tom' };
const { name, age = 0 } = person;
console.log(name); // "Tom"
console.log(age); // 0在上面的示例中，当 person 对象中不存在 age 属性时，age 变量会被赋值为默认值 0。
计算属性
ES6 中的对象也支持计算属性，即属性名可以根据表达式计算得出。在使用对象的解构赋值时，我们可以使用类似于下面的语法来取出计算属性的值：
const key = 'name';
const person = { [key]: 'Tom', age: 18 };
const { [key]: pname, age: page } = person;
console.log(pname); // "Tom"
console.log(page); // 18在上面的示例中，我们使用了类似于 [key]: pname 的语法，表示从计算属性 key 中取出属性值，并将其赋值给 pname 变量。
总结
本文介绍了 ES6 中的对象解构赋值，包括基本语法、嵌套对象的解构、默认值、计算属性等。当我们需要从一个对象中取出一部分属性，并将它们赋值给变量时，对象的解构赋值是一个非常方便、实用的语法。希望本文可以对你学习和理解对象的解构赋值提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c6338b10032fedd38bcf2f