📅  最后修改于: 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
在上面的示例中,变量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 }
从对象解压缩的属性可以分配给具有不同名称的变量。如果未打包的值是undefined ,则会为其分配默认值。
const {a:num1=100, b:num2=200} = {a:300};
console.log(num1); //300
console.log(num2); //200
输出量
300
200