Destructuring

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

arrays

• arrays

  var [a, , , [b], c] = [5, ,null, [6]]; // a: 5, b: 6, c: undefined
  var [a, [[b], c]] = [1, [[2], 3]];  // 可以嵌套： a: 1, b: 2, c: 3

• string

  var [a, b, c] = 'ab';   //a: 'a', b: 'b', c: undefined
  // 对4个字节存储字符的支持
  var [a, b, c] = '𠮷𠮶'; // a: '𠮷', b: '𠮶', c: undefined

• generator

  var [a, b, c] = (function*() {yield 1; yield 2;}());  // a: 1, b: 2, c: undefined
  
  // generic iterables
  function __createIterableObject(arr, methods) {
      methods = methods || {};
      if (typeof Symbol !== 'function' || !Symbol.iterator) {
          return {};
      }
      arr.length++;
      var iterator = {
          next: function() {
              return { value: arr.shift(), done: arr.length <= 0 };
          },
          'return': methods['return'],
          'throw': methods['throw']
      };
      var iterable = {};
      iterable[Symbol.iterator] = function(){ return iterator; }
      return iterable;
  }
  var [a, b, c] = __createIterableObject([1, 2]);   // a: 1, b: 2, c: undefined
  var [a, b, c] = Object.create(__createIterableObject([1, 2]));   // a: 1, b: 2, c: undefined

• 解构完成时如果解构对象还未迭代完成, 则会自动调用iterator.return()方法;

  var iter = __createIterableObject([1, 2, 3], {
      'return': function(){ console.log('return called!'); return {}; }
  });
  var [a, b] = iter;

• 末尾的一个逗号会被忽略

  var iter = __createIterableObject([1, 2, 3], {
      'return': function(){ console.log('return called!'); return {}; }
  });
  var [a, b,,] = iter;    // return called!
  
  var iter = __createIterableObject([1, 2, 3], {
      'return': function(){ console.log('return called!'); return {}; }
  });
  var [a, b,,,] = iter;

• 默认值

  var [a, b, c = 3] = [1, 2];                 // a: 1, b: 2, c: 3
  var [a, b, c = a] = [1, 2, undefined];      // a: 1, b: 2, c: 1

  解构的值为undefined也会使用默认值

• 数组解构时：解构对象【转化后的对象】不具备Iterator接口，就会报错。eg. 1, false, NaN, undefined, null, {}

object

// object
var {c, x: d, e} = {c: 7, x: 8};

• default

  var {a, b = 2, c = 3} = {a: 1, b: undefined};    // a: 1, b: 2, c: 3

• 简单类型会先被装箱

  var {toFixed} = 2;
  var {slice} = '';
  toFixed === Number.prototype.toFixed;   // true
  slice === String.prototype.slice;       // true

• 可以解析原型链上的属性

  var {a} = Object.create({a: 1});    // a: 1

• 末尾的逗号会被忽略

  var {a,} = {a:1}; // a: 1

• 解构对象为null和undefined时会报类型错误

  var {a} = null;     // Uncaught TypeError: Cannot match against 'undefined' or 'null'.
  var {b} = undefined; 

• Computed propertiesc

  var qux = "corge";
  var { [qux]: grault } = { corge: "garply" };
  grault === "garply";

ohters

• array和object可相互嵌套

  var [e, {x:f, g}] = [9, {x:10}];
  var {h, x:[i]} = {h:11, x:[12]};
  e === 9 && f === 10 && g === undefined && h === 11 && i === 12;

解构触发点

• 声明

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

• 赋值

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

• for-in循环

  // var [i, j, k] = 'qux'
  for(var [i, j, k] in { qux: 1 }) {
      console.log(i === "q" && j === "u" && k === "x");
  }

• for-of循环

  // var [i, j, k] = [1, 2, 3];
  for(var [i, j, k] of [[1,2,3]]) {   
      console.log(i === 1 && j === 2 && k === 3);
  }

• catch语句

  try {
      throw [1,2];
  } catch([i,j]) {
      try {
          throw { k: 3, l: 4 };
      } catch({k, l}) {
          console.log(i === 1 && j === 2 && k === 3 && l === 4);
      }
  }

• 函数调用

  (function({a, x:b, y:e}, [c, d]) {
      return arguments[0].a === 1 && arguments[0].x === 2
          && !("y" in arguments[0]) && arguments[1] + '' === "3,4";
  }({a:1, x:2}, [3, 4]));
  
  new Function("{a, x:b, y:e}", "[c, d]",
      "return a === 1 && b === 2 && c === 3 && "
          + "d === 4 && e === undefined;"
  )({a:1, x:2}, [3, 4]);