ES6语法之解构赋值

原始操作

我们先看看下面的两个代码段，它们使用 ES6 之前的技巧提取数据：

const point = [10, 25, -34];

const x = point[0];
const y = point[1];
const z = point[2];

console.log(x, y, z);   //10 25 -34

上述示例显示了从数组中提取值的过程。

const gemstone = {
  type: 'quartz',
  color: 'rose',
  karat: 21.29
};

const type = gemstone.type;
const color = gemstone.color;
const karat = gemstone.karat;

console.log(type, color, karat);  //quartz rose 21.29

该示例显示了从对象中提取值的过程。

二者都很简单，但是这两个示例都没用到解构。

那么解构到底是什么？

解构

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

解构数组中的值

const point = [10, 25, -34];

const [x, y, z] = point;

console.log(x, y, z); //10 25 -34

在此示例中，方括号 [ ] 表示被解构的数组，x、y 和 z 表示要将数组中的值存储在其中的变量。注意，你不需要指定要从中提取值的索引，因为索引可以暗示出来。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

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

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

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

let [bar, foo] = [1]; // foo: undefined

解构对象中的值

const gemstone = {
  type: 'quartz',
  color: 'rose',
  karat: 21.29
};

const {type, color, karat} = gemstone;

console.log(type, color, karat);

在此示例中，花括号 { } 表示被解构的对象，type、color 和 karat 表示要将对象中的属性存储到其中的变量。注意不用指定要从其中提取值的属性。因为 gemstone 具有 type 属性，值自动存储在 type 变量中。类似地，gemstone 具有 color 属性，因此 color 的值自动存储在 color 变量中。

你还可以指定在解构对象时要选择的值。例如，let {color} = gemstone; 将仅选择 gemstone 对象中的 color 属性。

注意：对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

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

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

//foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

这实际上说明，对象的解构赋值是下面形式的简写:

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

字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

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

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

默认值

解构赋值允许指定默认值, 当结构不成功时, 使用默认值。

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

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

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

在函数参数中指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。

用途

变量的解构赋值用途很多。

交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x]; //x: 2,  y: 1

从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

函数参数的定义

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

提取 JSON 数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);

上面代码可以快速提取 JSON 数据的值。

输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");