ECMAScript 2020 (ES11)：JavaScript 中的 null 安全操作符和 undefined 安全操作符

在 JavaScript 中，我们经常需要检查变量是否为 null 或者 undefined，以避免出现程序运行的错误。在 ECMAScript 2020 (ES11) 中，新增了两个 null/undefined 安全操作符：?. 和 ??. 这篇文章将详细介绍这两个操作符以及如何使用它们，让你的代码更加健壮和安全。

空位合并操作符（??）

空位合并操作符（nullish coalescing operator）又称为 null 合并操作符，用来判断一个值是否为 null 或 undefined，如果是，则返回一个默认值，否则返回该值本身。使用 ?? 操作符可以简化对于变量是否存在的判断，特别是对于变量的 null 值和 undefined 值的检查。

const foo = null ?? 'default'; // 'default'
const bar = undefined ?? 'default'; // 'default'
const baz = 'not null' ?? 'default'; // 'not null'

空位合并操作符判断变量是否为 null 或者 undefined 时，会先排除掉 false, 0, '', NaN, 其余情况均会被视为非 null 或 undefined 的变量。

const a = false ?? 'default'; // false
const b = 0 ?? 'default'; // 0
const c = '' ?? 'default'; // '';
const d = NaN ?? 'default'; // NaN
const e = 'Hello' ?? 'default'; // 'Hello'

在实际开发中，空位合并操作符可以用于给变量设置默认值，例如：

function printName(name) {
  const userName = name ?? 'Unknown';
  console.log(`User name is ${userName}`);
}

printName(); // User name is Unknown
printName('Jack'); // User name is Jack

可选链操作符（?.）

可选链操作符（optional chaining operator）用于保护对象访问过程中对于不存在的属性进行安全的访问，特别是在嵌套的对象结构中，避免出现 undefined is not an object 的错误。

在旧有的写法中，访问多层嵌套的对象属性时，我们需要手动检查每一层是否存在以避免出现错误。例如：

const data = {
  user: {
    name: 'Jack',
    age: 26,
    info: {
      address: {
        city: 'Shanghai',
        postcode: '200000'
      }
    }
  }
};

// 访问 address 的 postcode 属性
const postcode = data.user && data.user.info && data.user.info.address && data.user.info.address.postcode;
console.log(postcode); // '200000'

使用可选链操作符，可以简化以上代码：

const postcode = data.user?.info?.address?.postcode;
console.log(postcode); // '200000'

如果属性不存在，则返回 undefined，而不是抛出一个错误。

const noProp = data.user?.info?.noProp;
console.log(noProp); // undefined

可选链操作符也可以应用于数组访问，例如：

const arr = [1, 2, 3];
const value = arr?.[3]; // undefined

同时，可选链操作符也支持在函数调用中使用：

const myFn = {
  sayHello() {
    console.log('Hello');
  }
};

myFn?.sayHello?.();

在实际开发中，可选链操作符的使用可以使代码更加简洁和可读性更高，例如遍历嵌套对象时，可以避免出现繁琐的 null/undefined 检查:

// 使用可选链操作符遍历嵌套对象
function printPostCode(data) {
  const postcode = data?.user?.info?.address?.postcode ?? 'unknown';
  console.log(`The postcode is: ${postcode}`);
}

printPostCode(data); // The postcode is: 200000

总结

在 ECMAScript 2020 (ES11) 中，新增了两个 null/undefined 安全操作符：空位合并操作符 ?? 和 可选链操作符 ?.，它们使得我们能够更加简单、清晰地处理变量为 null 或 undefined 的情况，避免程序运行出错；同时也使得代码更加简洁、易读，在实际开发中具有很大的实用价值。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b8dd96add4f0e0ff16dd3a