js解构赋值如何定义默认值?

蓓蕾心晴

发布于 2023-12-09 10:22:33

2050

发布于 2023-12-09 10:22:33

文章被收录于专栏：前端小叙前端小叙

在JavaScript中，我们可以在解构赋值语句中定义默认值。这就意味着，如果我们试图解构一个不存在的属性，或者属性值为undefined，那么我们可以为这个属性定义一个默认值。

这在处理JavaScript对象或数组时特别有用，因为我们可能会遇到这样的情况，即某些属性在某些情况下可能不存在或值为undefined。

下面是一些例子来说明如何在解构赋值中定义默认值：

对象解构赋值：

const { a = 10, b = 5 } = { a: 3 };
console.log(a); // 3
console.log(b); // 5

在上述代码中，我们尝试解构属性a和b。属性a在我们的对象中存在，所以它的值是3。但是属性b在我们的对象中并不存在，所以我们使用了默认值5。

解构赋值注意：冒号代表重命名，等号代表赋值默认值，重命名之后，原变量名称不可访问

const { a:aaa, b:bbb } = { a: 3 };
console.log(a) // a is not defined
console.log(aaa) // 3
console.log(b) // b is not defined
console.log(bbb)  // undefined

联合使用：

const { a:aaa = 10, b:bbb = 5 } = { a: 3 };
console.log(aaa) // 3
conosle.log(bbb) // 5

数组解构赋值：

const [a = 10, b = 5] = [3];
console.log(a); // 3
console.log(b); // 5

在上述代码中，我们尝试解构数组中的第一个和第二个元素。第一个元素在我们的数组中存在，所以它的值是3。但是第二个元素在我们的数组中并不存在，所以我们使用了默认值5。

这样，当我们在解构对象或数组时，可以确保我们总是得到一个值，即使该值在原始数据结构中并不存在。

在函数中，可以使用默认参数给变量分配默认值：

function userInfo({ name, age = 18 }) {  
  console.log(name);  
  console.log(age);  
}  
  
const user = { name: 'Alice' };  
userInfo(user); // 输出：Alice 和 18

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-12-08，如有侵权请联系 cloudcommunity@tencent.com 删除

数据结构