📜  ES6对象解构

📅  最后修改于: 2021-01-01 04:04:49             🧑  作者: Mango

对象解构

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

销毁对象时,我们使用键作为变量的名称。变量名称必须与对象的属性(或键)名称匹配。如果不匹配,则它将收到未定义的值。这就是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

对象解构和默认值

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

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

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

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

输出量

500
200

分配新的变量名

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

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

在上面的示例中,我们已将属性名称xy分配给了局部变量new1new2

输出量

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 }

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

从对象解压缩的属性可以分配给具有不同名称的变量。如果未打包的值是undefined ,则会为其分配默认值。

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

输出量

300
200