解构赋值 —— ES6新语法学习心得

Posted 2020-08-22 唐小青

## 3.解构赋值 ##
    
   作用：将数组、对象、函数的参数 解构，对变量进行赋值，可以直接调用该变量，大大提高效率  
        
    ## 例 1： ##  标准模式的解构赋值

      var [a,b,c]=[1,2,3]
      console.log(a) //1
      console.log(b) //2
      console.log(c) //3

    ## 例2 ： ##  嵌套解构赋值，只要"模式匹配"，就能解构赋值，如果没有对应的值，就是undefined
       
        let [foo, [[bar], baz]] = [1, [[2], 3]];
        foo // 1
        bar // 2
        baz // 3
        
        let [ , , third] = ["foo", "bar", "baz"];
        third // "baz"
        
        let [x, , y] = [1, 2, 3];
        x // 1
        y // 3
        
        let [head, ...tail] = [1, 2, 3, 4];
        head // 1
        tail // [2, 3, 4]

    .../tail是reset ，将后面超出部分存为数组           

        let [x, y, ...z] = [‘a‘];
        x // "a"
        y // undefined
        z // []
      
    ##  例 3 ： 解构赋值允许设置默认值，当没有对应值，则启动默认值 ##

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

     ※ 被解构的数组只有1对应a,b和c没有对应项，所以启用默认值 3、5

        [x, y = ‘b‘] = [‘a‘, undefined] // x=‘a‘, y=‘b‘ 

        [x, y = ‘b‘] = [‘a‘, ‘‘] // x=‘a‘, y=‘‘

     ※ ES6内匹配是‘===‘严格相等模式，空字符串‘‘和undefined 不相等！

        function fn(){
           console.log(10)   
                 //这个10在需要给b启用默认值时候才会打印，程序执行时不打印
           return 1
        }

        let [a = 3, b = fn()] = [];
        console.log(a)  // 3
        console.log(b)  // 1
    
     ※ 如果一个默认值是一个表达式，则只会在需要启动默认值的时候才进行运算


  对象的结构赋值
     
     对象也可以解构赋值，原则：

       1.数组元素要求按顺序一一对应赋值，对象不要求，按无序赋值
       2.对象被赋值的变量名必须与对象属性名一致
       3.如果不一致，需要采用‘模式‘对应写法


   例1：对象结构赋值形式
      
       var {
            b, a，c
        } = {
            a:100,
            b:200
        }

        console.log(a)  // 100
        console.log(b)  // 200
        console.log(c)  // undefined
       
        对象结构不要求顺序一一对应，但要求属性名一一对象，如果没有就是undefined

   例 2：对象的‘模式‘匹配
     
       var {   a:num1,
               b:num2
            } = {
               a:100,
               b:200 
        }
        console.log(num1)  //100
        console.log(num2)  //200
        console.log(a)  //a is not defined
        console.log(b)  //b is not defined

        注意，对象结构赋值时，a,b是模式，对应被结构对象的a和b，被赋值的变量是num1和num2

        var node = {
                  loc: {
                    start: {
                      line: 1,
                      column: 5
                    }
                  }
                };

        var { loc: { start: { line }} } = node;
        line // 1
        loc  // error: loc is undefined
        start // error: start is undefined
      
        只有line是变量，会被赋值

   例 3：对象的嵌套解构赋值

        var obj = {};
        var arr = [];
         ({
            obj:obj.app,
            arr:arr[0]} = {
            obj:‘hello‘,
            arr:0
        }) //这里要加括号，我也不知道为什么

        console.log(obj.app)  //‘hello‘
        console.log(arr[0])  // 0 
   
   例 4：对象可以设默认值
        
        var {
            a = 100,
            b : c = 200,
        } = {}

        console.log(a)  //100
        console.log(b)  //b is not defined
        console.log(c)  //200


## 函数参数的解构赋值 ##
    
    是对参数的解构赋值！
         
   例 1：参数是数组
           
        function fn([a,b]){
             return a+b   //这里对参数解构赋值
        } 
        console.log(fn([1,2]))  //3

   例 2 ：参数是对象 

        function fn({a,b}){
             return a+b   //这里对参数解构赋值
        } 
        console.log(fn({a:1,b:2}))  //3

   例 3：参数也可以设置默认值

        function fn({a = 3,b = 5}={}){    
             return a+b   
        } 
        console.log(fn())  //8

        //fn()调用没有传参数，启动默认值{},空对象对前面的{a = 3,b = 5}解构，启动默认值，所以结果为8

## 解构赋值运用场景 ##

（1）交换变量的值

```
var x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y)
```
（2）从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

```
// 返回一个数组

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

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
var { foo, bar } = example();
```

（3）函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

```
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3])

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1})
```

（4）提取JSON数据

解构赋值对提取JSON对象中的数据，尤其有用。

```
var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
}

let { id, status, data } = jsonData;

console.log(id, status, data)
```

（5）函数参数的默认值
```
function add([a = 0, b = 0] = []) {
    return a + b;
}
console.log(add());
```

（6）遍历Map结构

```
var map = new Map();
map.set(‘first‘, ‘hello‘);
map.set(‘second‘, ‘world‘);

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world
```

如果只想获取键名，或者只想获取键值，可以写成下面这样。

```
// 获取键名
for (let [key] of map) {
  // ...
}

// 获取键值
for (let [,value] of map) {
  // ...
}
```

（7）输入模块的指定方法

加载模块时，往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。

```
const { SourceMapConsumer, SourceNode } = require("source-map");
```