美文网首页
变量的解构赋值

变量的解构赋值

作者: 烟火粲然 | 来源:发表于2018-10-18 16:19 被阅读0次

    1、ES6 允许写成下面这样。可以从数组中提取值,按照对应位置,对变量赋值。

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

    2、本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

    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 // []
    

    3、解构不成功,变量的值就等于undefined。

    let [foo] = [];
    let [bar, foo] = [1];
    foo的值都为undefined
    

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

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

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

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

    6、默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

    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: y is not defined
    

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

    2、对象的解构赋值

    解构不仅可以用于数组,还可以用于对象。
    对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

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

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

    let { foo: baz } = { foo: 'aaa', bar: 'bbb' };//foo: baz把foo的值赋给baz
    baz // "aaa"
    
    let obj = { first: 'hello', last: 'world' };
    let { first: f, last: l } = obj;//把first的值赋给f,把last的值赋给l
    f // 'hello'
    l // 'world'
    
    let { foo: baz } = { foo: "aaa", bar: "bbb" };
    baz // "aaa"
    foo // error: foo is not defined
    

    上面代码中,foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo。

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

    第一个p是变量,第二个p是模式,x,y是变量

    函数参数结构赋值

    函数的参数也可以使用解构赋值。

    function add([x, y]){
      return x + y;
    }
    
    add([1, 2]); // 3
    

    .map遍历前面的数组

    [[1, 2], [3, 4]].map(([a, b]) => a + b);
    // [ 3, 7 ]
    

    undefined就会触发函数参数的默认值。

    [1, undefined, 3].map((x = 'yes') => x);
    // [ 1, 'yes', 3 ]
    

    相关文章

      网友评论

          本文标题:变量的解构赋值

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