zoukankan      html  css  js  c++  java
  • 变量的结构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解耦;

    1 数组的解耦赋值

    以前,为变量赋值,只能直接指定值。

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

    ES6允许写成下面这样。

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

    上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。

    这种写法属于‘模式匹配’,只要等号两边的模式相同,左边的变量就会被赋予对应的值。

    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

    如果等号的右边不是数组(或者严格地说,不是可遍历的结构,参见《Iterator》一章),那么将会报错。

    // 报错
    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 接口,都可以采用数组形式的解构赋值。

    默认值 

    解构赋值允许指定默认值。

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

    注意,ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,如果一个数组成员不严格等于undefined,默认值是不会生效的。

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

    上面代码中,如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined

    如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。

    function f() {
      console.log('aaa');
    }
    
    let [x = f()] = [1];

    上面代码中,因为x能取到值,所以函数f根本不会执行。上面的代码其实等价于下面的代码。

    let x;
    if ([1][0] === undefined) {
      x = f();
    } else {
      x = [1][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

    上面最后一个表达式之所以会报错,是因为x用到默认值y时,y还没有声明。

    对象的解构赋值

    解构不仅可以用于数组,还可以用于对象。

    let { foo, bar } = { foo: "aaa", bar: "bbb" };
    foo // "aaa"
    bar // "bbb"
    

    对象的解构与数组有一个重要的不同。

    数组的元素是按次序排列的,

    变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

    如果变量名与属性名不一致,必须写成下面这样。

    var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
    baz // "aaa"
    
    let obj = { first: 'hello', last: 'world' };
    let { first: f, last: l } = obj;
    f // 'hello'
    l // 'world'

    这实际上说明,对象的解构赋值是下面形式的简写(参见《对象的扩展》一章)。

    let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
    let foo;
    ({foo} = {foo: 1}); // 成功
    
    let baz;
    ({bar: baz} = {bar: 1}); // 成功

    上面代码中,let命令下面一行的圆括号是必须的,否则会报错。因为解析器会将起首的大括号,理解成一个代码块,而不是赋值语句。

    和数组一样,解构也可以用于嵌套结构的对象。

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

    注意,这时p是模式,不是变量,因此不会被赋值。

    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是变量,locstart都是模式,不会被赋值

    由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。

    let arr = [1, 2, 3];
    let {0 : first, [arr.length - 1] : last} = arr;
    first // 1
    last // 3

    上面代码对数组进行对象解构。数组arr0键对应的值是1[arr.length - 1]就是2键,对应的值是3。方括号这种写法,属于“属性名表达式”,参见《对象的扩展》一章。

    对象的属性名对应数组的下标

    函数参数的解构赋值

     4 数值和布尔值的解耦赋值

    解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。

    let {toString: s} = 123;
    s === Number.prototype.toString // true
    
    let {toString: s} = true;
    s === Boolean.prototype.toString // true

    上面代码中,数值和布尔值的包装对象都有toString属性,因此变量s都能取到值。

    解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefinednull无法转为对象,所以对它们进行解构赋值,都会报错。

    let { prop: x } = undefined; // TypeError
    let { prop: y } = null; // TypeError
  • 相关阅读:
    古谚、评论与论断、名篇与名言
    重读《西游记》
    重读《西游记》
    命名之法 —— 时间、季节、地点
    命名之法 —— 时间、季节、地点
    文言的理解 —— 古时的称谓、别称、别名
    文言的理解 —— 古时的称谓、别称、别名
    Oracle GoldenGate for Oracle 11g to PostgreSQL 9.2.4 Configuration
    瀑布 敏捷 文档
    POJ 1325 ZOJ 1364 最小覆盖点集
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/6933702.html
Copyright © 2011-2022 走看看