ECMAScript 6 中的解构(Destructuring)关于默认值的一点小秘密

解构赋值

在ECMAScript 6允许你这样写代码

const [a, b, c] = [1, 2, 3];
console.log(a, b, c);  // 输出123

const { c } = { c: 3 };
console.log(c); // 输出3

const [a, [b, c]] = [1, [2, 3]];
console.log(a, b, c);  // 输出123

const [, , c] = [1, 2, 3];
console.log(c);  // 输出3

const [a,  ...rest] = [1, 2, 3];
console.log(a, ' ', rest);  // 输出1 [2, 3]

const { c, d } = { c: 3 };
console.log(c, d); // 输出3 undefined

默认值

使用过结构的童鞋应该都会觉得好使。最后一例子看出,如果解构不成功(不存在这样的属性/位置),就会被赋值为undefined,这时候我们可能需要给它个默认值,以保证安全等。

const [a, b = 2] = [1];  // a=1, b=2
const [a, b = 2] = [1, undefined];  // a=1, b=2
const [a, b = 2] = [1, null];  // a=1, b=null

上面的例子中可以看出,只有当结构成员为undefined时,默认值才会生效,null不严格等于undefined,所以为null时,默认值不会生效的。

这就是我想讲的那个小秘密,写代码的时候一不留声可能就会犯这种错误。

掌握了解构可以灵活运用到函数参数,对象复制等各个地方,这是一个事半功倍的利器。

你可能感兴趣的:(ECMAScript 6 中的解构(Destructuring)关于默认值的一点小秘密)