es6语法解构赋值以及解构赋值作用

1、对对象的解构

 let person = {
                name: 'xiaoliang',
                age: 18,
                hobby: 'sing'
            }
            // es5
            // let name = person.name;
            // let age = person.age;

es6

  let {
            // name,不完全解构
            age,
            hobby,
        } = person
        console.log(age, hobby);
        let {
            name,
            ...res //剩余参数
        } = person
        console.log(res); // 用对象包裹起来了


 //默认值
        let {
            a,
            b = 20
        } = {
            a: 30
        }
        console.log(a);

2、对数组的解构

 let arr = [1, 2, 3];
        let [m, n] = arr;
        console.log(m, n);
        // 可嵌套
        let [i, [j, l],
            [k]
        ] = [1, [2, 5],
            [3]
        ]
        console.log(i, j, l, k);

3、作用

1) 交换变量值更加方便

 let [x, y] = [1, 2];

        [y, x] = [x, y];

        console.log(x);//2

        console.log(y);//1

2)函数可以返回多个值

之前函数只能返回一个值

function obj() {

            return [1, 2, 3];

        }

        console.log(obj());//(3)[1,2,3]

        let [o, p, q] = obj();

        console.log(o);//1

        console.log(p);//2

        console.log(q);//3

3）函数的参数

有序的参数

function f([x,y,z]){ console.log([x,y,z]) } f([1,2,3]);

无序的参数

//参数可以无次序传参 function f({x,y,z}){...} f({y:2,x:1,z:3})

原理在于解构赋值可以将一组参数与变量名对应起来