ES6解构赋值（数组和对象，附带实例）

解构表示对数据结构进行分解，赋值指为变量赋值。在 ES6 中，允许按照一一对应的方式，从数组或对象中提取值，然后将提取出来的值赋给变量。

解构赋值的优点是它可以让编写的代码简洁易读，语义更加清晰，并且可以方便地从数组或对象中提取值。

ES6数组的解构赋值

ES6 以前，为变量赋值只能直接指定值。

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

ES6允许写成下面这样：

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

上面代码表示，可以从数组中提取值，按照对应位置对变量赋值。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

另一种情况是不完全解构，即等号左边的变量只匹配等号右边的部分数组。这种情况下，解构依然可以成功：

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

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

let [foo] = [];
let [bar, foo] = [1];

以上两种情况都属于解构不成功，foo 的值都会等于 undefined。

【实例】交换变量的值。

<script>
  let x = 1;
  let y = 2;
  console.log('交换前 x=' + x + '，y=' + y);
  [x, y] = [y, x];
  console.log('交换后 x=' + x + '，y=' + y);
</script>

第 5 行代码使用解构赋值交换变量 x 和 y 的值，这样的写法不仅简洁，而且易读，语义非常清晰。

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

【实例】提取函数返回的多个值。

<script>
  function example() {
    return [1, 2, 3];
  }
  let [a, b, c] = example();
  console.log(a, b, c);
</script>

第 5 行代码使用解构赋值取出函数返回的多个值。

ES6对象的解构赋值

对象的解构赋值，是先找到同名属性，然后赋给对应的变量。

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
console.log(foo); // "aaa"
console.log(bar); // "bbb"

在上面代码中，变量 foo 和 bar 分别取对象的属性 foo 和 bar 的值。

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

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
console.log(foo); // "aaa"
console.log(bar); // "bbb"

在上面代码中，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。

let { baz } = { foo: 'aaa', bar: 'bbb' };
console.log(bar); // undefined

在上面代码中，变量baz没有对应的同名属性，导致解构失败，取不到值，最后等于undefined。

【实例】提取JSON数据。

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

let { id, status, data } = jsonData;
console.log(id, status, data); // 42 "OK" [867, 5309]

第 7 行代码使用对象解构赋值，可以快速提取JSON数据的值。