ECMAScript 6（ES6） 特性概览和与ES5的比较9-解构分配

1.数组匹配

在解构中，将数组直观且灵活地解构为单个变量。
ECMAScript 6

var list= [ 1, 2, 3]
var [ a, , b ] = list//解构赋值
[ b, a ] = [ a, b ] //a b互换值

ECMAScript 5

var list= [ 1, 2, 3];
var a = list[0], b = list[2];
var tmp = a; a = b; b = tmp;

2.对象匹配的简写表达

在匹配过程中将对象直观且灵活地解构为单个变量。
ECMAScript 6

var {op, lhs, rhs} = getASTNode()

ECMAScript 5

var tmp = getASTNode();
var op = tmp.op;
var lhs = tmp.lhs;
var rhs = tmp.rhs;

3.对象匹配，深匹配

在匹配过程中将对象直观且灵活地解构为单个变量。（感觉很难记住）
ECMAScript 6

var {op: a, lhs: {op: b}, rhs: c} = getASTNode()

ECMAScript 5

var tmp = getASTNode();
var a= tmp.op;
var b= tmp.lhs.op;
var c= tmp.rhs;

4.对象和数组匹配，默认值

对象和数组解构的简单直观的默认值。
ECMAScript 6

var obj = { a:1 }
var list = [ 1 ]
var { a, b = 2} = obj
var [ x, y = 2] = list

ECMAScript 5

var obj = { a: 1};
var list = [ 1 ];
var a = obj.a;
var b = obj.b === unefined ? 2 : obj.b;
var x = list[0];
var y = list[1] === undefined ? 2 : list[1];

5.参数上下文匹配

在函数调用过程中，将数组和对象直观且灵活地解构为单个参数。
ECMAScript 6

function f ([ name, val ]) {
   console.log(name, val)
}
function g ({ name: n, val: v }) {
   console.log(n, v)
}
function h ({ name, val }) {
   console.log(name, val)
}
f([ "bar", 42])
g({ name: "foo", val: 7})
h({ name: "bar", val: 42})

ECMAScript 5

function f (arg) {
   var name = arg[0];
   var val = arg[1];
   console.log(name, val);
}
function g (arg) {
   var n = arg.name;
   var v = arg.val;
   console.log(n, v);
}
function h (arg) {
   var name = arg.name;
   var val = arg.val;
   console.log(name, val);
}
f([ "bar", 42]);
g({ name: "foo", val: 7});
h({ name: "bar", val: 42});

6.软解构

软解构，可以选择添加默认值
ECMAScript 6

var list = [ 7, 42 ];
var [ a = 1, b = 2, c = 3, d ] = list
a === 7
b === 42
c === 3
d === undefined

ECMAScript 5

var list = [ 7, 42 ];
var a = typeof list[0] !== "undefined" ? list[0] : 1;
var b = typeof list[1] !== "undefined" ? list[1] : 2;
var c = typeof list[2] !== "undefined" ? list[2] : 3;
var d = typeof list[3] !== "undefined" ? list[3] : undefined;
a === 7;
b === 42;
c === 3;
d === undefined;