它类似于数组解构,除了可以从对象中提取属性(或键)及其对应的值,而不是从数组中提取值。
销毁对象时,使用键作为变量的名称。 变量名称必须与对象的属性(或键)名称匹配。 如果不匹配,则它将收到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
与数组解构一样,如果从对象解压缩的值是: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: 'FiterSu', division: 'First'}); console.log(name); // FiterSu console.log(division); // First
在上面的示例中,应注意,当使用不带声明的变量解构赋值时,必须在赋值语句周围使用括号()
。 否则语法将无效。
运行结果如下:
FiterSu 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