前端 —— JavaScript 进阶 25 -- ES6 之 解构赋值

 

解构：

按照某种结构来分解里面的成员

解构赋值：

是对赋值运算符的扩展

是针对 数组 或 对象 进行 模式匹配，然后对其中的变量进行赋值

解构模型

在解构中，有两部分参与：

解构的目标 = 解构的源

• 只要左右两边的 模式相同，就可以合法赋值
• 如果解构不成功，变量值等于 undefined

对象解构：

对象解构不需要位置一致，只要保证解构的变量名和属性一致即可。

//解构赋值 等号前面的大括号里的属性名 要和对象里的属性名一致
const {name,age} = {
    name:'张三',
    age:22
};
console.log(name,age); // 张三 22

const {age,name} = {
    name:'张三',
    age:22
};
console.log(age,name);//22 '张三'

• 起一个别名，原名作废 , 原属性名:别名，

const {name:tn,age} = {

    name:'张三',

    age:22

};

console.log(tn); // 张三

• 如果解构不成功，对应变量值为undefined;

const {name,age,tel} = {
    name:'张三',
    age:22
};
console.log(tel);//undefined

• 不完全解构，如果等号左边没有全部匹配右边也是可以结构成功的。

const {name,age} = {
    name:'张三',
    age:22,
    tel:'15510999999'
};
console.log(name,age) // 张三 22

• 解构允许有默认值。

const {name,age,tel='13312345678'} = {
    name:'张三',
    age:22
};
console.log(tel);// 13312345678

• 如果此属性有值，还给了一个默认值，会输出自己原有的

const {name,age,tel='13312345678'} = {
    name:'张三',
    age:22,
    tel:'15510999999'
};
console.log(tel); // 15510999999

• 这种赋值叫做 模式匹配。只要等号两边结构一样就可以进行赋值。

const {users:{uname,age}} = {users:{uname:'李四',age:'24'}};
console.log(uname,age); //李四 24

 

数组解构：

数组解构的变量名需要位置一致。

右边是什么类型的，左侧的也是什么类型

const [city,year] = ['北京','2022'];
console.log(city,year);//北京 2022
//按顺序赋值
const [year,city] = ['北京','2022'];
console.log(year,city);//北京 2022

注意:在es6内部,是用 严格相等 来判断一个位置是否有值。只有当数组中的成员严格等于undefined时 默认值才能生效。

如果默认值里是null，因为null不严格等于undefined 所有默认值也不会生效。

const [a = 1] = [null];
console.log(a); //null

如果默认值是表达式

    这个表达式是惰性求值。只有用到的时候才会求值。

    只有a对应的右边的位置的值为undefined的时候，才会执行fn，否则不会执行

fn=()=>{
    return 2;
};    
let [a=fn()]=[1];
console.log(a);//1

fn=()=>{
    return 2;
};    
let [a=fn()]=[];
console.log(a);//2

 

 

 

 

我的文章都是学习过程中的总结，如果发现错误，欢迎留言指出，我及时更正。