JavaScript解构赋值(代码说明ES6数组, 对象, 函数的解构赋值)

解构赋值

es6为我们对变量赋值提供了新的方式.

---

方式1 :

        //ES5
        var a = 1;
        var b = 2;
        var c = 3;
        //这是在es6之前的赋值方式
        
        //ES6
        var [a,b,c] = [1,2,3];
        console.log(a,b,c);
        //变量会分别辅助到a,b,c中去, 因此输出结果为1,2,3;
        
		const arr = ['a', 'b', 'c'];
		const [name1, name2, name3] = arr;
		//当然对于const, 和let的解构赋值也是可以的;
		console.log(name1);
		console.log(name2);
		console.log(name3);

---

方式2 :
本质是上述匹配属于一种模式匹配, 也就是只要等号两边的模式相同，左边的变量就会被赋予对应的值。

        let [foo,[[bar],baz]] = [1,[[2],3]]; 
        console.log(foo,bar,baz);
		//输出, 1 2 3
		
        let [x,,y] = [1,2,3];
        let [head,...tail] = [1,2,3,4,5];
         // ...tail 把后续元素当成数组 如果 没有后续元素那么就是空数组。
        let [a,b,...z] = ['a'];
        
        console.log(x,y);
        //输出, 1 3
        console.log(head,tail);
        //输出, 1 Array(4)
        console.log(a,b,z);
        //输出, a undefined Array(0)

如下情况会报错 右边不是数组（或者严格地说，不是可遍历的结构）

        let [foo] = 1;
        let [foo] = false;
        let [foo] = NaN;
        let [foo] = undefined;
        let [foo] = null;
        let [foo] = {};

---

方式3:

默认赋值
只有右侧的值严格等于undefined的时候才生效。

       var [foo = true] = [];
       console.log(foo);//true
       var [x1, y1 = 'b'] = ['a'];
       console.log(x1,y1);//a, b
       var [x2, y2 = 'b'] = ['a',undefined];
       console.log(x2,y2);//a, b
       
       //null 不等于undefined 所以不生效
       var [x3 = 1] = [null];
       console.log(x3);//null

---

方式4:

惰性求值 只有在用到的时候，才会求值

       function f () {
        return 'aaa';
       }
       let [x1 = f()] = [1];
       let [x2 = f()] = [];
       console.log(x1);//1
       console.log(x2);//aaa

默认赋值规则

默认赋值可以应用解构赋值的其他变量
首先看右侧有无和左侧对应的值，没有的话看左侧从左到右解析

		let [x1 = 1, y1 = x1] = [];
        let [x2 = 1, y2 = x2] = [2];
        let [x3 = 1, y3 = x3] = [1,2];             
             
        console.log(x1,y1);//1 1
        console.log(x2,y2);//2 2
        console.log(x3,y3);//1 2

		let [x4 = y4, y4 = 1] = [];   --var 和 let 有区别 
        console.log(x4,y4);//报错, let不具有变量声明提前
		var [x4 = y4, y4 = 1] = [];   --var 和 let 有区别 
        console.log(x4,y4);//undefined 1

---

方式5:

对象的解构赋值

对象的解构赋值是按照属性名称决定的

        var {foo,bar} = {foo: 'aaa', bar: 'bbb'};
        console.log(foo);//输出aaa
        console.log(bar);//输出bbb
        var {baz} = {foo: 'aaa', bar: 'bbb'};
        console.log(baz);//输出undefined

**对象赋值注意: **一个已经声明的变量用于解构赋值 必须非常小心

       var x;
        // js引擎会将{x} 理解成一个代码块，从而发生语法错误。只有不将大括号写在行首可以避免这个问题
        //{x} = {x:1};     
        ({x} = {x:1});
        console.log(x);

同时对象的结构赋值, 也可以用于嵌套结构

		var obj = {
            p: [
                'hello',
                {y: 'world'}
            ]
        };
        var {p: [x, { y }] } = obj;

        console.log(x,y);//hello word

对象结构也可以自定默认值 默认生效条件和数组一样都是undefined

        var {z = 3} = {};
        console.log(z);//3  
        var {x, y = x} = {x:1};  
        console.log(x,y);//1 1

---

方式6:

字符串的解构赋值 字符串会转化成一个类数组的对象

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

类数组对象有length属性 所以len是5

        let {length : len} = 'hello';
        console.log(len);//5

---

方式7:
函数参数的解构赋值
函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被结构成变量 x 和 y

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

---

练习

巩固一下上面的知识

		function move({x = 0,y = 0} = {}) {
            console.log([x,y]);
        }
        move({x:3,y:8});//3, 8
        move({x:3});//3, 0
        move({});//0, 0
        move();//0, 0



        function deal({x,y} = {x: 0 , y: 0}) {
            console.log([x,y]);
        }
        deal({x: 3,y: 8});//3, 8
        deal({x: 3});//3, undefined
        deal({});//undefined undefined
        deal();//0 0

---

解构赋值用途

下面简单举例说明一下解构赋值的用途
1.交换变量

        var x = 1;
        var y = 2;
        [x, y] = [y, x];       
        console.log(x, y);//2 1

2.从函数返回多个值

        function example () {
            return [1,2,3];
        }        
        var [a, b, c] = example();//1 2 3

3.函数参数的定义

        function f2({x,y,z}) {
            console.log(x,y,z);//2 1 3
        }        
        f2({z:3,x:2,y:1});

4.提交json数据

      var jsonData= {
            id: 42,
            status: 'ok',
            data:[888,999]            
        }
        let {id,status,data:number} = jsonData;
        console.log(id, status,number);//42 ok [888, 999]