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;