ES10 亮点解析：如何利用可选链操作符简化代码判断逻辑-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 的最新版本 ES10（也称为 ECMAScript 2019）已经发布，其中包含了许多新特性和语法糖，让前端开发变得更加高效和简洁。其中一个亮点就是可选链操作符（Optional Chaining Operator），它可以简化代码中的判断逻辑，避免繁琐的 null 或 undefined 判断，提高代码的可读性和可维护性。

可选链操作符的基本语法

可选链操作符是一个问号 ?，加在对象属性或方法调用的后面，表示如果该对象存在，则继续访问该属性或方法，否则返回 undefined。例如：

// www.javascriptcn.com code example
const person = {
  name: 'Tom',
  age: 18,
  job: {
    title: 'Developer',
    company: 'ABC Inc.'
  }
};

console.log(person.job?.title); // 'Developer'
console.log(person.job?.salary); // undefined
console.log(person.hobby?.name); // undefined

在上面的例子中，我们使用了可选链操作符 ?. 来访问 person 对象的 job 属性和 hobby 属性。如果 job 属性存在，则返回 title 属性的值；如果 salary 属性不存在，则返回 undefined。如果 hobby 属性不存在，则直接返回 undefined。

需要注意的是，可选链操作符只能用于对象属性或方法调用的后面，不能用于变量或函数调用的后面。例如：

const x = undefined;
console.log(x?.length); // TypeError: Cannot read property 'length' of undefined

function foo() {}
console.log(foo?.()); // SyntaxError: Unexpected token '.'

在上面的例子中，可选链操作符无法避免变量 x 或函数 foo 为 undefined 或未定义的情况，因此会抛出 TypeError 或 SyntaxError。

可选链操作符的进阶用法

除了基本用法，可选链操作符还有一些进阶用法，可以更加灵活地处理复杂的判断逻辑。

1. 使用可选链操作符调用函数

可选链操作符不仅可以用于对象属性，还可以用于函数调用。例如：

const person = {
  sayHello: function() {
    console.log('Hello!');
  }
};

person.sayHello?.(); // 'Hello!'
person.sayGoodbye?.(); // undefined

在上面的例子中，我们使用可选链操作符 ?. 来调用 person 对象的 sayHello 方法。如果该方法存在，则调用该方法并输出 Hello!；如果该方法不存在，则返回 undefined。

2. 使用可选链操作符访问数组元素

可选链操作符还可以用于访问数组元素。例如：

const arr = [1, 2, 3];

console.log(arr[0]?.toString()); // '1'
console.log(arr[3]?.toString()); // undefined

在上面的例子中，我们使用可选链操作符 ?. 来访问数组 arr 的第一个元素和第四个元素。如果第一个元素存在，则调用该元素的 toString 方法并返回字符串 '1'；如果第四个元素不存在，则直接返回 undefined。

3. 使用可选链操作符链式调用

可选链操作符还可以和链式调用一起使用，进一步简化代码逻辑。例如：

// www.javascriptcn.com code example
const person = {
  name: 'Tom',
  address: {
    city: 'Beijing',
    street: '123 Main St.'
  }
};

console.log(person?.address?.city); // 'Beijing'
console.log(person?.address?.zipCode?.toString()); // undefined

在上面的例子中，我们使用可选链操作符 ?. 来访问 person 对象的 address 属性和 zipCode 属性。如果 address 属性和 zipCode 属性都存在，则返回 zipCode 属性的字符串值；如果其中任何一个属性不存在，则返回 undefined。

可选链操作符的学习和指导意义

可选链操作符是 ES10 中一个非常实用的语法糖，可以简化代码中繁琐的 null 或 undefined 判断，提高代码的可读性和可维护性。它的学习和应用，对于前端开发人员来说具有重要的指导意义，可以帮助我们更好地理解 JavaScript 的语法和特性，提高开发效率和代码质量。下面是一个示例代码，展示了可选链操作符的应用场景：

// www.javascriptcn.com code example
function getUserName(user) {
  if (user && user.profile && user.profile.name) {
    return user.profile.name;
  } else {
    return 'Anonymous';
  }
}

// 使用可选链操作符简化代码
function getUserName(user) {
  return user?.profile?.name || 'Anonymous';
}

在上面的示例代码中，我们定义了两个函数，分别用于获取用户的名称。第一个函数需要进行多次 null 或 undefined 判断，才能避免代码出错。而第二个函数使用了可选链操作符，可以大大简化代码逻辑，提高代码的可读性和可维护性。这就是可选链操作符的真正价值所在。

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

ES10 亮点解析：如何利用可选链操作符简化代码判断逻辑