zoukankan      html  css  js  c++  java
  • [ES6] 09. Destructuring Assignment -- 2

    Read More: http://es6.ruanyifeng.com/#docs/destructuring

    Array

    “模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值:

    Exp 1:

    var [head, ...tail] = [1, 2, 3, 4];
    console.log(head); // 1
    console.log(tail);  // [2, 3, 4]

    Exp 2:

    var [foo, [[bar], baz]] = [1, [[2], 3]];
    foo // 1
    bar // 2
    baz // 3

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

    var [foo] = false;  
    console.log(foo); // undefined
    
    var [foo] = [false];
    console.log(foo); // false

    另一种情况是不完全解构:

    var [x, y] = [1, 2, 3]; 
    console.log(x); // 1
    console.log(y); // 2

    解构只能用于数组或对象, 对undefined或null进行解构,会报错:

    // 报错
    var [foo] = undefined;
    var [foo] = null;

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

    [x, y='b'] = ['a'] // x='a', y='b'

    Object

    var o = {
      p: [
        "Hello",
        { y: "World" }
      ]
    };
    
    var { p: [x, { y }] } = o;
    x // "Hello"
    y // "World"

    如果要将一个已经声明的变量用于解构赋值,必须非常小心:

    // 错误的写法
    
    var x;
    {x} = {x:1};
    // SyntaxError: syntax error

    上面代码的写法会报错,因为JavaScript引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免JavaScript将其解释为代码块,才能解决这个问题。

    // 正确的写法
    
    ({x}) = {x:1};
    // 或者
    ({x} = {x:1});
  • 相关阅读:
    Active Report 3 生成图表
    js asp.net enable/disable validator
    [.net] 如何在mail的加入正文显示图片
    [javascript] 得到 javascript 的当前文件名
    Colorful Stones
    Jam的计数法

    Beautiful Matrix
    能量项链
    Maxim and Discounts
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4111902.html
Copyright © 2011-2022 走看看