【ES6】解构赋值

解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

单层对象的解构赋值

    const obj = {
        name: 'paul',
        age: 19,
        gender: '男'
    };
    const { name, age, gender } = obj;
    console.log(name, age, gender);     // paul 19 男

深层对象的解构赋值

    const obj = {
        name: 'paul',
        age: 19,
        gender: '男',
        schedule: {
            morning: '学习',
            afternoon: '玩耍',
            night: '睡觉'
        }
    };
    const { name, schedule: { night } } = obj;
    console.log(name, night);       // paul 睡觉

解构对象的别名

    const { name: nickName, schedule: { night } } = obj;
    console.log(nickName, night);       // paul 睡觉 ,已经定义了别名，此时在使用name将会报错

数组的解构赋值

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

数组设置空占位符的解构,两个逗号一个空位符,三个逗号算两个空位符以此类推

const [a,,c] = [1,2,3]       // a=1,c=3
const [a,,,c] = [1,2,3,4]    // a=1,c=4

乱序解构

因为数组也是对象，数组作为对象的key是下标index，所以可以利用对象的结构方法来达到乱序解构的目的

    const arr = [1, 2, 3,]
    const { 1: a, 2: b, 0: c } = arr
    console.log(a, b, c);       // 2 3 1