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;