解构赋值

1、数组的解构赋值

定义：ES6允许按照一定模式，从数组和对象中提取值，对对象进行赋值，被称为解构赋值。

基本用法

以前赋值的方式：

let a = 1;
let b = 2;
let c = 3;

而在es6中：

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

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

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

默认值

解构赋值允许指定默认值

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

2、对象的解构赋值

解构不仅可以用于数组，还可以用于对象。

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

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

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

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

3、字符串的解构赋值

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

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

用途

（1）交换变量的值

let x=1;
let y =2;
[x,y]=[y,x]

上面代码可以交换变量x和y的值。

（2）从函数返回多个值

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

// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象

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

（3）函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

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

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

（4）提取json数据

解构赋值对提取 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] 

（5）输入模块的指定方法

加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

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