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

Question

I'm a newbie when it comes to JavaScript and still have a lot to learn down the road.

Right now I'm trying to understand a method which is used to randomise the background colour of a webpage. The webpage has a button which will change the colour of the webpage by executing JavaScript function named "randColor"

The code can be seen below:

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); })('');
}

Now, I do understand several things from the randColor function:

• the "#" denotes the beginning of a hexadecimal colour value.

• I kinda understand the conditional ternary operator

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

  It's basically a shortcut for the same expression that can be written like this:

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

• I understand the section right here as well:

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

  I'm sure this function is just a way to generate a random number between 0 and 16 and then round it down so it can correspond to a proper hexadecimal value.

However, I don't understand how the whole thing works together. Would someone explain the rest to me?

Answer 1

Good lord never write a function like this, it's ugly and there's literally no reason for it to be recursive. In any case this is just returning a function called co that that recursively calls itself until the length of the string it's passing around is 6. Here it is expanded:

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('');
}

and here's what execution would look like:

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.

Answer 2

lor += [0, 1, 2, ... adds a random hex digit.

The && makes sure the next expression is evaluated.

(lor.length == 6) ? lor: co(lor); }) (lor.length == 6) ? lor: co(lor); }) adds another character to lor with co(lor) if it's not long enough, and if it is returns it.

Don't code like this; it's unreadable.

Answer 3

Breaking this down:

• The return # + simply prepends a hashtag to the string, to represent the hash colour.
• The brackets wrapping around function co(lor) are an immediately-invoked function expression (IIFE) , which automatically executes, passing the empty string '' into the function (making lor a string).

• The next part is a double return (joined with the && ), and according to Mozilla :

  expr1 && expr2 Returns expr1 if it can be converted to false; otherwise, returns expr2. Thus, when used with Boolean values, && returns true if both operands are true; otherwise, returns false.

  1. [Math.floor(Math.random() * 16)] returns a random index of the array [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'] , essentially picking a hexadecimal character at random. This gets appended to the existing string lor with lor += .
  2. The ternary (lor.length == 6) ? lor : co(lor) (lor.length == 6) ? lor : co(lor) checks if the string lor contains 6 characters yet. If it does , it returns the string lor . If not , it returns co , passing lor (the current string) as the function parameter.

Considering non-empty strings return true , the inner return basically just checks that the ternary is true . And this ternary keeps re-calling the function until it contains exactly six hexadecimal characters, at which point they get returned as lor .

And this can all be seen in action:

 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); })(''); } 

 <button>Go!</button> 

Hope this helps clarify it a little! :)

Answer 4

There're bunch of ways to acheive what you want, but basically, I am going to introduce some thing to keep in your mind when you do coding.

1. Performance vs readability

It's always on the table for debating. But, let's think there're 2 types of code that performs well within similar time. Then, you should consider readability more than performance, except you and your coworkers made certain rules for coding or it's a really sensitive project on speed, such as networking .

2. Call functions often?

You should also consider this. For example, the function of yours, randColor (), basically generates rgb values several times. But what if we can make an another function which generates numbers that are only related to colors? Something like this,

ranColor(){
    return '#' + ranRGB() + ranRGB() + ranRGB();
}

Well, though we don't know what's in ranRGB() , but at least we can say it's easier to read ranColor() , agree? However, remember. Like a coin has both sides, every behavior you choose will have a side effect no matter how big it is. What I mean is, if calling ranRGB() function inside ranColor() wasn't really meaningful and necessary either, it could mean you wasted your memory. So, always be careful when you separate code blocks.

3. Always think. "Is this the best way?"

Honestly, the majority of people who are studying programming will end up having similar skills at the end, except few genius. Meaning is, whether you're evaluated as a good programmer or not could simply be decided by your coding style, habbit, traces that makes people reading your codes think 'how deeply' this programmer had thought about his/her codes.

Anyway, if I were you, I probably would do like this.

function ranColor(){
    return 'rgb(' + ranNum() ',' + ranNum() + ',' + ranNum() + ')';
}

function ranNum(){
    return Math.round(Math.random() * 256);
}
var rgb = ranColor();

Answer 5

Let me break it down in detail for you:

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); })('');
}

The most important info about this code is that: whoever wrote this code probably lives in hell.

Let me re-write the function in a exact but clearer way and add some comments in it, and perhaps you'll understand better:

function randColor(){
    // Create a function that generates hex value
    var co = function(lor){
        // Array of all possible number/alphabet for hex value
        var list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];

        // Add a random item from `list` to `lor`
        // `Math.floor(Math.random()*16)` generates a random number from 0 to 16
        // If the random number generated is `10`, that means
        // list[10], which is value 'a'.
        // So, lor += 'a'
        lor += list[Math.floor(Math.random()*16)];

        return lor.length == 6    // If lor.length === 6
               ? lor              // Returns the hex color value, else
               : co(lor);         // Recursively call the `co` function
                                  // to add more item to `lor`, until it reaches a length of 6.
    };

    // Calls `co` function with an empty string as argument (serves as `lor`)
    // Then concatenate '#' to co's value
    // A random hex color value is formed.
    return '#' + co('');
}

Now, the function could have been better simplified:

 document.querySelector("button").addEventListener("click", function(){ this.innerText = randColor(); }) function randColor(hex){ var list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']; /** * If hex is not defined * hex = '#' * else * hex = hex */ hex = hex || '#'; hex += list[Math.floor(Math.random()*16)]; return hex.length === 7 ? hex : randColor(hex); } 

 <button>Start</button>