ES6----变量的解构赋值

1、基本用法

解构赋值：ES6允许按照一定模式将数组和对象中的值按照一定顺序提取出来，对变量进行赋值。其本质是“匹配模式”，只要等号两侧模式相同，变量就会赋予对应的值。

//ES5
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 [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

如果结构不成功，变量值则会是undefined，解构赋值还有一种不完全解构模式，即等号右边只能匹配到左边的一部分，这种情况依然可以赋值成功。

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

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" };
baz // "aaa"
foo // error: foo is not defined

从上面的例子可以看出来对象的解构赋值是先找到同属性名，然后再赋值，真正赋值的是变量。上面例子中foo为匹配模式，baz才是变量。

3、字符串的解构赋值

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

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

4、常用方法

变量值的交换

let x = 1;
let y = 2;

[x, y] = [y, x];

JSON数据提取

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

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

console.log(id, status, number);
// 42, "OK", [867, 5309]

函数参数的定义

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

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

输入模块的指定方法

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