ECMAScript 2019 中如何使用可选链操作符 '?.'-JavaScript中文网-JavaScript教程资源分享门户

随着 JavaScript 新标准 ECMAScript 2019 的推出，JavaScript 语言的功能得到了进一步增强。其中，可选链操作符 '?.' 可以更方便地处理在对象和数组中访问属性不存在报错的问题。本文将详细介绍可选链操作符的使用方法、指导意义以及示例代码，帮助读者更好地理解和运用该特性。

基本用法

简单来说，可选链操作符就是一个安全的、简洁的访问属性的方法，它可以非常方便地避免属性不存在而导致的报错。在旧版 JavaScript 中，使用点表示法或方括号表示法访问不存在的属性会导致 TypeError 错误。而在 ECMAScript 2019 中，可以通过 ?. 操作符来忽略掉访问不存在的属性，从而避免了这类错误的发生。

下面是一个使用可选链操作符的简单示例：

// www.javascriptcn.com code example
const user = {
  name: 'Tom',
  age: 27,
  skills: {
    language: 'JavaScript',
    framework: 'React'
  }
}

console.log(user?.name?.toUpperCase()) // 输出 'TOM'
console.log(user?.address?.city) // 输出 undefined，而不是发生错误

在上面的示例中，可选链操作符 '?.' 判定了 user 对象是否存在 name 和 address 属性。如果存在，则运行正常的语句，否则不执行该语句并返回 undefined。

深入了解

除了上述基本使用方法，可选链操作符还有其他一些特性和使用技巧。

检查方法是否存在

在使用对象的方法时，我们同样需要检查这个方法是否存在，否则也可能会导致 TypeError 错误。可选链操作符也可以解决这个问题。例如：

// www.javascriptcn.com code example
const person = {
  name: 'Alice',
  isAdult: function() {
    return this.age >= 18;
  }
}

console.log(person?.isAdult?.()) // 输出 true

const animal = {
  name: 'Toby'
}

console.log(animal?.isAdult?.()) // 输出 undefined，而不是错误

在上述示例中，使用 ?. 操作符来忽略检查 isAdult 方法是否存在的代码。如果方法不存在，该语句将返回 undefined，而不会抛出 TypeError 错误。

检查数组元素是否存在

除了检查对象属性和方法，可选链操作符还可以检查数组中的元素是否存在。例如：

const usernames = ['Alice', 'Bob', 'Cathy'];

console.log(usernames[0]?.toUpperCase()) // 输出 'ALICE'
console.log(usernames[3]?.toUpperCase()) // 输出 undefined，而不是错误

在上述示例中，使用 ?. 操作符来判定访问的元素是否存在。如果该元素不存在，则返回 undefined。

使用可选链操作符进行属性赋值

可选链操作符不仅可以用于访问属性，还可以进行属性赋值。如果属性不存在，则会自动创建该属性。例如：

let person = {
  name: 'Alex'
}

person?.age = 22;

console.log(person.age) // 输出 22

在上述示例中，使用 ?. 操作符来判定 age 属性是否存在。由于 age 属性不存在，因此代码将自动创建该属性并将其值设置为 22。

指导意义

使用可选链操作符是一种更安全、更简洁的访问对象和数组属性的方法。它可以避免在 JavaScript 中遇到访问不存在的属性而导致的报错，更有效地保障 JavaScript 代码的稳定性和可靠性。

为了更好地使用可选链操作符，我们可以掌握其基本使用方法、特性以及相关技巧。此外，还可以使用 ESLint 工具来帮助我们检查代码中是否有未使用可选链操作符的访问操作。

示例代码

下面是一个完整的示例代码，演示了如何使用可选链操作符对多层对象进行访问：

// www.javascriptcn.com code example
const user = {
  name: 'Tom',
  age: 27,
  skills: {
    language: 'JavaScript',
    framework: 'React',
    experience: {
      year: 3,
      projects: ['Mini-map', 'Whiteboard']
    }
  }
}

console.log(user.skills?.framework) // 输出 'React'
console.log(user.skills?.experience?.projects[0]) // 输出 'Mini-map'
console.log(user.skills?.experience?.projects[3]) // 输出 undefined

user.skills?.experience?.projects.push('Dashboard');

console.log(user.skills?.experience?.projects) // 输出 ['Mini-map', 'Whiteboard', 'Dashboard']

在上述示例代码中，我们使用可选链操作符来避免了涉及多层对象的属性访问时可能出现的 TypeError 错误，使得代码更加健壮。同时，我们还展示了如何使用可选链操作符进行属性赋值，进一步简化了开发过程。

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

ECMAScript 2019 中如何使用可选链操作符 '?.'