变量的解构赋值

1.什么是解构

ES6中，按照一定的模式，从数组或对象中提取值，对变量进行赋值。这个过程叫做解构赋值。

2.数组解构

     // ES6 之前的写法
        const arr = ["元素一", "元素二", "元素三", "元素四", "元素五"];
        let one = arr[0];
        let two = arr[1];
        let three = arr[2];
        let four = arr[3];
        let five = arr[4];

        console.log(one);
        console.log(two);
        console.log(three);
        console.log(four);
        console.log(five);

   // ES6 写法
       let [one, two, three, four, five] = ["元素一", "元素二", "元素三", "元素四", "元素五"];
        console.log(one);
        console.log(two);
        console.log(three);
        console.log(four);
        console.log(five);

本质上，这种写法属于“模式匹配”。只要赋值号两边的模式相同，左边的变量就会被赋予对应的值。

        let [a, [b, c]] = [1, [2, 3]];
        console.log(a);
        console.log(b);
        console.log(c);
        let [e, , f] = [4, 5, 6];
        console.log(e);
        console.log(f);

解构失败时，变量的值为undefined

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

不完全解构

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

3.对象解构赋值

        const obj = {
            name: "亚索",
            skill: "hasakei"
        }
        let {name,skill} = obj;
        console.log(name); //亚索
        console.log(skill); //hasakei

        let jsonData = {
            id:10,
            name:"蓝牙耳机",
            price:"100"
        };
        let {id,name,price} = jsonData;
        console.log(id,name,price);

变量名与属性名相同，才能取到正确的值。
如果想要自定义变量名，则用：进行修改。

        const obj = {
            name: "亚索",
            skill: "hasakei"
        }
        let {name: n,skill} = obj;
        console.log(n);
        console.log(skill);

方法解构

var obj = {
    r:function(){
    	console.log("狂风绝息斩");
    },
    e:function(){
    	console.log("e去不复返");
    }
}
const {r,e} = obj;
r();
e();

        const obj = {
            p: [
                "hello", {
                    y: "world"
                }
            ]
        }
        let {p:[a,{y:b}]}=obj;
        console.log(a);
        console.log(b);

        const obj = {
            a:{
                b:{
                    c:1,
                    d:2
                }
            }
        }
        let {a:{b:{c,d}}} = obj;
        console.log(c);
        console.log(d);

注意点

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

以上代码是错误写法。{x}前面如果没有let ,const的变量声明的关键字，则js会将其视为代码块。

如果需要提前声明变量，则需要将解构语句用小括号包裹起来；

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

数组本质也是特殊的对象，也可以对数组进行对象属性的解构。

        const arr = ["诺手", "蝎子", "劫", "EZ", "女坦"];
        let {
            length,
            0: first,
            4: last
        } = arr;
        console.log(length);
        console.log(first);
        console.log(last);

4.字符串解构

        const str = 'hello';
        let [a, b, c, d, e] = 'hello';
        let {
            length
        } = 'hello';
        console.log(length); //5

类数组的对象都有一个length属性，我们可以对这个属性进行解构赋值。

5.函数参数的解构赋值

function add([x,y]){
	return x+y;
}
let sum = add([1,2]);
console.log(sum);//3

以上案例，函数add的参数表面上一个数组，但是在传入参数的那一刻，数组参数会被解构成变量x和与y.

6.用途

6.1 交换变量的值

        let a = 1;
        let b = 2;
        // let tmp = a;
        // a = b;
        // b = tmp;
        [a, b] = [b, a];
        console.log(a); //2
        console.log(b); //1

6.2 从函数中返回多个值

        function fn() {
            return [1, 2, 3];
        }
        let [a, b, c] = fn();
        console.log([a, b, c]);
            // console.log(a);
            // console.log(b);
            // console.log(c);

        function fn2() {
            return {
                name: "yasuo",
                age: "25"
            }
        }
        let {name,age} = fn2();
        console.log({name,age});
        // console.log(name);
        // console.log(age);

6.3 函数参数的定义

function fn({a,b,c}){
    console.log(a);
    console.log(b);
    console.log(c);
}
fn({c:3,b:2,a:1})