ES6的高级赋值方法——解构赋值

概述

解构赋值时对赋值运算符的扩展，是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值，在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

简单来说，解构赋值就是解析数据源，然后按照数据模型进行取值，再赋值给变量。

拆开来看，解构：按照数据模型取出数据源中的数据      赋值：然后赋值给模型变量

数据模型中，解构的是对象中最小一层的单位。

写法：

变量修饰符  数据模型=数据源

通过代码具体说明：

<script>
    //对于对象
    let {a,b,c}=obj
    /*隐式操作
        let a=obj.a;
        let b=obj.b;
        let c=obj.c;
    */

    //对于数组
    let [a,b,c]=arr
    /*
        隐式操作
    let a=arr[0];
    let b=arr[1];
    let c=arr[c];
    */
</script>

看到这里大家应该对结构赋值有了一定的了解，它是赋值的一种高级写法。

注意在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。如字符串

<script>
    let [a, b, c, d, e] = 'world';
    console.log(a, b, c, d, e); //w o r l d
</script>

加大难度(存在默认值的情况)

<script>
            var [name,{age}]=arr;
			//隐式操作:
             var name=arr[0]
			var age=arr[1].age

            //当存在默认值时
            let arr=[{age:20,name1:"karen"}]
			let [{age,name1="jack"}]=arr
			//var age=arr[0].age
             //隐式操作
			//var name1=arr[0].name1 //新值覆盖旧值
			console.log(age,name1) //20  karen

			 //但是当解析数据源，匹配结果为undefined时，会保存默认值
             let arr=[{age:20,name1:undefined}]
			let [{age,name1="jack"}]=arr
            //隐式操作
			//var age=arr[0].age
			//var name1=arr[0].name1 
			console.log(age,name1) //20  jack
</script>

再举一个简单的例子

let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

1. a 与 b 匹配结果为 undefined ，触发默认值：a = 3; b = a =3

2. a 正常解构赋值，匹配结果：a = 1，b 匹配结果 undefined ，触发默认值：b = a =1

3. a 与 b 正常解构赋值，匹配结果：a = 1，b = 2