ES6解构赋值

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

  • 解构赋值允许指定默认值,如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined,如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值;
  • 默认值可以引用解构赋值的其他变量,但该变量必须已经声明;
  • 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值;
  • 对象的解构赋值是下面形式的简写
    let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

    对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者;

  • 如果要将一个已经声明的变量用于解构赋值,必须非常小心
    // 错误的写法
    let x;
    {x} = {x: 1};
    // SyntaxError: syntax error

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

    // 正确的写法
    let x;
    ({x} = {x: 1});
  • 字符串的解构赋值:字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象
    const [a, b, c, d, e] = 'hello';
    a // "h"
    b // "e"
    c // "l"
    d // "l"
    e // "o"

    类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。

    let {length : len} = 'hello';
    len // 5

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

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

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

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

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

用途

  • 交换变量的值
  • 从函数返回多个值
  • 函数参数的定义
  • 提取 JSON 数据
  • 函数参数的默认值
  • 遍历 Map 结构
  • 输入模块的指定方法
    const { SourceMapConsumer, SourceNode } = require("source-map");