js怎么填充默认值

在JavaScript中，填充默认值的方式有多种，包括使用逻辑运算符、函数参数默认值、对象解构默认值等。 其中，使用逻辑运算符是最常见的方法，通过 || 运算符来填充默认值。另外，ES6引入的函数参数默认值和对象解构默认值也提供了更简洁和易读的方式。函数参数默认值 是一种常见且易于理解的方式，它可以在函数声明时直接为参数设置默认值。

一、使用逻辑运算符填充默认值

逻辑运算符 || 是JavaScript中最常见的用于填充默认值的方法之一。这种方法简单且易于理解。以下是具体介绍：

1.1 基本用法

逻辑运算符 || 可以用于在变量未定义或为 null 时提供默认值。例如：

let value = userInput || 'default value';

在这个例子中，如果 userInput 为 null、undefined、0、NaN、"" 或 false，value 将被赋值为 'default value'。

1.2 注意事项

尽管逻辑运算符 || 非常方便，但它有一个潜在的问题，即如果 userInput 为 0 或 false，它也会被认为是 falsy 值，从而导致默认值被填充。对于这种情况，你可以使用更严谨的三元运算符：

let value = (userInput !== undefined && userInput !== null) ? userInput : 'default value';

二、使用函数参数默认值

ES6引入了函数参数默认值，允许在函数声明时直接为参数设置默认值。这种方法非常简洁，且避免了逻辑运算符带来的潜在问题。

2.1 基本用法

你可以在函数声明时为参数设置默认值：

function greet(name = 'Guest') {
    return `Hello, ${name}!`;
}
console.log(greet()); // 输出: Hello, Guest!
console.log(greet('Alice')); // 输出: Hello, Alice!

在这个例子中，如果没有传递 name 参数，name 将默认赋值为 'Guest'。

2.2 结合解构赋值

函数参数默认值还可以与解构赋值结合使用：

function displayUser({ name = 'Guest', age = 18 } = {}) {
    console.log(`Name: ${name}, Age: ${age}`);
}
displayUser(); // 输出: Name: Guest, Age: 18
displayUser({ name: 'Alice' }); // 输出: Name: Alice, Age: 18

三、使用对象解构默认值

ES6引入的对象解构允许你在从对象中提取属性时设置默认值。这种方法特别适用于处理函数参数或配置对象。

3.1 基本用法

对象解构默认值可以在变量声明时直接设置：

const { name = 'Guest', age = 18 } = user;
console.log(name, age);

在这个例子中，如果 user 对象中没有 name 或 age 属性，它们将分别被赋值为 'Guest' 和 18。

3.2 函数参数中的应用

对象解构默认值在处理函数参数时特别有用：

function configure(options = {}) {
    const { timeout = 500, isEnabled = true } = options;
    console.log(`Timeout: ${timeout}, Enabled: ${isEnabled}`);
}
configure(); // 输出: Timeout: 500, Enabled: true
configure({ timeout: 1000 }); // 输出: Timeout: 1000, Enabled: true

四、使用 `??` 空值合并运算符

ES11引入了空值合并运算符 ??，它只在左侧操作数为 null 或 undefined 时返回右侧操作数。这种方式解决了逻辑运算符 || 的一些问题。

4.1 基本用法

空值合并运算符 ?? 的用法非常简单：

let value = userInput ?? 'default value';

在这个例子中，如果 userInput 为 null 或 undefined，value 将被赋值为 'default value'。与逻辑运算符 || 不同，它不会将 0 或 false 视为 falsy 值。

4.2 结合其他运算符

你可以将空值合并运算符 ?? 与其他运算符结合使用以实现更复杂的逻辑：

let value = (userInput !== undefined && userInput !== null) ? userInput : 'default value';

五、使用自定义函数填充默认值

有时候，使用自定义函数来填充默认值可以提供更多的灵活性和可读性。

5.1 基本用法

你可以编写一个自定义函数来填充默认值：

function getDefault(value, defaultValue) {
    return value === undefined || value === null ? defaultValue : value;
}
let value = getDefault(userInput, 'default value');

5.2 复杂情况处理

自定义函数可以处理更复杂的情况，例如嵌套对象或数组：

function getNestedDefault(obj, path, defaultValue) {
    let result = obj;
    for (let key of path.split('.')) {
        result = result ? result[key] : undefined;
    }
    return result === undefined || result === null ? defaultValue : result;
}
let value = getNestedDefault(user, 'profile.name', 'Guest');

六、总结

在JavaScript中填充默认值的方法多种多样，每种方法都有其优缺点。逻辑运算符 || 是最常见的方法，但会将 0 和 false 视为 falsy 值。函数参数默认值 和 对象解构默认值 提供了更简洁和易读的方式，特别适用于函数参数和配置对象。空值合并运算符 ?? 是一种更为严谨的方法，只在 null 或 undefined 时提供默认值。最后，自定义函数可以提供最大的灵活性，适用于更复杂的情况。

对于项目团队管理系统，可以考虑使用 研发项目管理系统PingCode 和 通用项目协作软件Worktile，这两款系统可以帮助团队更高效地管理项目、分配任务和跟踪进度。

无论你选择哪种方法，都需要根据具体的应用场景和需求来做出最佳决策。通过合理地填充默认值，可以提高代码的健壮性和可维护性，从而确保应用程序的稳定运行。