javascript - 如何理解这个用 JavaScript 编写的随机颜色函数？

Question

我是 JavaScript 的新手， future 还有很多东西要学。

现在我正在尝试了解一种用于随机化网页背景颜色的方法。该网页有一个按钮，该按钮将通过执行名为 "randColor"

的 JavaScript 函数来更改网页的颜色

代码如下:

document.querySelector("button").addEventListener("click", function(){
  document.body.style.background = randColor();
})

function randColor(){
  return '#' + (function co(lor){   return (lor +=
    [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'][Math.floor(Math.random()*16)])
    && (lor.length == 6) ?  lor : co(lor); })('');
}

现在，我确实从 randColor 函数中了解了几件事:

• “#”表示十六进制颜色值的开头。

• 我有点理解条件三元运算符

  (lor.length == 6) ? lor: co(lor); })
  

  它基本上是同一个表达式的快捷方式，可以这样写:

  If(lor.length == 6)}
     lor = lor
  }else{
     co(lor) // This calls co(lor) function recursively
  

• 我也理解这里的部分:

  [Math.floor(Math.random()*16)]
  

  我确信这个函数只是一种生成 0 到 16 之间的随机数然后将其四舍五入以便它可以对应于适当的十六进制值的方法。

但是，我不明白整个事情是如何协同工作的。有人会向我解释其余的吗？

Answer 1

上帝啊，永远不要写这样的函数，它很丑，而且实际上没有理由让它递归。在任何情况下，这只是返回一个名为 co 的函数，该函数递归调用自身，直到它传递的字符串的长度为 6。这里它被扩展:

function randColor() {
    function co(lor) {
        const digits = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];
        lor += digits[ Math.floor(Math.random()*16) ]; // (add digit at random index from 0-15)
        if (lor.length === 6) {
            return lor;
        } else {
            return co(lor);
        }
    }

    return '#' + co('');
}

下面是执行的样子:

Example Execution:
-> call randomColor()
-> call co("")
-> call co("f")
-> call co("fa")
-> call co("fa5")
-> call co("fa56")
-> call co("fa569")
// ^ Execution stops here
// fa569b is returned from the final co (notice a final digit is added first)
// '#' is added to the string
// and the full string is returned from randomColor.