js 对象解构

164 阅读1分钟

1.使用对象解构可以更方便的取出对象的属性值

    // 过去
    let person = { name: 'Matt', age: 27 };
    let personName = person.name, personAge = person.age; 
    console.log(personName); // Matt 
    console.log(personAge); // 27
    // 现在
    let person = { name: 'Matt', age: 27 }; 
    let { name: personName, age: personAge } = person; 
    console.log(personName); // Matt 
    console.log(personAge); // 27
    // 如果想 让变量直接使用属性的名称,那么可以使用简写语法
    let person = { name: 'Matt', age: 27 }; 
    let { name, age } = person; 
    console.log(name); // Matt 
    console.log(age); // 27

2.可以嵌套解构复杂对象

    let person = { 
        name: 'Matt', 
        age: 27, 
        job: { title: 'Software engineer' } 
    }; 
    let personCopy = {}; 
    ({ 
        name: personCopy.name, 
        age: personCopy.age, 
        job: personCopy.job 
     } = person); 
    // 因为一个对象的引用被赋值给 personCopy,所以修改 person.job 对象的属性也会影响 personCopy 
    person.job.title = 'Hacker' console.log(person); 
    // { name: 'Matt', age: 27, job: { title: 'Hacker' } } 
    console.log(personCopy); 
    // { name: 'Matt', age: 27, job: { title: 'Hacker' } }
    let person = { 
        name: 'Matt', 
        age: 27, 
        job: { 
            title: 'Software engineer' 
        } 
    }; 
    // 声明 title 变量并将 person.job.title 的值赋给它 
    let { job: { title } } = person; 
    console.log(title); // Software engineer

3.部分解构

  • 解构如果出错了,整个过程会完成一部分 4.参数上下文匹配
  • 如果属性不存在,则变量值为undefined
  • 可以解构同时赋予值 let { name, job='Software engineer' } = person;
  • 外层属性未定义的对象不可以被解构,会报错