ES6对象解构

本文概述

• 对象解构和默认值
• 分配新的变量名
• 没有声明的转让
• 对象解构和休息算子
• 分配新的变量名称并同时提供默认值

它类似于数组解构, 除了可以从对象中提取属性(或键)及其对应的值, 而不是从数组中提取值。

销毁对象时, 我们使用键作为变量的名称。变量名称必须与对象的属性(或键)名称匹配。如果不匹配, 则它将收到未定义的值。这就是JavaScript知道我们要分配对象的哪个属性的方式。

在对象解构中, 通过键而不是位置(或索引)提取值。

首先, 尝试使用以下示例了解对象分解中的基本分配。

示例-简单分配

const num = {x: 100, y: 200};
const {x, y} = num;

console.log(x); // 100
console.log(y); // 200

输出如下

100
200

让我们了解基本的对象销毁分配。

示例-基本对象销毁分配

const student = {name: 'Arun', position: 'First', rollno: '24'};
const {name, position, rollno} = student;
console.log(name); // Arun
console.log(position); // First
console.log(rollno); // 24

输出如下

Arun
First
24

对象解构和默认值

与数组解构一样, 如果未定义从对象解压缩的值, 则可以将默认值分配给变量。从以下示例可以清楚地看出。

例子

const {x = 100, y = 200} = {x: 500};

console.log(x); // 500
console.log(y); // 200

在上面的示例中, 变量x和y的默认值为100和200。然后, 变量x的值重新分配为500。但是变量y没有重新分配, 因此保留了其原始值。因此, 我们将得到500和200, 而不是得到100和200的输出。

输出如下

500
200

分配新的变量名

我们可以为变量分配与对象属性不同的名称。你可以看到相同的插图, 如下所示：

例子

const num = {x: 100, y: 200};
const {x: new1, y: new2} = num;
 
console.log(new1); //100 
console.log(new2); //200

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

输出如下

100
200

没有声明的转让

如果在声明变量时未分配其值, 则可以在解构期间分配其值。你可以看到相同的插图, 如下所示：

例子

let name, division;
({name, division} = {name: 'Anil', division: 'First'}); 
console.log(name); // Anil
console.log(division); // First

在上面的示例中, 应注意, 当使用不带声明的变量解构赋值时, 必须在赋值语句周围使用括号()。否则, 语法将无效。

输出如下

Anil
First

对象解构和休息算子

通过在对象分解中使用rest运算符(…), 我们可以将对象的所有其余键放在新的对象变量中。

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

例子

let {a, b, ...args} = {a: 100, b: 200, c: 300, d: 400, e: 500}
console.log(a); 
console.log(b); 
console.log(args);

输出如下

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

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

从对象解压缩的属性可以分配给具有不同名称的变量。如果未定义解包值, 则会将默认值分配给它。

例子

const {a:num1=100, b:num2=200} = {a:300};
console.log(num1); //300
console.log(num2); //200

输出如下

300
200