如何更优雅紧凑地创建条件分支下的JavaScript对象？

当然有啦！这段代码里的重复逻辑可以通过三元条件表达式和属性简洁写法大幅简化，既保留可读性又让代码更紧凑。

基础简化版 #

先把判断条件存成变量避免重复计算，再用三元表达式处理每个属性的差异，不用重复写整个对象结构：

const isWork = currentName === 'WORK';
const dictionary = {
  currentName: isWork ? 'PLAY' : 'WORK',
  left: { timer: isWork ? !this.state.timer : this.state.timer },
  right: { timer: isWork ? this.state.timer : !this.state.timer }
};

更巧妙的版本（利用逻辑互斥） #

注意到left.timer和right.timer总是互为相反值，我们可以进一步减少重复判断：

const isWork = currentName === 'WORK';
const leftTimer = isWork ? !this.state.timer : this.state.timer;
const dictionary = {
  currentName: isWork ? 'PLAY' : 'WORK',
  left: { timer: leftTimer },
  right: { timer: !leftTimer }
};

只需要计算一次leftTimer，right.timer直接取反即可，逻辑更清晰。

可扩展的映射版（适合未来加更多状态） #

如果以后可能新增类似状态（比如'REST'），用对象映射的方式会更灵活，维护起来也更方便：

const stateMap = {
  WORK: { nextName: 'PLAY', leftTimer: !this.state.timer, rightTimer: this.state.timer },
  PLAY: { nextName: 'WORK', leftTimer: this.state.timer, rightTimer: !this.state.timer }
};
const { nextName, leftTimer, rightTimer } = stateMap[currentName];
const dictionary = {
  currentName: nextName,
  left: { timer: leftTimer },
  right: { timer: rightTimer }
};

所有状态切换规则都集中在stateMap里，后续修改或新增状态只需要调整这个对象就行。

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