ES12 中的可选链操作符大幅降低了代码的复杂度

在前端开发中，由于数据结构的不确定性，我们经常需要进行多层嵌套的操作来获取我们所需要的数据。而这种操作不仅繁琐而且容易出错。在 ES12 中，可选链操作符的引入，大幅降低了代码的复杂度，使得代码更加简洁、易读、易维护。

可选链操作符的基本语法

可选链操作符的基本语法是 ?.，它用于判断前面的表达式是否为 null 或 undefined，如果是，则不会执行后面的表达式。下面是一个示例：

const obj = {
  foo: {
    bar: 'hello'
  }
};
const result = obj?.foo?.bar; // 'hello'
const result2 = obj?.baz?.qux; // undefined

在上面的示例中，我们使用了可选链操作符 ?. 来获取 obj.foo.bar 和 obj.baz.qux 的值。由于 obj.baz 不存在，所以 result2 的值为 undefined。

可选链操作符的链式调用

可选链操作符可以与链式调用一起使用，使得代码更加简洁、易读。下面是一个示例：

// javascriptcn.com 代码示例
const obj = {
  foo: {
    bar: {
      baz: 'hello'
    }
  }
};
const result = obj?.foo?.bar?.baz; // 'hello'
const result2 = obj?.foo?.qux?.baz; // undefined

在上面的示例中，我们使用了可选链操作符 ?. 和链式调用来获取 obj.foo.bar.baz 和 obj.foo.qux.baz 的值。由于 obj.foo.qux 不存在，所以 result2 的值为 undefined。

可选链操作符的函数调用

可选链操作符还可以用于函数调用，使得代码更加简洁、易读。下面是一个示例：

// javascriptcn.com 代码示例
const obj = {
  foo: {
    bar: (name) => {
      return `hello, ${name}!`;
    }
  }
};
const result = obj?.foo?.bar?.('world'); // 'hello, world!'
const result2 = obj?.foo?.qux?.('world'); // undefined

在上面的示例中，我们使用了可选链操作符 ?. 和函数调用来调用 obj.foo.bar('world') 和 obj.foo.qux('world')。由于 obj.foo.qux 不存在，所以 result2 的值为 undefined。

可选链操作符的指导意义

可选链操作符的引入，使得代码更加简洁、易读、易维护。它可以避免多层嵌套的操作，减少代码的复杂度，提高代码的可读性和可维护性。在实际开发中，我们应该尽可能地使用可选链操作符来简化代码。

总结

ES12 中的可选链操作符是一种非常实用的语法，可以大幅降低代码的复杂度，使得代码更加简洁、易读、易维护。在实际开发中，我们应该尽可能地使用可选链操作符来简化代码。

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