记录不同形式Destructuring导致的不同结果:

1
2
3
4
5
6
7
function move1({x=0, y=0} = {}) {
console.log(x, y)
}
function move2({x, y} = {x: 0, y: 0}) {
console.log(x, y)
}

分别测试以下几种情况:

1
2
3
4
5
6
7
8
9
10
11
// 测试输入为空
move1(); // 0 0
move2(); // 0 0
// 测试输入{z: 3}
move1({z:3}); // 0 0
move2({z:3}); // undefined undefined
// 测试输入 {x:1, y: 2}
move1({x:1, y:2}) // 1, 2
move2({x:1, y:2}) // 1, 2

对于move1函数:

  1. 如果输入为空 '' ==> {x = 0, y = 0} = {} ==> x = 0, y = 0;
  2. 输入为 {z: 3}] ==> {x = 0, y = 0} = {z: 3} ==> x = 0, y = 0;
  3. 输入为 {x:1, y: 2} ==> {x = 0, y = 0} = {x: 1, y: 2} ==> x = 1, y = 2;

对于move2函数:

  1. 如果输入为空 '' ==> {x, y} = {x: 0, y: 0} ==> x = 0, y = 0;
  2. 输入为 {z: 3}] ==> {x, y} = {z: 3} ==> x = undefined, y = undefined;
  3. 输入为 {x:1, y: 2} ==> {x, y} = {x: 1, y: 2} ==> x = 1, y = 2;

主要区别就是有输入时,如果没有同名属性 {x, y} = {x: 0, y: 0}这种写法取不到默认值。

ps. 在ES6中如果解构对象时:

1
let {a, ...b} = {a: 1, c: 2, d:3} // Uncaught SyntaxError: Unexpected token ...

但是在React中使用ES6这种写法却很常见,原因是babel(babel在线编译)增强解构功能,会将这种写法编译为:

1
2
3
4
5
6
7
8
9
10
11
12
13
function _objectWithoutProperties(obj, keys) {
var target = {};
for (var i in obj) {
if (keys.indexOf(i) >= 0) continue;
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
target[i] = obj[i];
}
return target;
}
var _a$c$d = { a: 1, c: 2, d: 3 },
a = _a$c$d.a,
b = _objectWithoutProperties(_a$c$d, ["a"]);

扩展阅读:

  1. Exploring ES6 Destructuring
Contents