ECMAScript/ES6对象解构

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

销毁对象时，使用键作为变量的名称。 变量名称必须与对象的属性(或键)名称匹配。 如果不匹配，则它将收到undefined的值。

在对象解构中，通过键而不是位置(或索引)提取值。通过以下示例演示来了解对象分解中的基本分配。

示例-简单分配

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

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

运行结果如下：

100
200

示例-基本对象销毁分配

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

运行结果如下：

Arun
First
24

1.对象解构和默认值

与数组解构一样，如果从对象解压缩的值是：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

2.分配新的变量名

可以为变量分配与对象属性不同的名称。参考如下代码示例：

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

3.未声明分配

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

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

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

运行结果如下：

FiterSu
First

4.对象解构和Rest运算符

通过在对象分解中使用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