【JavaScript】if 的简洁写法｜ 三元运算子

判断的条件？符合条件执行冒号前：不符合条件执行冒号後

看 w3c setInterval() 的范例时学习到的三元运算子概念

const myInterval = setInterval(setColor, 500);

function setColor() {
  let x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}

function stopColor() {
  clearInterval(myInterval);
}

语法解析

背景颜色如果是黄色的话，颜色改为粉色；不是黄色的话改为黄色。
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";

1. 後半段的判断条件
   x.style.backgroundColor == "yellow" ? "pink" : "yellow";
   document body 的背景颜色是不是黄色？
   true ➡️ "pink"
   false ➡️ "yellow"

2. 前半段指定样式到 document body
   x.style.backgroundColor = "pink"
   x.style.backgroundColor = "yellow"

也可以进行双重判断

都是以问号/冒号判别条件

function findGreaterOrEqual(a, b) { 
  if(a === b) { 
    return "a and b are equal"; 
  } 
  else if(a > b) { 
    return "a is greater"; 
  } 
  else { 
    return "b is greater "; 
  } 
}

// 三元运算子
function findGreaterOrEqual(a, b) {
  return (a === b) ? "a and b are equal" : (a > b) ? "a is greater" : "b is greater";
}

参考来源：
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_setinterval_clearinterval2
https://medium.com/@kyokyox2/js-%E4%B8%89%E5%85%83%E9%81%8B%E7%AE%97%E7%AC%A6-%E4%B8%89%E5%85%83%E9%81%8B%E7%AE%97%E5%80%BC-3987be9623a5