在 JavaScript 中解构对象时如何设置默认值？
在 JavaScript 中，我们经常需要从对象中提取值并将其分配给变量。一种方便的方法是使用对象解构语法。当我们解构对象时，可以使用默认值来设置如果提取的值为 undefined，则使用的备用值。
1. 默认值
默认值是变量可能没有值的备用值。当我们从对象中提取值时，如果值为 undefined，则可以使用默认值。下面是一个示例：
const person = {
name: 'John'
}
const { name, age = 30 } = person
console.log(name) // John
console.log(age) // 30
在上面的代码中，我们从 person 对象中解构出了 name 和 age。由于 age 属性在对象中不存在，因此我们将其设置为默认值 30。当我们控制台记录 age 时，它的值为 30。
2. 在解构时使用默认值
在解构对象时，我们可以使用默认值来设置属性的备用值。下面是一个示例：
const person = {
name: 'John'
}
const { name, age = 30 } = person
console.log(name) // John
console.log(age) // 30
在上面的代码中，我们从 person 对象中解构出了 name 和 age。由于 age 属性在对象中不存在，因此我们将其设置为默认值 30。当我们控制台记录 age 时，它的值为 30。
3. 在函数中使用默认值
在函数中，我们可以为参数设置默认值。如果没有传递参数，则使用默认值。下面是一个示例：
function greet(name = 'John Doe') {
console.log(`Hello, ${name}!`)
}
greet() // Hello, John Doe!
greet('Alice') // Hello, Alice!
在上面的代码中，我们定义了一个名为 greet 的函数。该函数接受一个名为 name 的参数，并通过模板字面量向控制台输出问候。如果没有传递参数，则默认为 'John Doe'。当我们调用 greet 函数时，如果没有传递参数，则使用默认名称 'John Doe'。
4. 在对象中使用默认值
在对象中，我们可以使用默认值来设置属性的备用值。下面是一个示例：
const person = {
name: 'John',
age: undefined
}
const { name, age = 30 } = person
console.log(name) // John
console.log(age) // 30
在上面的代码中，我们从 person 对象中解构出了 name 和 age。由于 age 属性的值为 undefined，因此我们将其设置为默认值 30。当我们控制台记录年龄时，它的值为 30。
5. 使用对象解构和默认值来设置函数参数
我们可以使用对象解构和默认值来设置函数的参数。下面是一个示例：
function greeting({ name = 'John', message = 'Hello' } = {}) {
console.log(`${message}, ${name}!`)
}
greeting() // Hello, John!
greeting({ name: 'Alice' }) // Hello, Alice!
greeting({ message: 'Goodbye' })// Goodbye, John!
在上面的代码中，我们定义了一个名为 greeting 的函数，该函数接受一个名为 options 的对象参数。在函数定义中，我们将 options 参数的默认值设置为一个空对象。我们使用对象解构来提取 options 参数对象中的 name 和 message 属性，并为它们设置默认值。当我们调用 greeting 函数时，如果未传递 options 参数，则使用空对象作为默认参数。如果传递了 options 参数，则使用传递的值替换默认值。
6. 对象解构和默认值的注意事项
需要注意的是，在对象解构中，将 null 作为对象传递时，我们仍将使用默认值。下面是一个示例：
const person = {
name: 'John',
age: null
}
const { name, age = 30 } = person
console.log(name) // John
console.log(age) // null
在上面的代码中，我们从 person 对象中解构出了 name 和 age。由于 age 属性的值为 null，因此我们将其设置为默认值 30。当我们控制台记录年龄时，它的值为 null 而不是默认值 30。
此外，如果属性的值为 undefined，则使用默认值。然而，如果属性的值为 null，则不会使用默认值。下面是一个示例：
const person = {
name: 'John',
age: undefined,
city: null
}
const { name, age = 30, city = 'New York' } = person
console.log(name) // John
console.log(age) // 30
console.log(city) // null
在上面的代码中，我们从 person 对象中解构出了 name、age 和 city。由于 age 属性的值为 undefined，因此我们将其设置为默认值 30。由于 city 属性的值为 null，因此我们不使用默认值。当我们控制台记录 city 时，它的值为 null 而不是默认值 'New York'。
结论
在 JavaScript 中，我们可以使用默认值来设置属性的备用值。当我们从对象中解构值时，可以使用默认值来设置备用值。我们还可以在函数中使用默认值来设置参数的备用值。在解构对象时，需要注意将 null 视为实际值，而将 undefined 视为缺失值。