如何使用可选链操作符(?)递增JavaScript对象属性？

问题场景 #

我想在Person类的birthday方法中，仅当实例的age属性已设置（非undefined）时，才将年龄加1。原本用if判断的代码可以正常运行，但尝试用this?.age++的写法时，触发了语法错误：invalid increment/decrement operand，想知道有没有用可选链实现的可行方式。

示例代码：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
let peter = new Person("Peter", 27);
let paul = new Person("Paul", undefined);

// 可正常运行的写法
Person.prototype.birthday = function() {
  if (this.age) this.age++;
};

// 报错的写法
// Person.prototype.birthday = function(){this?.age++};

peter.birthday();
paul.birthday();
console.log(peter, paul);

错误原因 #

自增（++）/自减（--）运算符要求操作数是一个可赋值的引用（Reference），而可选链操作符（?.）返回的是属性的具体值，而非属性的引用。当this?.age遇到undefined时，表达式结果是undefined；即使有值，它也只是一个值类型，无法被自增运算符修改，因此会抛出语法错误。

可行实现方式 #

方式一：结合可选链与逻辑与（和原if行为一致） #

利用逻辑与（&&）的短路特性，仅当this?.age为真时才执行自增操作，和原if (this.age)的逻辑完全匹配（注意：如果age为0，会被视为假值，不会执行自增）：

Person.prototype.birthday = function() {
  this?.age && (this.age++);
};

方式二：明确判断age是否为undefined #

如果需要支持age为0的场景（比如婴儿0岁过生日要变为1岁），可以用可选链判断age是否不是undefined：

Person.prototype.birthday = function() {
  if (this?.age !== undefined) {
    this.age++;
  }
};

方式三：可选链配合赋值表达式（按需选用） #

如果希望在age未定义时也初始化并递增（比如默认从0开始），可以用以下写法，但这和原需求的“仅当已设置时递增”逻辑不同：

Person.prototype.birthday = function() {
  this.age = (this?.age || 0) + 1;
};

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