HTML Canvas条件运算符无赋值使用及描边色切换优化咨询

嘿，我来帮你搞定这个Canvas描边色切换的问题！针对你的两个疑问，我整理了清晰的解决方案：

问题1：是否可使用条件运算符且无需赋值给变量？ #

当然可以！你完全没必要把结果赋值给一个无用的中间变量。条件运算符本身是一个表达式，它的计算结果可以直接赋值给目标属性，一步到位。

你原来的代码冗余且多了不必要的变量，改成下面这样就完美解决了：

shape.strokecolor = shape.strokecolor === 'black' ? 'red' : 'black';

这里逻辑很直白：如果当前描边色是black，就换成red，否则直接设为black——因为你的场景就是两种颜色来回切换，根本不需要第三个分支，一下子就精简了。

问题2：如何优化该描边色切换代码以实现最高效？ #

针对这种二元状态切换（只有两种颜色循环），有几种高效又简洁的写法，分场景推荐：

写法1：简化条件运算符（最直观，首选）

就是上面的写法，代码最短，可读性拉满，执行效率也最高：

shape.strokecolor = shape.strokecolor === 'black' ? 'red' : 'black';

写法2：对象映射（扩展性更强）

如果以后可能要增加更多颜色切换规则（比如新增blue↔green），用对象映射会更灵活，而且对象属性查找的效率非常高：

const colorSwitcher = {
  black: 'red',
  red: 'black'
};
// 加个默认值，防止出现意料之外的颜色时不会出错
shape.strokecolor = colorSwitcher[shape.strokecolor] || 'black';

后续要扩展的话，只需要在colorSwitcher里加键值对就行，维护起来特别方便。

小提醒

• 尽量用严格相等运算符===代替==，避免JS自动类型转换带来的潜在bug，这是前端开发的最佳实践哦。
• 你原来代码里的第三个分支（最后那个shape.strokecolor = 'red'）其实是多余的，因为你的需求就是black和red互切；如果确实要处理异常颜色，就用上面对象映射里的默认值写法。

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