了解 ECMAScript 7 的骆驼运算符并应用它

在 ECMAScript 7 中，引入了一种新的运算符：骆驼运算符（?.），也称为可选链运算符。该运算符可以使我们更方便地访问嵌套的属性和方法，同时避免了访问未定义的属性或方法时出现的错误。

骆驼运算符的使用

骆驼运算符的语法如下：

obj?.prop
obj?.[expr]
func?.(args)

其中，obj 是一个对象，prop 是该对象的属性名，expr 是一个表达式，func 是一个函数，args 是该函数的参数列表。

骆驼运算符的作用是当 obj 为 null 或 undefined 时，直接返回 undefined，否则继续访问 prop 或调用 func。

下面是几个使用骆驼运算符的示例：

// 访问嵌套属性
const user = {
  name: 'John',
  address: {
    street: '123 Main St.',
    city: 'Anytown',
    state: 'CA'
  }
};

const street = user?.address?.street; // '123 Main St.'
const country = user?.address?.country; // undefined

// 调用嵌套方法
const person = {
  name: 'Alice',
  getFullName: function() {
    return this.name;
  }
};

const fullName = person?.getFullName?.(); // 'Alice'
const age = person?.getAge?.(); // undefined

骆驼运算符的优势

使用骆驼运算符可以避免访问未定义的属性或方法时出现的错误，从而提高代码的健壮性和可读性。

例如，如果我们想要访问一个嵌套对象的属性时，通常需要使用多个点运算符：

const country = user && user.address && user.address.country;

这样的代码不仅繁琐，而且容易出错。而使用骆驼运算符可以简化代码，同时保持可读性：

const country = user?.address?.country;

骆驼运算符的局限性

虽然骆驼运算符可以方便地访问嵌套的属性和方法，但它并不能完全替代传统的属性和方法访问方式。

首先，骆驼运算符只能用于访问对象的属性和方法，而不能用于访问数组的元素。如果我们需要访问数组的元素，仍然需要使用传统的索引方式。

其次，骆驼运算符只能判断 null 和 undefined，而不能判断其他假值（如 false、0 和空字符串）。如果我们需要判断其他假值，仍然需要使用传统的逻辑运算符。

总结

骆驼运算符是 ECMAScript 7 中引入的一种新的运算符，可以方便地访问嵌套的属性和方法，同时避免了访问未定义的属性或方法时出现的错误。使用骆驼运算符可以提高代码的健壮性和可读性，但也有一些局限性需要注意。在实际开发中，我们应该根据具体情况选择合适的访问方式。

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