如何为 destructured 对象赋予默认值 - JavaScript

在 JavaScript 中，解构赋值是一种常见的方式来从对象或数组中提取数据。在某些情况下，我们可能希望为解构后的变量赋予默认值。本文将介绍如何为 destructed 对象赋予默认值。

基本语法

解构赋值基本语法如下：

const obj = { x:1, y:2, z:3 };
const { x, y, z } = obj;
console.log(x, y, z); // 1 2 3

上面的代码中，我们将 obj 对象中的 x，y，z 属性解构到对应的变量中。当 obj 中不存在某个属性时，对应的变量就会变成 undefined。

如果我们希望为应该的变量赋予默认值，可以像下面这样写：

const obj = { x:1, z:3 };
const { x=0, y=2, z=0 } = obj;
console.log(x, y, z); // 1 2 3 

这里我们为 y 变量指定了默认值 2，当 obj 对象中不存在 y 属性时，y 就会取默认值 2。

默认值可以是一个表达式

默认值可以是一个表达式。例如：

const obj = { x:1, z:3 };
const { x=0, y=2+x, z=0 } = obj;
console.log(x, y, z); // 1 3 3 

这里我们为 y 变量的默认值指定为 2+x，当 obj 对象中不存在 y 属性时，y 就会取默认值 2+x，也就是 3。

默认值可以引用其它属性

在解构过程中，我们还可以使用其它属性的值来指定默认值。例如：

const obj = { x:1, z:3 };
const { x=0, y=2+x, z=0 } = obj;
console.log(x, y, z); // 1 3 3 

这里我们为 y 变量的默认值指定为 2+x，当 obj 对象中不存在 y 属性时，y 就会取默认值 2+x，也就是 3。

解构嵌套对象

在解构嵌套对象时，我们也可以为变量指定默认值。例如：

const obj = { x: { y: 1 } };
const { x: { y = 0, z = 2 } = {} } = obj;
console.log(y, z); // 1 2

这里我们将 obj 对象中的 x.y 属性解构到 y 变量中，同时为 z 变量指定默认值 2。当 obj.x 属性不存在时，{} 对象就会作为默认值，从而避免出现 Cannot destructure property 'y' of 'undefined' as it is undefined. 的错误。

解构数组

解构赋值还可以用于数组。那么如何为数组成员指定默认值呢？我们可以使用数组解构语法并为指定索引的变量赋予默认值。例如：

const arr = [1, undefined, 3];
const [a = 0, b = 2, c = 0] = arr;
console.log(a, b, c); // 1 2 3

这里我们将数组 [1, undefined, 3] 解构到 a, b, c 变量中，为 b 变量指定默认值 2。当 arr 数组中不存在 b 索引时，b 就会取默认值 2。

小结

这篇文章介绍了如何为 destructured 对象赋予默认值。当我们需要从对象或数组中提取数据时，这种技术非常有用，特别是在处理 API 返回数据时。希望这篇文章对你有所帮助。