对象解构

它类似于数组解构，只是不是从数组中提取值，而是可以从对象中提取属性（或键）及其对应的值。

在解构对象时，我们使用键作为变量的名称。变量名必须与对象的属性（或键）名匹配。如果它不匹配，则它会收到一个 undefined 值。 这就是 JavaScript 知道我们要分配对象的哪个属性的方式。

在对象解构中，值是通过键而不是位置（或索引）提取的。

首先，尝试通过以下示例了解对象解构中的基本赋值。

示例 - 简单赋值

输出

100
200

让我们理解基本的对象解构赋值。

示例 - 基本对象解构赋值

输出

Arun
First
24

对象解构和默认值

与数组解构类似，如果从对象中解包的值为 undefined，则可以将默认值分配给变量。 从以下示例中可以清楚地看出这一点。

示例

在上面的示例中，变量 x 和 y 具有默认值 100 和 200。 然后，变量 x 被重新赋值为 500。 但是变量 y 没有被重新赋值，所以它保留了原来的值。 因此，我们将获得 500 和 200，而不是在输出中获得 100 和 200。

输出

500
200

分配新的变量名

我们可以为变量分配与对象属性不同的名称。 你可以参考以下示例

示例

在上面的示例中，我们将属性名称 x 和 y 分配给局部变量 new1 和 new2。

输出

100
200

不声明赋值

如果在声明变量时未分配变量的值，则可以在解构期间分配其值。 你可以参考以下示例

示例

在上面的示例中，需要注意的是，在使用没有声明的变量解构赋值时，必须在赋值语句周围使用括号 () 。 否则，语法将无效。

输出

Anil
First

对象解构和剩余运算符

通过在对象解构中使用剩余运算符 (…)，我们可以将对象的所有剩余键放在一个新的对象变量中。

让我们尝试通过一个例子来理解它。

示例

输出

100
200
{ c: 300, d: 400, e: 500 }

同时分配新的变量名并提供默认值

从对象中解包的属性可以分配给具有不同名称的变量。 并且在解包的值为 undefined 的情况下，将为其分配默认值。

示例

输出

300
200