4.1 数组的解构赋值

• 解析某一数据的结构，将我们想要的东西提取出来，赋值给变量或常量

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

4.2 数组的解构赋值的原理

• 1. 模式(结构)[] = [1,2,3]
• 2. 索引值相同的完成赋值 [a,b,c] = [1,2,3]

    // 例子(不取的可以直接逗号跳过)
    const [a,[,,d],e] = [1,[2,4,5],3]
    console.log(a,d,e); 

4.3 数组解构赋值的默认值

• 1. 默认值的基本用法

    const [a,b] = []
    console.log(a,b); // undefined,undefined
    
    const [a = 1,b = 2] = [];
    console.log(a,b);  //1,2

• 2. 默认值的生效条件
• 只有当一个数组成员严格等于（===）undefined时，对应的默认值才会生效

   const [a = 1,b = 2] = [3,0]  // 输出3，0
    const [a = 1,b = 2] = [3,null]  // 输出3，null
    const [a = 1,b = 2] = [3]  // 输出3，2(默认值生效)
    console.log(a,b);

• 3. 默认值表达式
• 如果默认值是表达式，默认值表达式是惰性求值

    const func = () => {
        console.log('我被执行了');
        return 2;
    }
    const [x = func()] = [1]; //输出1 
    // const [x = func()] = []; 输出'我被执行了'和2
    console.log(x);

4.4 数组解构赋值的应用

• arguments

    function func() {
        const [a,b] = arguments
        console.log(a,b);
    }
    func(1,2)

• NodeList

    const [p1,p2,p3] = document.querySelectorAll("p")
    console.log(p1,p2,p3);

• 函数参数的解构赋值

    const array = [1,1];
    // const add = (arr) => arr[0] + arr[1]; //原写法
    const add = ([x,y]) => x + y; // 解构赋值写法
    console.log(add(array));

• 交换变量的值

    let x = 1;
    let y = 2;
    // let tmp = x;
    // x = y;
    // y = tmp;
    // console.log(x,y); // 原写法，将x和y的值互换
    
    [x,y] = [y,x] // 解构赋值写法
    console.log(x,y);

5.1 对象的解构赋值

• 模式（结构）匹配{}={}
• 属性名相同的完成赋值

    const {username:username,age:age} = {username:'Alex',age:18}
    console.log(age,username);

    // 取别名
    const {age:age,username:uname} = {username:'Alex',age:18};
    console.log(age,uname);

5.2 对象解构赋值的注意事项

• 1. 默认值的生效条件
• 对象的属性值严格等于undefined时，对应的默认值才会生效

    const {username='ZhangSan',age = 0} = {username:'alex'};
    console.log(username,age);

• 2. 将一个已经声明的变量用于解构赋值
• 如果将一个已经声明的变量用于对象的解构赋值，整个赋值需在圆括号中进行

    let x = 2;
    ({x} = {x:1})
    console.log(x);

• 3. 可以取到继承的属性

    const {toString}={};
    console.log(toString);

5.3 对象解构赋值的应用

• 函数参数的解构赋值

    const logPersoninfo = ({username,age}) => console.log(username,age);
    logPersoninfo({username:'alex',age:18})

• 复杂的嵌套

    const obj = {
        x:1,
        y:[2,3,4],
        z:{
            a:5,
            b:6
        }
    }
    // const {x,y,z} = obj;
    // console.log(x,y,z); // 全部输出
    const {
        y, // 数组
        z, // 对象
        z:{b}, // 对象里面的b
        y:[,yy] // 输出3
    } = obj
    console.log(y,yy,z,b);

5.4 其他数据类型的解构赋值

• 字符串的解构赋值

1. 数组的形式解构字符串

    const [a,b,c,d,e] = 'hello';
    console.log(a,b,c,d,e);

2. 对象的形式解构字符串(按照索引/长度)

    const {0:a} = 'hello'
    console.log(a);

3. 数值和布尔值的解构赋值（先将等号右边的值转为对象）

    const {a = 2,toString} = 123;
    console.log(a,toString); // object

    const {a = 2,toString} = true;
    console.log(a,toString); // boolean

4. undefined和null的解构赋值

• 由于undefined和null无法转为对象，所以对他们进行解构赋值，都会报错

    const {toString} = undefined
    const {toString} = null