不再害怕 null！使用空值合并运算符（ ?? ）保证代码稳定

在前端开发中，我们经常需要处理变量的空值情况，比如从 API 接口获取数据时，有些属性可能会返回空值，这给开发带来了一定的代码安全隐患。为了解决这个问题，ES2020 引入了一个新的空值合并运算符（ ?? ），它可以大大简化我们处理空值的方式，使代码更加健壮。

空值合并运算符简介

空值合并运算符表示为 ??，它是一个二元运算符，用于处理变量为空值的情况。当左侧的操作数不是 null 或 undefined 时，该运算符会直接返回左侧的操作数，否则它会返回右侧的操作数。

const source = null;
const target = source ?? 'Hello World';
console.log(target); // "Hello World"

在上面的示例中，source 的值为 null，所以 target 的值就被设置成了右侧的 'Hello World'。

空值合并运算符的优势

简化代码

在过去，如果我们需要处理空值情况，通常是通过三目运算符来进行判断。

const source = null;
const target = source !== null && source !== undefined ? source : 'Hello World';
console.log(target); // "Hello World"

使用空值合并运算符可以使代码更加简洁，使我们更加专注于业务逻辑。

const source = null;
const target = source ?? 'Hello World';
console.log(target); // "Hello World"

与短路运算符组合使用

空值合并运算符和短路运算符配合使用，可以使代码更加简洁和灵活。例如，我们可以在对象的属性获取中使用空值合并运算符。

const data = {
  name: 'Jack',
  age: 18
};
const gender = data.gender ?? 'unknown';
console.log(gender); // "unknown"

在上面的示例中，data 对象中不存在 gender 属性，因此 gender 变量会被设置成 'unknown'。

可读性更好

使用空值合并运算符，可以使代码更加直观和易懂。当我们在代码中看到 ?? 运算符时，可以立刻判断它的作用，从而更好地理解代码的含义和行为。

例如，下面的代码中，我们可以清晰地看到变量 result 的值会在两种情况下被赋予不同的值。

const source1 = null;
const source2 = undefined;
const result = source1 ?? source2 ?? 'Hello World';
console.log(result); // "Hello World"

使用空值合并运算符的注意事项

1. 空值合并运算符仅在左侧值为 null 或 undefined 时才生效，在其他情况下，它与逻辑或（||）运算符的功能相同。

const source = 'JavaScript';
const target = source ?? 'Hello World';
console.log(target); // "JavaScript"

在上面的示例中，source 的值为 'JavaScript'，因此变量 target 的值直接被设置成了左侧的值。

1. 空值合并运算符只能用于基础数据类型和对象，不能用于函数。

const fn = () => {
  console.log('Hello World');
};
const result = fn ?? 'Hello World'; // TypeError: fn is not a function

在上面的示例中，我们试图使用空值合并运算符处理函数变量，结果会导致类型错误。

总结

空值合并运算符使代码处理空值情况更加方便、简洁、易读，优化了代码的健壮性，从而提高了开发人员的工作效率和开发质量。在实际的开发中，我们可以充分利用这一特性，避免因空值而导致的异常情况，让代码更加健康和可靠。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484d30748841e98943d8170