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

2023-12-09 10:22:33 浏览数 (2)

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

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

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

对象解构赋值:

代码语言:javascript复制
const { a = 10, b = 5 } = { a: 3 };
console.log(a); // 3
console.log(b); // 5

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

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

代码语言:javascript复制
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

联合使用:

代码语言:javascript复制
const { a:aaa = 10, b:bbb = 5 } = { a: 3 };
console.log(aaa) // 3
conosle.log(bbb) // 5

数组解构赋值:

代码语言:javascript复制
const [a = 10, b = 5] = [3];
console.log(a); // 3
console.log(b); // 5

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

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

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

代码语言:javascript复制
function userInfo({ name, age = 18 }) {  
  console.log(name);  
  console.log(age);  
}  
  
const user = { name: 'Alice' };  
userInfo(user); // 输出:Alice 和 18

0 人点赞