在JavaScript方面,我是一名新手,但仍然有很多东西需要学习.

现在,我正在尝试了解一种用于随机化网页背景颜色的方法.该网页具有一个按钮,该按钮将通过执行名为“ 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之间的随机数,然后将其四舍五入的方法,因此它可以对应于适当的十六进制值.

但是,我不了解整个过程如何协同工作.有人可以向我解释其余的吗？

解决方法:

好主从未写过这样的函数,这很丑陋,而且实际上没有理由要递归.无论如何,这只是返回一个称为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.