vue2+es6结构赋值

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.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰

vue2+es6结构赋值

你可能感兴趣的:(es6vue.js)