美文网首页
达摩碎碎念--ES6解构赋值

达摩碎碎念--ES6解构赋值

作者: 达摩会武术 | 来源:发表于2019-03-07 15:12 被阅读0次

    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。
    本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

    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]
    
    let [x, y, ...z] = ['a'];
    x // "a"
    y // undefined
    z // []
    

    如果解构不成功,变量的值就等于undefined。

    let [foo] = [];
    let [bar, foo] = [1];
    

    以上两种情况都属于解构不成功,foo的值都会等于undefined。


    注意下方高能:
    如果等号的右边不是数组(或者严格地说,不是可遍历的结构)那么将会报错。

    // 报错
    let [foo] = 1;
    let [foo] = false;
    let [foo] = NaN;
    let [foo] = undefined;
    let [foo] = null;
    let [foo] = {};
    

    上面的语句都会报错,因为等号右边的值,要么转为对象以后不具备 Iterator 接口(前五个表达式),要么本身就不具备 Iterator 接口(最后一个表达式)。


    对于 Set 结构,也可以使用数组的解构赋值。

    let [x, y, z] = new Set(['a', 'b', 'c']);
    x // "a"
    

    事实上,只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值。

    function* fibs() {
      let a = 0;
      let b = 1;
      while (true) {
        yield a;
        [a, b] = [b, a + b];
      }
    }
    
    let [first, second, third, fourth, fifth, sixth] = fibs();
    sixth // 5
    

    上面代码中,fibs是一个 Generator 函数(参见《Generator 函数》一章),原生具有 Iterator 接口。解构赋值会依次从这个接口获取值。


    p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写成下面这样。

    let obj = {
      p: [
        'Hello',
        { y: 'World' }
      ]
    };
    
    let { p, p: [x, { y }] } = obj;
    x // "Hello"
    y // "World"
    p // ["Hello", {y: "World"}]
    

    相关文章

      网友评论

          本文标题:达摩碎碎念--ES6解构赋值

          本文链接:https://www.haomeiwen.com/subject/kpdksqtx.html