ES6新增语法对象解构

心安事随

发布于 2024-07-29 16:38:00

890

发布于 2024-07-29 16:38:00

文章被收录于专栏：前端大合集

介绍

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: