如何用三元运算符改写网格点击切换颜色的JS代码及条件判断问题

问题1：if-else转三元运算符的正确写法 #

你可以直接基于grid1.style.backgroundColor的布尔隐式判定结果写三元表达式，改写后的完整代码如下：

const grid1 = document.querySelector(".cell01")
grid1.addEventListener("click", (e) => {
    console.log(e);
    // 三元运算符替换if-else
    grid1.style.backgroundColor = grid1.style.backgroundColor ? "" : "indigo";
})

问题2：!= true写法失效的原因 #

这个是JavaScript隐式类型转换的规则导致的，对应逻辑如下：

• grid1.style.backgroundColor的值是字符串类型：未赋值时是空字符串""，赋值后是颜色值字符串（比如"indigo"或浏览器自动转换的rgb(75, 0, 130)）
• 用==/!=对比字符串和布尔值时，JS会先把布尔值转为数字（true转1，false转0），再把字符串转为数字对比：
  1. 空字符串转数字结果是0，非空的普通字符串转数字结果是NaN
  2. 当判断条件为grid1.style.backgroundColor == false时：false转0，空字符串转0后和0相等返回true，非空颜色字符串转NaN和0不等返回false，刚好匹配你需要的逻辑，所以效果正常
  3. 当判断条件为grid1.style.backgroundColor != true时：true转1，空字符串转0和1不等返回true，非空颜色字符串转NaN和1不等也返回true，不管当前有没有赋值，条件始终为真，永远只会返回"indigo"，自然没法实现清除颜色的效果

建议你直接用变量本身的真值做判断，避免字符串和布尔值直接做相等对比的隐式转换坑，可读性和稳定性都更高。

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