JavaScript为变量分配默认值
在 JavaScript 中，为变量分配默认值是一种常见的编程模式，尤其是在处理函数参数或对象解构时。以下是几种常用的方法：
- 使用逻辑或操作符 (
||)
逻辑或操作符 (||) 可以用来为变量分配默认值。如果左侧的值为假值（如 null、undefined、0、""、false），则返回右侧的默认值。
示例
function greet(name) {
name = name || "Guest";
console.log(`Hello, ${name}!`);
}
greet(); // 输出: Hello, Guest!
greet("Alice"); // 输出: Hello, Alice!
注意：这种方法会忽略所有假值（如 0 或 ""），可能不适用于所有场景。
- 使用空值合并操作符 (
??)
空值合并操作符 (??) 是 ES2020 引入的特性，仅在左侧的值为 null 或 undefined 时返回右侧的默认值。
示例
function greet(name) {
name = name ?? "Guest";
console.log(`Hello, ${name}!`);
}
greet(); // 输出: Hello, Guest!
greet(null); // 输出: Hello, Guest!
greet(""); // 输出: Hello, !
greet(0); // 输出: Hello, 0!
greet("Alice"); // 输出: Hello, Alice!
注意：?? 只对 null 和 undefined 生效，不会忽略其他假值。
- 函数参数默认值
ES6 允许在函数定义时为参数直接指定默认值。
示例
function greet(name = "Guest") {
console.log(`Hello, ${name}!`);
}
greet(); // 输出: Hello, Guest!
greet("Alice"); // 输出: Hello, Alice!
注意：默认值仅在参数为 undefined 时生效。
- 对象解构默认值
在解构对象时，可以为属性分配默认值。
示例
const user = { name: "Alice" };
const { name, age = 25 } = user;
console.log(name); // 输出: Alice
console.log(age); // 输出: 25
- 数组解构默认值
在解构数组时，也可以为元素分配默认值。
示例
const colors = ["red", "green"];
const [firstColor, secondColor = "blue"] = colors;
console.log(firstColor); // 输出: red
console.log(secondColor); // 输出: green
- 结合逻辑或和三元运算符
在某些复杂场景中，可以结合逻辑或 (||) 和三元运算符 (? :) 来分配默认值。
示例
function greet(name) {
name = name ? name : "Guest";
console.log(`Hello, ${name}!`);
}
greet(); // 输出: Hello, Guest!
greet("Alice"); // 输出: Hello, Alice!
- 使用
typeof检查
在需要更精确控制默认值的场景中，可以使用 typeof 检查变量是否为 undefined。
示例
function greet(name) {
name = typeof name !== "undefined" ? name : "Guest";
console.log(`Hello, ${name}!`);
}
greet(); // 输出: Hello, Guest!
greet("Alice"); // 输出: Hello, Alice!
总结
||：简单但会忽略所有假值。??：仅对null和undefined生效。- 函数参数默认值：ES6 特性，推荐使用。
- 解构默认值：适用于对象和数组解构。
- 三元运算符和
typeof：适用于需要更精确控制的场景。
根据具体需求选择合适的方法，函数参数默认值和解构默认值是现代 JavaScript 中最常用的方式。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
