JavaScript可选链表现异常：orderPizza执行后仍触发空值合并兜底

问题场景 #

调用包含以下方法的restaurant对象时，出现不符合预期的结果：

目标对象方法 #

order(starterIndex, mainIndex) {
  return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
},

orderPizza(mainIngredient, ...otherIngredients) {
  console.log(`Ordered pizza with ${mainIngredient} and additional: ${otherIngredients}`);
}

调用代码 #

console.log(restaurant.orderPizza?.('salami') ?? 'Method does not exist 1');
console.log(restaurant.order?.(0, 1) ?? 'Method does not exist 2');
console.log(restaurant.order?.(0, 1) ?? 'Method does not exist 3');
console.log(restaurant.orderRisotto?.(0, 1) ?? 'Method does not exist 4');

实际输出 #

Ordered pizza with salami and additional: 
Method does not exist 1
(2) ['Focaccia', 'Pasta']
(2) ['Focaccia', 'Pasta']
Method does not exist 4

原因分析 #

• orderPizza方法没有显式返回值，JavaScript中这类函数默认返回undefined
• 可选链?.调用存在的方法时，会执行方法并返回其返回值。因此restaurant.orderPizza?.('salami')的结果是undefined
• 空值合并运算符??的规则是：仅当左侧值为null或undefined时，才返回右侧值。这里左侧是undefined，所以触发了右侧的'Method does not exist 1'
• order方法有明确的数组返回值（非null/undefined），因此??不会触发右侧内容

解决方案 #

方案1：给方法添加返回值 #

为orderPizza添加显式返回值，避免返回undefined：

orderPizza(mainIngredient, ...otherIngredients) {
  console.log(`Ordered pizza with ${mainIngredient} and additional: ${otherIngredients}`);
  // 返回操作成功标识或相关数据
  return { status: 'success', mainIngredient };
}

方案2：拆分执行与判断逻辑 #

如果不需要方法返回值，直接拆分判断与执行逻辑，避免用??混淆方法存在性和返回值判断：

if (restaurant.orderPizza) {
  restaurant.orderPizza('salami');
} else {
  console.log('Method does not exist 1');
}

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