解构赋值

解构赋值方便了从数组和对象中提取值。简洁直观！

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。

 

数组匹配

ES6

var list = [ 1, 2, 3 ];
var [ a, , b ] = list;             //output: a=>1;b=>3
[ b, a ] = [ a, b ];               //output: a=>3;b=>1


ES5

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

　　

 

 

 

对象匹配（在分配过程中, 将对象直观和灵活地 解构 到单个变量中。）

ES6

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

ES5

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




再来复杂一点点哦↓

ES6

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


ES5

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

　　

 

对象和数组匹配, 默认值

ES6

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

ES5


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

　　

参数上下文匹配（在函数调用过程中, 将数组和对象的直观和灵活的 解构 到单个参数中。）

ES6

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 })


ES5

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 });

　　

故障

(null,underfined基本数据类型无法引用对象，故出错噢)

 

ES6

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

ES5

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;

　　

 

友情链接：http://es6-features.org/#FailSoftDestructuring