(精华)2020年6月29日 JavaScript高级篇 ES6(解构赋值)

解构赋值

1.1. 数组解构赋值

    // 通过数组对变量进行赋值
    let arr = [1,2,3]
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
    let [a,b,c] = [1,2,3]
    console.log(a);
    console.log(b);
    console.log(c);
    

1.1.1. 模式匹配

等号两边的模式相同 左边的变量就会被赋予对应的值

  let [a,[[b],c]] = [1,[[2],3]]
    console.log(a);
    console.log(b);
    console.log(c);

1.1.2. 不完全解构

// 不完全解构
    let [x,y,u] = [1,2,3,4]
    console.log(x);
    console.log(y);
    console.log(u);

1.1.3. 嵌套模式

  let [a,[[b],c]] = [1,[[2],3]]
    console.log(a);
    console.log(b);
    console.log(c);

1.1.4. 默认值

 // 指定默认值
    let [f = true] = []
    console.log(f);
    let [a,b="y"] = ['a']
    console.log(b);
    // 注意点 es6内部使用 === 判断是否是undefined 如果是undefined 默认值才会生效
    let [x = 1] = [null]
    let [y = 2] = [undefined]
    console.log(x); // null 
    console.log(y); // 2

1.1.4.1. 惰性求值

// 惰性求值
    function f(){
        return 'fff'
    }
    // let [x = f()] = [1]
    let [x = f()] = []
    console.log(x);

1.1.4.2. 默认值可以引用解构赋值的其他变量

// 默认值可以引用解构赋值的其它变量 前提是变量必须已经声明
    // let [x= 1,y=x] = []
    // console.log(x); // 1 
    // console.log(y);
    // let [x = y,y=1] = [] // 从左往右
    // let [y = 1 , x = y] = []
    // console.log(x);
    // console.log(y);

2. 对象解构赋值

2.1. 定义用法注意点

 let person = {
        name:"chris",
        age:33
    }
    // let {name,age} = person;
    // 注意：对象的解构和数组不一样  和顺序无关
    let {age:age,name:name} = person;
    console.log(name);
    console.log(age);
    
    let {sex} = person;
    console.log(sex); // 解构不成功会返回undefined
    // 真正被赋值的是后者 对象解构赋值的实质
    // 会先找到同名的属性 赋值给后者的变量
    let {name:name1} = person
    console.log(name1);

2.2. 可以取到继承的属性

    const obj1 = {};
    const obj2 = {name:'laney'}
    Object.setPrototypeOf(obj1,obj2)
    // obj1.__proto__ = obj2
    const {name} = obj1;
    console.log(name);

2.3. 指定默认值

// 默认值的生效条件 对象属性的值 严格 === undefined
const {x = 1} = {x:undefined}
const {y = 3} = {y:null}
console.log(x);
console.log(y);