【ES6】解构赋值

解构赋值：从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。解构赋值，就是解析结构，进行赋值。

分为两种：数组解构 和 对象解构

数组解构

数组解构允许我们按照一一对应的关系从数组中提取值，然后将值赋给变量。

    // 数组解构赋值
    
    let [a,b,c] = [1,2,3];    // 左边 与右边的格式一一对应
    console.log(a);     //1
    console.log(b);     //2
    console.log(c);     //3

当左侧变量没有对应的赋值时，返回的时undefined 

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

对象解构

对象解构允许我们使用变量的名字匹配对象的属性，匹配成功，将对象属性的值赋给变量。

    // 对象解构赋值

    // 简写版本
    let { name, age } = {
            name: "ali",
            age: 17
        }
    console.log(name, age);       //ali 17
    //完整版本
    let { name: name1, age: age1 } = {
            name: "ali",
            age: 17
        }
    console.log(name1, age1);     //ali 17

复杂对象的解构赋值

    //复杂对象
    let obj = {
            p: ["hello", { y: "world" }]
        }
    //目标获取hello与world
    let { p: [x, { y: y }] } = obj;
    console.log(x, y);

特殊对象的解构赋值

1. 字符串做对象

    //字符串做对象
    let {length:len} = "function";
    console.log(len);   //8

2. Math的应用

    //Math的应用
    let {PI:p} = Math;
    console.log(p);     //3.141592653589793

实际应用

1. 交换两个变量的值

    //交换两个变量的值
    let num1 = 100;
    let num2 = 200;
    [num1, num2] = [num2, num1];

2. 提取JSON中的数据

    //提取JSON中的数据
    let jsonData = {
        id: 1,
        status: "okok",
        data: [1,2,3,4,5]
    }
    let {id, status, data} = jsonData;
    console.log(id, status, data);      //1 'okok' [1, 2, 3, 4, 5]

3. 用于函数参数默认值

    //用于函数参数默认值
    function fn({id, name="ali"}){
        console.log(id, name);          //4 'ali'
    }
    fn({id:4});