在日常的 JavaScript 开发中，我们经常会遇到需要处理默认值的情况。有时候变量可能是 null 或者 undefined，这时候就需要给它一个默认值。在过去，我们可能会使用一些比较繁琐的方法来实现，不过自从 JavaScript 引入了空值合并运算符，处理默认值的逻辑就变得简单多了。下面我们就来详细了解一下这个神奇的运算符。
一、空值合并运算符的基本概念
空值合并运算符用 ?? 表示。它的作用是当左侧的操作数为 null 或者 undefined 时，返回右侧的操作数；否则返回左侧的操作数。简单来说，就是给变量设置一个默认值，只有当变量是 null 或者 undefined 时才会使用这个默认值。
下面是一个简单的示例：
// 定义一个变量，初始值为 null
let myVariable = null;
// 使用空值合并运算符给 myVariable 设置默认值
let result = myVariable ?? '默认值';
// 输出结果
console.log(result); // 输出: 默认值
在这个示例中，myVariable 的值是 null，所以 myVariable ?? '默认值' 会返回右侧的 '默认值'。
再看一个 undefined 的例子：
// 定义一个未赋值的变量
let anotherVariable;
// 使用空值合并运算符给 anotherVariable 设置默认值
let anotherResult = anotherVariable ?? '另一个默认值';
// 输出结果
console.log(anotherResult); // 输出: 另一个默认值
这里 anotherVariable 没有赋值，也就是 undefined，所以最终结果是右侧的 '另一个默认值'。
二、应用场景
2.1 函数参数的默认值
在定义函数时，我们经常需要给参数设置默认值。以前我们可能会这样做：
function oldFunction(param) {
// 如果 param 是 null 或者 undefined，就使用默认值
param = param !== null && param !== undefined ? param : '旧默认值';
console.log(param);
}
oldFunction(); // 输出: 旧默认值
oldFunction('新值'); // 输出: 新值
使用空值合并运算符后，代码就简洁多了：
function newFunction(param = '新默认值') {
// 使用空值合并运算符设置默认值
param = param ?? '新默认值';
console.log(param);
}
newFunction(); // 输出: 新默认值
newFunction('传入的值'); // 输出: 传入的值
2.2 对象属性的默认值
当我们访问对象的属性时，有时候属性可能不存在，这时候就可以使用空值合并运算符来设置默认值。
// 定义一个对象
const myObject = {
name: '张三',
age: null
};
// 使用空值合并运算符获取 age 属性，如果为 null 则使用默认值
const personAge = myObject.age ?? 18;
console.log(personAge); // 输出: 18
2.3 配置项的默认值
在开发中，我们经常会有一些配置项，有些配置项可能用户没有提供，这时候就可以使用空值合并运算符来设置默认配置。
// 用户提供的配置
const userConfig = {
theme: null,
fontSize: 16
};
// 默认配置
const defaultConfig = {
theme: 'light',
fontSize: 14
};
// 合并配置
const finalConfig = {
theme: userConfig.theme ?? defaultConfig.theme,
fontSize: userConfig.fontSize ?? defaultConfig.fontSize
};
console.log(finalConfig);
// 输出: { theme: 'light', fontSize: 16 }
三、技术优缺点
3.1 优点
3.1.1 代码简洁
使用空值合并运算符可以让代码更加简洁，避免了冗长的条件判断。比如上面函数参数默认值的例子，使用空值合并运算符后代码明显更简洁易读。
3.1.2 明确性
空值合并运算符只处理 null 和 undefined，不会像逻辑或运算符 || 那样把一些假值（如 0、''、false 等）也当作需要替换的值。这使得代码的意图更加明确。
// 使用逻辑或运算符
let value1 = 0;
let result1 = value1 || 10;
console.log(result1); // 输出: 10
// 使用空值合并运算符
let value2 = 0;
let result2 = value2 ?? 10;
console.log(result2); // 输出: 0
3.2 缺点
3.2.1 浏览器兼容性
空值合并运算符是 ECMAScript 2020 引入的新特性，一些旧版本的浏览器可能不支持。在使用时需要考虑目标浏览器的兼容性，如果需要支持旧版本浏览器，可能需要使用 Babel 等工具进行转换。
3.2.2 可读性问题
对于一些初学者来说，空值合并运算符可能不太容易理解。尤其是在复杂的表达式中使用时，可能会增加代码的理解难度。
四、注意事项
4.1 与逻辑或运算符的区别
逻辑或运算符 || 会把所有假值（如 0、''、false 等）都当作需要替换的值，而空值合并运算符只处理 null 和 undefined。在使用时一定要注意这一点，根据实际需求选择合适的运算符。
4.2 优先级问题
空值合并运算符的优先级和逻辑或运算符、逻辑与运算符不同。在复杂的表达式中，需要注意运算符的优先级，必要时可以使用括号来明确运算顺序。
// 错误示例
let a = null;
let b = 1;
let c = 2;
let wrongResult = a ?? b || c; // 这里的运算顺序可能不是你想要的
console.log(wrongResult);
// 正确示例，使用括号明确运算顺序
let rightResult = (a ?? b) || c;
console.log(rightResult);
4.3 避免过度使用
虽然空值合并运算符很方便，但也不要过度使用。在一些简单的场景下，使用传统的条件判断可能更清晰易懂。
五、文章总结
JavaScript 空值合并运算符 ?? 为我们处理默认值提供了一种简洁、明确的方式。它主要用于当变量为 null 或 undefined 时返回默认值，避免了使用繁琐的条件判断。在函数参数默认值、对象属性默认值、配置项默认值等场景中都能发挥很好的作用。
不过，它也有一些缺点，比如浏览器兼容性问题和可能带来的可读性问题。在使用时，我们要注意与逻辑或运算符的区别，以及运算符的优先级问题，同时避免过度使用。
总的来说，空值合并运算符是 JavaScript 中一个非常实用的特性，合理使用可以让我们的代码更加简洁、易读。
评论