使用默认值解构 JavaScript 对象
原文发布于https://varundey.me/blog/destructuring-and-default-values/
JavaScript ES6 中引入的解构赋值是一个巧妙的技巧,可以直接从对象中提取属性作为变量。
const obj = {
a:1,
b:2,
c:3
};
const {a, b, c} = obj;
console.log(a, b, c); // 1 2 3
解构并分配默认值——最简单的方法
但是,如果在执行任何操作之前,需要对解构属性进行一些验证检查,该怎么办呢?
const {a, b, c} = obj;
if(typeof a === 'undefined'){
// assign a to something
}
if(typeof b === 'undefined'){
// assign b to something
}
if(typeof c === 'undefined'){
// assign c to something
}
// start the actual work
解构并赋默认值——JavaScript 的方式
虽然它运行良好,但却枯燥乏味且多余。如果我们能在解构对象时就使用默认值(就像函数中的默认参数一样),这样解压后的属性就不会为空,岂不更好undefined?
const obj = {a: 1, b: 2};
const {
a = 'foo',
b = 'bar',
c = 'baz',
} = obj;
console.log(a, b, c); // 1 2 baz
很简单吧?你只需要在解包的时候赋值就行了。
解构、重命名并分配默认值
真棒!但如果我们想重命名一个参数并为其设置默认值呢?请注意。
const obj = {a: 1, b: 2};
const {
a: A="foo",
b: B="bar",
c: C="baz"
} = obj;
console.log(A, B, C); // 1 2 baz
是不是很复杂?我猜是的。以下是具体步骤。
- 首先,我们对对象的属性进行解构。
const {a, b, c} = obj;
- 接下来,我们将变量分配给这些属性。
const {a: A, b: B, c: C} = obj;
- 之后,按照上一个例子中的方法设置默认值。
const {a: A="foo", b: B="bar", c: C="baz"} = obj;
就是这样。在解包对象时直接添加默认值。
注意事项
请注意,只有当对象中没有要解包的属性时(即属性为空),使用默认值进行解构才有效undefined。这意味着 JavaScript 会将 `null` null、 `false`false或0其他假值视为有效属性,并且不会为其分配默认值。
const obj = {a: null, b: false, c: 0};
const {
a = 1,
b = 2,
c = 3,
d = 4
} = obj;
console.log(a, b, c, d); // null false 0 4
希望这篇文章对您有所帮助,在您遇到类似情况时能有所启发。欢迎在下方评论区留言,告诉我您对这篇文章的看法。✌️
文章来源:https://dev.to/varundey/destructuring-javascript-objects-with-default-value-2765