爱学习的Akali King

爱学习的Akali King

优雅而高效的JavaScript——?? 运算符、?. 运算符和 ?. 运算符-LMLPHP
🥴博主:小猫娃来啦
🥴文章核心:优雅而高效的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

在这个例子中,由于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

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

实际应用场景举例

  • 表单输入默认值
const username = getInputValue('username') ?? '加菲猫';

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

  • 函数参数默认值
function greet(name) {
  name = ?? '加菲猫';
  console.log(`Hello, ${name}`);
}

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


解决方案2:?. 运算符

基本用法

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

下面是一个示例代码:

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

const result = obj?.foo?.;

console.log(result); // 输出 "咕咕"

在这个例子中,由于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

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

实际应用场景举例

  • 链式对象访问
const user = {
  name: '加菲猫',
  address: {
    street: '东大街',
    city: '陕西'
  }
};

const city = user.address?.city;

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

  • 安全地调用函数
const handler = obj?.method?.();

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


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

基本用法

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

下面是一个示例代码:

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

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

console(city); // 输出 "陕西"

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

实际应用场景举例

  • 链式对象访问
const user {
  name: '加菲猫',
  address: {
    street: '东大街',
    city: '陕西'
  }
};

const city = user?..address.city;

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

  • 安全地调用函数
const handler = obj?..method();

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


总结

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


10-20 06:40