在前端开发中，代码的可读性和易于维护性是非常重要的。ES12 中的 Nullish 合并运算符是一种简单而强大的语言特性，可以帮助我们更加清晰地编写代码。在本文中，我们将深入探讨 Nullish 合并运算符的原理、用法和示例。
Nullish 合并运算符的原理
Nullish 合并运算符是 ES12 中的一个新的语言特性，它是一种用于合并两个值的运算符。它的作用是返回第一个非空(undefined 或 null)的值，如果两个值都是非空的，则返回第一个值。
Nullish 合并运算符使用两个问号（??）表示，与逻辑或运算符（||）不同，它不会将 falsy 值（例如 '' 或 0）视为 false，而只会将 undefined 和 null 视为 false。
Nullish 合并运算符的用法
Nullish 合并运算符的用法非常简单，它可以用于任何需要合并两个值的场合。以下是一些常见的用法：
1. 变量赋值
我们经常需要将一个变量赋值为另一个变量，但是如果另一个变量未定义或为空，我们需要使用条件语句来检查它，并设置默认值。使用 Nullish 合并运算符可以使代码更加简洁：
let x = undefined; let y = x ?? 'default'; console.log(y); // 'default'
2. 函数参数默认值
在函数定义中，我们经常需要设置参数的默认值，以便在调用函数时可以省略这些参数。使用 Nullish 合并运算符，我们可以轻松地设置参数的默认值：
// javascriptcn.com 代码示例
function greet(name, message) {
name ??= 'stranger';
message ??= 'Hello';
console.log(`${message}, ${name}!`);
}
greet(); // 'Hello, stranger!'
greet('John'); // 'Hello, John!'
greet('Jane', 'Hi'); // 'Hi, Jane!'3. 对象属性访问
在访问对象属性时，我们经常需要检查属性是否存在，并设置默认值。使用 Nullish 合并运算符，我们可以简化这个过程：
const user = {
name: 'John',
age: null,
};
console.log(user.name ?? 'Anonymous'); // 'John'
console.log(user.age ?? 18); // null
console.log(user.gender ?? 'Unknown'); // 'Unknown'Nullish 合并运算符的示例代码
以下是一些使用 Nullish 合并运算符的示例代码：
// javascriptcn.com 代码示例
// 变量赋值
let x = undefined;
let y = x ?? 'default';
console.log(y); // 'default'
// 函数参数默认值
function greet(name, message) {
name ??= 'stranger';
message ??= 'Hello';
console.log(`${message}, ${name}!`);
}
greet(); // 'Hello, stranger!'
greet('John'); // 'Hello, John!'
greet('Jane', 'Hi'); // 'Hi, Jane!'
// 对象属性访问
const user = {
name: 'John',
age: null,
};
console.log(user.name ?? 'Anonymous'); // 'John'
console.log(user.age ?? 18); // null
console.log(user.gender ?? 'Unknown'); // 'Unknown'总结
Nullish 合并运算符是一种简单而强大的语言特性，它可以使我们的代码更加清晰和易于维护。它可以用于任何需要合并两个值的场合，包括变量赋值、函数参数默认值和对象属性访问。使用 Nullish 合并运算符可以使我们的代码更加简洁和易于理解。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656833e2d2f5e1655d0fe32b