在 ES9 中，新加入了一个链运算符 ?.，它是一个非常方便的语法糖，可以简化访问嵌套对象或数组时的代码量。本文将详细介绍链运算符的语法、用法以及注意事项等，希望对前端开发者有所帮助。
语法
链运算符的语法如下：
object?.prop object?.[key] array?.[index]
其中 object 可以是一个对象或 null 或 undefined，prop 可以是一个对象的属性名或方法名，[key] 可以是一个属性名变量或表达式，[index] 可以是一个数组的下标变量或表达式。如果 object 为 null 或 undefined，那么整个表达式的值将为 undefined，否则将返回 object.prop、object[key] 或 array[index] 的值。
需要注意的是，链运算符的优先级较低，如果需要与其他操作符一起使用，应该加上括号来控制运算的顺序。例如：
const obj = null; const value = (obj?.prop + 1) ?? defaultValue;
用法
访问嵌套对象
使用链运算符可以简化访问嵌套对象的代码量。例如，我们有一个 person 对象，其中包含多个嵌套的对象，如下：
-- -------------------- ---- ------- ----- ------ - - ----- ------ -------- - ----- ---------- ------- ------- ------ -------- -------- -- -------- - ----- ---- ------- -------- - ----- ----------- ------- ------- ------ -------- -------- -- -------- - ------ ---------------- ------ -------------- - - --展开代码
现在我们要获取 person 对象的公司地址的邮编，可以使用链运算符来实现：
const zipCode = person?.company?.address?.zipCode;
上面的代码可以保证如果 person、company 或 address 中任何一个属性为 null 或 undefined，都不会抛出错误，而是直接返回 undefined。
调用嵌套方法
使用链运算符还可以简化调用嵌套方法的代码量。例如，我们有一个 person 对象，其中包含一个 getName() 方法，而这个方法可能返回 null 或 undefined，如下：
const person = { getName() { return 'Tom'; } };
现在我们要调用这个方法并转换成大写字符串，可以使用链运算符来实现：
const upperCaseName = person?.getName()?.toUpperCase();
上面的代码会先检查 person 和 getName() 方法是否存在，如果存在就调用 getName() 方法并返回字符串，然后再调用 toUpperCase() 方法将字符串转换成大写字符串。
遍历嵌套数组
使用链运算符还可以简化遍历嵌套数组的代码量。例如，我们有一个 items 数组，其中每个元素都是一个对象，每个对象又包含一个 prices 数组，如下：
const items = [ { name: 'item1', prices: [1.0, 2.0, 3.0] }, { name: 'item2', prices: [4.0] }, { name: 'item3', prices: [5.0, 6.0] } ];
现在我们要获取所有商品的平均价格，可以使用链运算符和数组 reduce() 方法来实现：
const totalPrice = items?.reduce((sum, item) => { const prices = item?.prices; return sum + (prices?.reduce((pSum, price) => pSum + price, 0) ?? 0); }, 0); const avgPrice = totalPrice / items?.length ?? 0;
上面的代码会先检查 items 和 prices 数组是否存在，然后使用 reduce() 方法对数组进行求和，最后计算平均值。如果 items 或 prices 数组不存在，就使用 ?? 操作符将值设为 0。
注意事项
虽然链运算符可以简化访问嵌套对象或数组时的代码量，但我们仍然应该注意一些事项，以避免出现错误或异常。
首先，链运算符只能用于访问对象或数组的属性或方法，不能用于访问变量或函数等其他类型的值。如果需要访问其他类型的值，应该使用正常的访问语法。
其次，链运算符不能用于定义属性或方法。如果需要定义属性或方法，应该使用正常的对象或类语法。
最后，链运算符不是万能的，我们仍然需要进行数据验证和错误处理等处理。使用链运算符只是为了简化代码量，而不是放弃对数据的验证和处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c50c6e6e1fc40e36e42456
