zoukankan      html  css  js  c++  java
  • es6的解构赋值学习(1)

      相对es5的简单的“=”赋值来说,es6增加了一种新的赋值模式——解构赋值,按照它的规则,可以从数组和对象中提取值来对变量进行赋值,个人觉得方便了很多,但是这个模式有点恶心人,相比简单的“=”赋值来说,也更要花时间来理解,今天我们一起学习一下这个新的赋值方法。

      看一行代码:

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

      这是一种最基本的数组解构赋值,等同于:

    var a = 1;
    var b = 2;
    var c = 3;

      相当于两边都是数组,它们的length相同,左边放变量,右边放值,一一对应,省了不少代码

      如果length不同的话,会有两种情况:

      

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

      第一种:左边的length小于右边的,叫做不完全解构,变量都可以赋值成功,多余的值就多余了;

      第二种:左边的length大于右边的,未超出的部分会正常解构并赋值,超出的变量在右边没有匹配的值,则解构失败,值定位undefined;

      那如果两边的类型不同,举个栗子:一边是数组,另一边是非数组,则会报错,借用阮大神的话:

    // 报错
    let [foo] = 1;
    let [foo] = false;
    let [foo] = NaN;
    let [foo] = undefined;
    let [foo] = null;
    let [foo] = {};
    
    //上面的语句都会报错,因为等号右边的值,要么转为对象以后不具备 
    //Iterator 接口(前五个表达式),要么本身就不具备 Iterator 接口(最后一
    //个表达式)。

      es6中还有默认值的概念,解构赋值也允许指定默认值:

    let [foo = true] = [];
    foo // true
    
    let [x, y = 'b'] = ['a']; // x='a', y='b'
    let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

      我们可以看到,两边数组的length并不同,也没有赋值,但可以正常输出,是因为在声明变量时,给了变量一个默认值,若没有用其他方式给该变量赋值的话,则使用默认值,es6判断使用默认值的情况是给出了该位置的值为undefined(未给任何值的话默认是undefined)且必须“===”undefined,才会使用默认值:

    let [x = 1] = [undefined];
    x // 1
    
    let [x = 1] = [null];
    x // null

      上面的代码可以这样理解:

    let x;
    if ([undefined][0] === undefined) {
      x = 1;
    } else {
      x = [undefined][0];
    }
    
    
    let x;
    if ([null][0] === undefined) {
      x = 1;
    } else {
      x = [null][0];
    }

      然后在变量数量多的情况下,可以引用解构赋值的其他变量,但该变量必须已经声明,且有一个顺序:后面的可以使用前面的,反之不可:

    let [x = 1, y = x] = [];     // x=1; y=1
    let [x = 1, y = x] = [2];    // x=2; y=2
    let [x = 1, y = x] = [1, 2]; // x=1; y=2
    let [x = y, y = 1] = [];     // ReferenceError
    let [x = y, y = 1] = [2];     // x=2,y=1

      今天就写到这里吧,数组的解构赋值也差不多了,希望能给大家一点帮助,以后我会边学边整理随笔,大家一起进步。(感谢阮一峰大神的经验)

       

      

  • 相关阅读:
    JavaWeb项目自动部署,持续集成
    hbase系列
    传输视频的带宽如何计算?传输4K视频需要多少带宽?
    TSINGSEE青犀视频通过Webrtc编译android版本找不到gzip模块如何处理?
    TSINGSEE青犀视频webrtc相关内容编译如何在c++端编码出H264?
    视频组网/网络穿透工具EasyNTS如何永久删除其中某个设备?
    音视频流媒体平台的开发,开源EasyDarwin为什么如此受欢迎?
    基于音视频的云会议为什么会迎来发展的大爆发?
    EasyRTC的Web开发过程中如何创建新的空分支?
    C# 会话,进程,线程,线程安全
  • 原文地址:https://www.cnblogs.com/dadSheng/p/6439056.html
Copyright © 2011-2022 走看看