1.开发环境 vue2+es6
2.电脑系统 windows11专业版
3.简单地说,对象解构就是使用于对象匹配的结构来实现对象属性赋值。下面的例子展示了两段等价的代码,首先是不使用对象解构的:
//不使用对象解构
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);
// 233.使用解构,可以在一个类似对象字面量的解构中,声明多个变量,同时执行多个赋值操作。如果想让变量直接说使用属性的名称,那么可以使用简写语法,比如:
let person={
name:"Chen",
age:23
};
let {name,age}=person;
console.log(name);
// Chen
console(age);
// 234.解构赋值不一定与对象的属性匹配。赋值的时候可以忽略某些属性,而如果引用的属性不存在,则该变量就是 undefined：
let person={
name:"Chen",
age:23
}
let {name,job}=person;
console.log(name);
// Chen
console.log(job);
// undefined5.也可以在解构赋值的同时定义默认值,这适用于前面刚提到的引用属性不存在源对象中的情况:
let person={
name:"Chen",
age:23
}
let {name,job="Web前端开发"}=person;
console.log(name);
// Chen
console.log(job);
// Web前端开发6.解构在内部使用函数 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;
// TypeError7.解构并不要求变量必须在解构表达式中声明。不过,如果是事先声明的变量赋值,赋值值表达式必须包含在一堆括号中:
let person={
name:"Chen",
age:23
}let personName,personAge;
({name:personName,age:personAge}=person);
console.log(personName,personAge);
// Chen,238.嵌套解构
解构对于用于引用嵌套的属性或赋值目标没有限制。为此,可以通过解构来复制对象属性:
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:'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【vue2+es6结构赋值】11.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰
