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


    ## 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");
    ```

  • 相关阅读:
    添加外部文件夹代码文件到项目中使用
    在.NET Core console application中使用User Secrets(用户机密)
    RBAC用户特别授权的思考
    Service Fabric部署笔记
    ubuntu12.04 rvm 搭建 Ruby on Rails
    thinkphp 查询当天 ,本周,本月,本季度,本年度,全部, 数据方法
    php 计算该用户IP在网页停留的时间
    ubuntu下安装sublime text2
    快速找到php方法-------php 反射。。
    QQ快速登录
  • 原文地址:https://www.cnblogs.com/luowen075/p/6161014.html
Copyright © 2020-2023  润新知