ES6 变量的解构赋值

什么是解构赋值？

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

// MDN官方
let a, b, rest;
[a, b] = [10, 20];
console.log(a);
// expected output: 10
console.log(b);
// expected output: 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// expected output: Array [30,40,50]

数组的解构赋值

// 解构成功
let [a, b, c] = [1, 2, 3];  a 1,b 2,c 3
let [foo, [[bar], baz]] = [1, [[2，4], 3]];   // foo 1,bar 2,baz 3
let [ , , third] = ["foo", "bar", "baz"];   // third "baz"
let [head, ...tail] = [1, 2, 3, 4];   // head 1,tail [2,3,4]
// 解构失败
let [foo] = [];  // foo undefined
let [bar, foo] = [1];  // foo undefined
// 只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。反之解构失败
// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {
    };
// 允许默认值
let [a,b=2] = [1]   // a = 1,b = 2
let [x = f()] = [1];  // 默认值是表达式，表达式是惰性求值的，只有用到才会求值。
// 默认值可以引用解构赋值的其他变量，但该变量必须已经声明。
let [x = 1, y = x] = [];     // x=1; y=1

对象的解构赋值

// 数组解构依赖于顺序，但是对象解构依赖于key,下面二者等价，解构失败的为undefined
let {
     foo, bar } = {
     foo: 'aaa', bar: 'bbb' };
let {
     foo, bar } = {
     bar: 'bbb', foo: 'aaa' };
// 嵌套对象的解构
let obj = {
    
  p: [
    'Hello',
    {
     y: 'World' }
  ]
};

let {
     p, p: [x, {
     y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

const node = {
    
  loc: {
    
    start: {
    
      line: 1,
      column: 5
    }
  }
};

let {
     loc, loc: {
     start }, loc: {
     start: {
     line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

字符串的解构赋值

const [a, b, c, d, e] = 'hello';

函数参数解构

function add([x, y]){
    
  return x + y;
}
add([1, 2]); // 3

[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]

不能使用圆括号的情况

// 变量声明语句 全部报错
let [(a)] = [1];
let {
    x: (c)} = {
    };
let ({
    x: c}) = {
    };
let {
    (x: c)} = {
    };
let {
    (x): c} = {
    };
let {
     o: ({
     p: p }) } = {
     o: {
     p: 2 } };
// 函数参数
// 报错
function f([(z)]) {
     return z; }
// 报错
function f([z,(x)]) {
     return x; }
// 赋值语句
({
     p: a }) = {
     p: 42 };
([a]) = [5];
// 总之，只要有解构歧义的可能，就不要带（）。

// 赋值语句的非模式部分，可以使用圆括号。
[(b)] = [3]; // 正确
({
     p: (d) } = {
    }); // 正确
[(parseInt.prop)] = [3]; // 正确

解构用途

// 交换变量的值 类似python语法了
let x = 1;
let y = 2;
[x, y] = [y, x];
// 从函数返回多个值
// 返回一个数组

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;
// 函数参数的默认值
jQuery.ajax = function (url, {
    
  async = true,
  beforeSend = function () {
    },
  cache = true,
  complete = function () {
    },
  crossDomain = false,
  global = true,
  // ... more config
} = {
    }) {
    
  // ... do stuff
};
// 遍历Map
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
    
  console.log(key + " is " + value);
}
// first is hello
// second is world

//引入模块的指定方法
const {
     SourceMapConsumer, SourceNode } = require("source-map");
import {
    x,xx,xxx}  from 'xx' 

参考：

1. 阮一峰老师《ES6标准入门 第三版》
2. MDN Destructuring assignment