乐趣区

关于javascript:对象解构

jiezi

请留神, 本文章的内容参考了 JavaScript 高级程序设计(第 4 版)。

1. 简略地说, 对象解构就是应用于对象匹配的构造来实现对象属性赋值。上面的例子展现了两段等价的代码, 首先是不应用对象解构的:

// 不应用对象解构
let person={
name:'Chen',
age:23
};

let personName=person.name,
    personAge=person.age;
console.log(personName);  // Chen
console.log(personAge);  // 23
还是下面的例子, 应用对象解构是这样的:
let person={
    name:'Chen',
    age:23
}

let {name:personName,age:personAge}=person;
console.log(personName);  // Chen
console.log(personAge);  // 23

2. 应用解构, 能够在一个相似对象字面量的解构中, 申明多个变量, 同时执行多个赋值操作。如果想让变量间接说应用属性的名称, 那么能够应用简写语法, 比方:

let person={
    name:"Chen",
    age:23
};
let {name,age}=person;
console.log(name); // Chen
console(age); // 23

3. 解构赋值不肯定与对象的属性匹配。赋值的时候能够疏忽某些属性, 而如果援用的属性不存在, 则该变量就是 undefined：

let person={
    name:"Chen",
    age:23
}
let {name,job}=person;
console.log(name); // Chen
console.log(job); // undefined

4. 也能够在解构赋值的同时定义默认值, 这实用于后面刚提到的援用属性不存在源对象中的状况:

let person={
    name:"Chen",
    age:23
}
let {name,job="Web 前端开发"}=person;
console.log(name); // Chen
console.log(job); // Web 前端开发

5. 解构在外部应用函数 ToObject()(不能在运行时环境中间接拜访)把源数据结构转换为对象。这意味着在对象解构的高低问中, 原始值会被都当成对象。这意味着 (依据 ToObject() 的定义),null 和 undefined 不能被解构, 否则会抛出谬误。

let {length}='Chen';
console.log(length);  // 4
let {constructor:c}=4;
console.log(c===Number); // true
let {_}=null;  // TypeError
let {_}=undefined; // TypeError

6. 解构并不要求变量必须在解构表达式中申明。不过, 如果是当时申明的变量赋值, 赋值值表达式必须蕴含在一堆括号中:

let personName,personAge;
let person={
    name:"Chen",
    age:23
}
({name:personName,age:personAge}=person);
console.log(personName,personAge); // Chen,23

7. 嵌套解构
解构对于用于援用嵌套的属性或赋值指标没有限度。为此, 能够通过解构来复制对象属性:

let person={
    name:'Chen',
    age:23,
    job:{title:'Web 前端开发'};
let personCopy={};
({
  name:personCopy.name,
  age:personCopy.age,
  job:personCopy.job
}=person);
// 因为一个对象的援用被赋值给 personCopy, 所以批改
//person.job 对象的属性也会影响 personCopy
person.job.title='Hacker';
console.log(person);
// {name:'Chen',age:23,job:{title:'Web 前端开发'}};
console.log(personCopy);
// {name:'Chen',age:23,job:{title:'Web 前端开发'}};

8. 解构赋值能够应用嵌套构造, 以匹配嵌套的属性:

let person={
    name:"Chen",
    age:23,
    job:{title:"Web 前端开发"}
};
// 申明 title 变量并将 person.job.title 的值赋给它
let {job:{title}}=person;
console.log(title); // Web 前端开发

9. 在外层属性没有定义的状况下不能应用嵌套解构。无论源对象还是指标对象都一样:

let person={
    job:{title:"Web 前端开发"}
};
let personCopy={};
// foo 在源对象上是 undefined
({
    foo:{bar:personCopy.bar}
}=person)
// TypeError:Cannot destructure property 'bar' of 'undefined' or 'null'
// job 在指标对象上是 undefined
({
    job:{title:personCopy.job.title}
}=person)
// TypeError:Cannot set property 'title' of undefined

10. 本期的分享到了这里就结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!

退出移动版