发布于 2026-01-06 1 阅读
0

使用默认值解构 JavaScript 对象

使用默认值解构 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
Enter fullscreen mode Exit fullscreen mode

解构并分配默认值——最简单的方法

但是,如果在执行任何操作之前,需要对解构属性进行一些验证检查,该怎么办呢?

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
Enter fullscreen mode Exit fullscreen mode

解构并赋默认值——JavaScript 的方式

虽然它运行良好,但却枯燥乏味且多余。如果我们能在解构对象时就使用默认值(就像函数中的默认参数一样),这样解压后的属性就不会为空,岂不更好undefined

const obj = {a: 1, b: 2};

const {
    a = 'foo',
    b = 'bar',
    c = 'baz',
} = obj;

console.log(a, b, c); // 1 2 baz
Enter fullscreen mode Exit fullscreen mode

很简单吧?你只需要在解包的时候赋值就行了。

解构、重命名并分配默认值

真棒!但如果我们想重命名一个参数为其设置默认值呢?请注意。

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
Enter fullscreen mode Exit fullscreen mode

是不是很复杂?我猜是的。以下是具体步骤。

  • 首先,我们对对象的属性进行解构。
const {a, b, c} = obj;
Enter fullscreen mode Exit fullscreen mode
  • 接下来,我们将变量分配给这些属性。
const {a: A, b: B, c: C} = obj;
Enter fullscreen mode Exit fullscreen mode
  • 之后,按照上一个例子中的方法设置默认值。
const {a: A="foo", b: B="bar", c: C="baz"} = obj;
Enter fullscreen mode Exit fullscreen mode

就是这样。在解包对象时直接添加默认值。

注意事项

请注意,只有当对象中没有要解包的属性时(即属性为空),使用默认值进行解构才有效undefined。这意味着 JavaScript 会将 `null` null、 `false`false0其他假值视为有效属性,并且不会为其分配默认值。

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
Enter fullscreen mode Exit fullscreen mode

希望这篇文章对您有所帮助,在您遇到类似情况时能有所启发。欢迎在下方评论区留言,告诉我您对这篇文章的看法。✌️

文章来源:https://dev.to/varundey/destructuring-javascript-objects-with-default-value-2765