ECMAScript 6(ES6)——解构赋值

解构赋值

解构赋值：从数组或对象或者说是可以遍历的物件中的提取值, 而后对变量进行赋值。

前沿：我们先来看看没有结构赋值前的例子

            var arr = [1, 2, 3, 4, 5, 6];
			var a = arr[0];
			var b = arr[1];
			var c = arr[2];
			var d = arr[3];
			var f = arr[4];
			var g = arr[5];

这样赋值是不是很麻烦呢？但ES6给我们提供了一种办法，如下：

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

注意点：
1.使用解构赋值，将会使等效的代码变得更加简洁并且可读性更高；
2.本质上，解构赋值属于一种“模式匹配”、“映射关系”；
3.只要等号两边的模式相同，一一对应，左边的变量就会被赋予右边对应的值。

延伸一下

当左边数组中没有找到右边数组中对应值，则解构不尽人意：

            let [x, y, z] = [1, 2];
			console.log(x);  // 1
			console.log(y); // 2
			console.log(z); //undefined

此时我们可以这么做，给给解构的对象设置一个默认值：

           let [x = 'a', y = 'a', z = 'a'] = ['a', 'b'];
            console.log(x); // 'a' 三个参数都有设置默认值a,有传'a' ，所以x='a' 
			console.log(y); // 'b' 默认值会被传入的覆盖
			console.log(z); // 'c' 没有传入会使用默认值

一、数组的解构赋值

(1).数组解构赋值特点:

1.根据数组数据的下标，有次序的赋值；
2.只要等号两边模式一致，左边变量即可获取右边对应位置的值。

           let [a,b,c,d,e,f] = [1,2,3,4,5,6];

(2).嵌套数组解构:

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

只要结构一样，就能够非常迅速的获取二维数组、三维数组，甚至多维数组中的值；

（3）不需要匹配的位置可以置空：

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

（4）使用省略号…扩展运算符， 可以匹配余下的所以值， 自动形成一个数组：

          var [a, b, ...c] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
			console.log(a); //1
			console.log(b); //2
			console.log(c); //[3,4,5,6,7,8,9]

二、对象的解构赋值

(1).对象的解构赋值特点:

1.数组的元素是按次序排列的，变量的取值由它的位置决定；
2.对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

           let { a, b } = { a : 1, c : 2 };
           console.log(a); // 1
           console.log(b); // undefined

(2).对任意深度的嵌套对象进行解构:

          let obj= {
                    arr: [1,{ a: 2 } ]
                   };
			let { arr: [x, { y}] } = obj;
			console.log(x); // 1
			console.log(y); // 2

（3）自定义属性名称：

          var {name, id: ID} = { name: 'jack', id: 1  };
			console.log(ID); //1
			console.log(id); // Uncaught ReferenceError: id is not defined

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量;真正被赋值的是后者。

三、字符串解构

用法：

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

四、数值和布尔值的解构赋值

(1).数值和布尔值的解构赋值特点:

1.只要等号右边的值不是对象或数组，就先将其转为对象。
2.如果转换之后的对象或原对象拥有Iterator接口，则可以进行解构赋值， 否则会报错。
3.null或undefined不能转换成此类对象

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

在这里要特别说明一下，当这个应用到数据交互的时候，后台传来的是undefined，我们可以给它一个默认值：

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

但会发现，当后台传来的是null的时候：

      let [a, b, c, d='暂无数据'] = [1, 2, 3, null];
       console.log(a, b, c, d, e);//1 2 3 null 

无法显示默认值，这是因为浏览器是把null当做一个空对象来看待！
处理方式就是做个判断，如果等于null的时候给个自定义的值。

五、圆括号的用法

如果在解构之前就已经定义了对象：

           let obj;
           {obj}={obj:'James'};//报错

原因：

大括号{}位于行首，JS引擎 就会认为 { obj } 是一个代码块，所以等 号就出问题了。

解决方式：

           let obj;
           ({obj}={obj:'James'});//再包裹一层括号（）

括号的出现，让整个解构赋值的结构被看做一个代码块，而内部的 { obj } 模式则可以正常匹配到。