1.开发环境 vue2+es6
2.电脑系统 windows11专业版
3.简略地说,对象解构就是应用于对象匹配的构造来实现对象属性赋值。上面的例子展现了两段等价的代码,首先是不应用对象解构的:

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

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

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

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

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

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

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

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

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

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

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

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

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对象的属性也会影响 personCopyperson.job.title='Hacker';console.log(person);// {name:'Chen',age:23,job:{title:'Web前端开发'}};console.log(personCopy);// {name:'Chen',age:23,job:{title:'Web前端开发'}};

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

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

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

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

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