JavaScript获取对象可选值遇语法错误，求解决方案

错误原因 #

你使用的?.可选链操作符是ES2020（ECMAScript 2020）新增的语法特性，当前Programiz在线编译器使用的Node.js版本过低，不支持该语法，因此抛出SyntaxError: Unexpected token '.'。

解决方案 #

方案1：用传统存在性检查替代可选链 #

如果不想调整编译器环境，可改用兼容旧版JS的写法，先判断对象及属性是否存在，再通过||设置默认值：

const object = {
  "a": 1,
  "b": 2
};

console.log({
  "a": (object && object.a) || 2,
  "b": (object && object.b) || 4,
  "c": (object && object.c) || 6
});

注：||会将所有假值（如0、''、false）替换为默认值，如果你的属性可能包含这些假值，这个写法会不符合预期。

方案2：升级编译器环境并使用空值合并运算符（更推荐） #

1. 在Programiz编译器的设置中切换到Node.js 14.x及以上版本（ES2020及后续版本支持?.和??）
2. 使用??空值合并运算符替代||，它仅在左侧值为null或undefined时才使用默认值，更精准匹配你的需求：

const object = {
  "a": 1,
  "b": 2
};

console.log({
  "a": object?.a ?? 2,
  "b": object?.b ?? 4,
  "c": object?.c ?? 6
});

方案3：直接省略可选链（如果确定object本身一定存在） #

如果能保证object永远不是null或undefined，可以直接去掉?.，简化写法：

const object = {
  "a": 1,
  "b": 2
};

console.log({
  "a": object.a || 2,
  "b": object.b || 4,
  "c": object.c || 6
});

内容的提问来源于stack exchange，提问作者Bruno Peixoto