优雅而高效的JavaScript——?? 运算符、?. 运算符和 ?. .运算符

🥴博主：小猫娃来啦
🥴文章核心：优雅而高效的JavaScript——?? 运算符、?. 运算符和 ?. 运算符

引言

JavaScript作为一种广泛使用的脚本语言，不断演进发展。ECMAScript 2020（ES2020）标准引入了三个新的语法特性：?? 运算符、?. 运算符和 ?. 运算符，用于简化代码编和处理可能的空值情况。我们会通过本篇博客深入分析这些新的语法特性，并通过举例和代码演示来解释它们的用法和实际应用场景。

---

空值处理的挑战

在编程中，经常会遇到处理可能为空的值的情况，例如在访问对象属性或调用函数时。在传统的JavaScript中，我们通常使用长短路运算符（如）或条件语句（如if-else）来处理空值情况。然而，这些方法在编写代码时会显得冗长，可读性较差，并且容易出错。为了解决这个问题，ES2020引入了新的语法特性。

---

解决方案1：?? 运算符

基本用法

?? 运算符（空值合并运算符）可以用来判断一个值是否为null或undefined，并提供一个默认值。其语法为：value1 ?? value2，如果value1是null或undefined，则返回value2；否则返回value1的值。

下面是一个示例代码：

const x = null;
const y = 10;
const result = x ?? y;

console.log(result); // 输出 10
1
2
3
4
5

在这个例子中，由于x是null，以返回了y的值。

与 || 运算符的区别

?? 运算符与 || 运算符类似，但它们有一些重要的区别。|| 运算符只能判断一个值是否为 “false”（例如：null、undefined、false、0、‘’），而 ?? 运算符能够精确地判断一个值是否为null或undefined。

下面是一个对比例子：

const x = 0;
const y = 10;
const result1 = x || y; // 使用 || 运算符
const result2 = x ?? y; // 使用 ?? 运算符

console.log(result1); // 输出 10
console.log(result2); // 输出 0
1
2
3
4
5
6
7

在这个例子中，由于x的值为0，它被判定为 “falsy” 值，所以使用 || 运算符时返回了y的值，而使用 ?? 运算符时返回了的值。

实际应用场景举例

• 表单输入默认值

const username = getInputValue('username') ?? '加菲猫';
1

在这个例子中，如果getInputValue(‘username’)返回的值为null或undefined，则username会被设置为加菲猫作为默认值。

• 函数参数默认值

function greet(name) {
  name = ?? '加菲猫';
  console.log(`Hello, ${name}`);
}
1
2
3
4

在这个例子中，如果没有传入name参数或传入的值为null或undefined，则name会被设置为加菲猫作为默认值。

---

解决方案2：?. 运算符

基本用法

?. 运算符（可选链运算符）可以简化对可能为null或undefined的值进行属性访问或方法调用的代码。其语法为：object?.property 或 object?.method()。

下面是一个示例代码：

const obj {
  foo: {
    bar: '咕咕'
  }
};

const result = obj?.foo?.;

console.log(result); // 输出 "咕咕"
1
2
3
4
5
6
7
8
9

在这个例子中，由于obj.foo.bar存在，所以返回了其值"咕咕"。

与 . 运算符的区别

?运算符与.运算符类似，但它们之间有一些关键的区别。如果对象的某个属性或方法不存在，. 运算符会抛出一个TypeError，而?. 运算符会返回undefined，不会导致程序崩溃。

下面是一个对比例子：

const obj = {
  foo: null
};

const result1 = obj.foo.bar; // 使用 . 运算符
const result2 = obj?.foo?.bar; // 使用 ?. 运算符

console.log(result1); // TypeError: Cannot read property 'bar' of null
console.log(result2); // 输出 undefined
1
2
3
4
5
6
7
8
9

在这个例子中，虽然obj.foo存在，但它的值为null，所以使用. 运算符对bar进行访问抛出TypeError，而使用?. 运算符时返回了undefined。

实际应用场景举例

• 链式对象访问

const user = {
  name: '加菲猫',
  address: {
    street: '东大街',
    city: '陕西'
  }
};

const city = user.address?.city;
1
2
3
4
5
6
7
8
9

在这个例子中，如果user.address存在，则city被为其值；否则city将为undefined。

• 安全地调用函数

const handler = obj?.method?.();
1

在这个例子中，如果obj.method存在，则会调用它并将返回值赋给handler变量；否则handler将为undefined。

---

解决方案3：?. 运算符的进一步简化：?..

基本用法

?. 运算符的进一步简形式是?.. 通过将两个运算符组合在一起，可以更加简洁地处理链式对象访问或函数调用的情况。其语法：object?.property 或 object?..method()。

下面是一个示例代码：

const user = {
  name: 'John',
  address: {
    street: '东大街',
    city: '陕西'
  }
};

const city = user?..address?.city;

console(city); // 输出 "陕西"
1
2
3
4
5
6
7
8
9
10
11

在这个例子中，由于user.address.city存在，所以返回了其值"New York"。

实际应用场景举例

• 链式对象访问

const user {
  name: '加菲猫',
  address: {
    street: '东大街',
    city: '陕西'
  }
};

const city = user?..address.city;
1
2
3
4
5
6
7
8
9

在这个例子中，如果user存在且address存在，则city被设置为其值；否则city将为undefined。

• 安全地调用函数

const handler = obj?..method();
1

在这个例子中，如果obj存在且method存在，则会调用它并将返回值赋给handler变量；否则handler将为undefined。

---

总结

本文通过对新的JavaScript语法特性??运算符、?.运算符和?..运算符进行深度横向纵向分析，分别介绍了它们的基本用法、与其他运算符的区别以及实际应用场景。这些新的语法特性在处理可能的空值情况时能够大大简化代码，并提高代码的可读性和健壮性。在日常的JavaScript开发中，合理使用这些语法特性将有助于提高开发效率和代码质量。

---