ES11：了解 Optional Chaining-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对各种对象和属性进行操作。然而，由于数据的不确定性，我们可能会遇到许多未定义或空值的情况。在此之前，我们通常需要写大量的代码来处理这些情况。但是，ES11引入了一个新特性——Optional Chaining，可以帮助我们更方便地处理这些问题。

Optional Chaining是什么？

Optional Chaining是一种新的JavaScript语法，可以在访问对象的属性或方法时，避免出现未定义或空值的错误。它使用了一种简洁的语法来检查属性或方法是否存在，如果存在则返回对应的值，如果不存在则返回undefined。

Optional Chaining的语法非常简单，只需要在属性或方法名后面加上"?."即可。例如：

// www.javascriptcn.com code example
const obj = {
  prop1: {
    prop2: {
      prop3: 'value'
    }
  }
};

console.log(obj.prop1?.prop2?.prop3); // 'value'
console.log(obj.prop1?.prop2?.prop4); // undefined

在上面的代码中，我们使用了Optional Chaining来检查obj对象中的属性是否存在。如果属性存在，则返回对应的值；如果不存在，则返回undefined。可以看到，Optional Chaining的语法非常简洁，可以帮助我们更方便地处理未定义或空值的情况。

Optional Chaining的深度探究

除了上面的基本语法外，Optional Chaining还有一些高级用法，可以帮助我们更好地处理复杂的数据结构。

对象中的数组

在JavaScript中，我们经常会使用对象中的数组来存储一组数据。在这种情况下，Optional Chaining也可以帮助我们更方便地处理未定义或空值的情况。

例如，我们有一个包含数组的对象，我们想要获取数组中的第一个元素：

const obj = {
  arr: [1, 2, 3]
};

console.log(obj.arr?.[0]); // 1
console.log(obj.arr?.[4]); // undefined

在上面的代码中，我们使用了Optional Chaining来检查obj对象中的数组是否存在。如果数组存在，则返回对应的值；如果不存在，则返回undefined。

函数调用

在JavaScript中，我们经常会使用函数来处理数据。在这种情况下，Optional Chaining也可以帮助我们更方便地处理未定义或空值的情况。

例如，我们有一个包含函数的对象，我们想要调用这个函数：

const obj = {
  func: function() {
    return 'hello world';
  }
};

console.log(obj.func?.()); // 'hello world'
console.log(obj.func2?.()); // undefined

在上面的代码中，我们使用了Optional Chaining来检查obj对象中的函数是否存在。如果函数存在，则调用函数并返回对应的值；如果不存在，则返回undefined。

Optional Chaining的指导意义

Optional Chaining的出现，使得我们在处理未定义或空值的情况时，可以写出更加简洁和优雅的代码。它不仅可以提高代码的可读性和可维护性，还可以减少代码的出错率。

在实际开发中，我们经常会遇到各种未定义或空值的情况。使用Optional Chaining可以让我们更加自信地处理这些情况，从而提高代码的质量和效率。

示例代码

下面是一个使用Optional Chaining处理未定义或空值的示例代码：

// www.javascriptcn.com code example
const user = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
};

function getUserCity(user) {
  return user?.address?.city || 'unknown';
}

console.log(getUserCity(user)); // 'New York'
console.log(getUserCity({})); // 'unknown'

在上面的代码中，我们定义了一个getUserCity函数，用来获取用户的城市信息。在函数中，我们使用Optional Chaining来检查user对象中的属性是否存在。如果属性存在，则返回对应的值；如果不存在，则返回默认值'unknown'。这样，我们就可以更加自信地处理未定义或空值的情况。

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

ES11：了解 Optional Chaining