ES6新增语法 对象解构

介绍

ECMAScript6新增了对象解构语法,可以在一条语句中使用嵌套数据实现一个或者多个赋值操作, 简单的说,对象解构就是使用了与对象匹配的解构来实现对象属性赋值

简单使用

下面是不使用对象解构写的代码

let person = {name:"张三",age:21}
let personName = person.name
let personAge = person.age
console.log(personName) // 张三
console.log(personAge) // 21

再用对象解构的语法来实现一下

let person = {name:"张三",age:21}
let {name:PersonName,age:PersonAge} = person
console.log(PersonName,PersonAge) // 张三,21

两者实现的功能一样,但明显对象解构的方式更加方便,简洁

1. 解构源对象不存在的属性,会打印成来undefined

let person = {name:"张三",age:21}
let {name:PersonName,job:PersonAge} = person
console.log(PersonName,PersonAge) // undefined

2. 在解构赋值的同时可以定义默认值,这就有效解决了前面的源对象未定义该 属性的问题

let person = {name:"张三",age:21}
let {name:PersonName,job="WebKaiFa"} = person
console.log(PersonName,job) // 张三 WebKaiFa

3. 解构并不要求变量必须在结构表达式中声明,不过,如果给事先声明的 变量 赋值,则赋值表达式必须包含在一对括号当中

如果不加括号的的情况(报错)

let personName,personAge;
let person = {name:"张三",age:21};
{name:personName,age:personAge} = person;
console.log(personName,personAge);
//  Uncaught SyntaxError: Unexpected token ':'

加了括号(正常输出)

let personName,personAge;
let person = {name:"张三",age:21};
({name:personName,age:personAge} = person)
console.log(personName,personAge); // 张三 21

4. 嵌套解构

let person = {name:"张三",age:21,job:{
    name:"WebKaiFa"
}};
let personCopy = {};
// 解构源对象 赋值给personCopy空对象
({name:personCopy.name,age:personCopy.age,job:personCopy.job} = person)
console.log(personCopy);

因为一个对象的引用被赋值给personCopy空对象,所以修改源对象的属性值,personCopy的值也会对应的发生改变,

5.在外层属性没有定义的情况不能使用嵌套解构,无论源对象还有目标对象都是 一样的

显示undefined

let person = {name:"张三",age:21,job:{
    name:"WebKaiFa"
}};
let personCopy = {};
// 解构源对象 赋值给personCopy空对象
({address:personCopy.address} = person)
console.log(personCopy); // {address: undefined}

报错:因为address在源对象上找不到该属性

let person = {name:"张三",age:21,job:{
    name:"WebKaiFa"
}};
let personCopy = {};
// 解构源对象 赋值给personCopy空对象
({address:{
    p:personCopy.address
}} = person)
console.log(personCopy);
// 报错:Uncaught TypeError: Cannot read properties of undefined (reading 'p')

6. 参考上下文匹配

在函数参数列表中也可以进行解构赋值,对参数的解构赋值不会影响到arguments对象,但可以在函数签名中声明在函数体内使用局部变量

let person = {name:"张三",age:21}
function PrintPerson(foo,{name,age},bat){
    console.log(arguments);
    console.log(name,age) //  张三 21
}
PrintPerson('star',person,'end')
// Arguments(3) ['star', {…}, 'end', callee: (...), Symbol(Symbol.iterator): ƒ]0: "star"1: {name: '张三', age: 21}age: 21name: "张三"[[Prototype]]: Object2: 

7. 总结一下

ES6对象解构语法的优点和好处有以下几点：

• 可以方便地从对象中提取属性值，不需要使用点运算符或中括号。
• 可以给变量赋予默认值，避免undefined或null的情况。
• 可以使用别名，给变量取一个与对象属性名不同的名字。
• 可以嵌套解构，从对象的深层属性中提取值。
• 可以与函数参数结合，简化函数的定义和调用。