关于es6:vue2es6结构赋值

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);  // 23

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

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

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

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

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

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; // 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 对象的属性也会影响 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

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