更好的if语句

Question

I am trying to improve some of my JS skills.

I have a number of colours in hex which are in an object stored as foreground colours and background colours.

When the width of the webpage is a particular size i want to make sure that some specific colours are NOT used from the object to change the text colour.

How heres what I have so far. This works fine...and i know i could use a switch too but can anyone else improve the if || statemenent please?

 var colorThemes = [
        // Combo 1:
        { foreground: "#0A1C6B", background: "#5DF0AD" },
        // Combo 2:
        { foreground: "#C2F5FF", background: "#0A1C6B" },
        // Combo 3:
        { foreground: "#583985", background: "#CCCCF0" },
        // Combo 4:
        { foreground: "#FBBEA6", background: "#5839B5" },
        // Combo 5:
        { foreground: "#8A350D", background: "#FFDB0D" }
    ]

   var randomnumber = Math.floor((Math.random() * colorThemes.length));

   var selector = colorThemes[randomnumber]

   if (selector.foreground === "#0A1C6B" || selector.foreground === "#5DF0AD" || selector.foreground === "#C2F5FF" || selector.foreground === "#ABD1fA" || selector.foreground === "#FBBEA6" || selector.foreground === "#FACCD4" || selector.foreground === "#FF5919" ||  selector.foreground === "#D9F2AD" || selector.foreground === "#83BF25"){

            copyCount[i].style.color = selector.background;

            }
        }'

Thank you

Answer 1

You can create an array including all the colors and then check that the selected color is included in this array.

 const colorThemes = [ { foreground: "#0A1C6B", background: "#5DF0AD" }, { foreground: "#C2F5FF", background: "#0A1C6B" }, { foreground: "#583985", background: "#CCCCF0" }, { foreground: "#FBBEA6", background: "#5839B5" }, { foreground: "#8A350D", background: "#FFDB0D" } ] const colors = colorThemes.reduce((acc, curr) => { acc.push(curr.foreground, curr.background); return acc; }, []); const randomnumber = Math.floor((Math.random() * colorThemes.length)); const selector = colorThemes[randomnumber] if (colors.includes(selector.foreground)) { console.log('Success'); } 

Answer 2

You could try with Array#filter

if (colorThemes.filter(a => (selector.foreground === a.foreground|| selector.foreground == a.background)).length > 0) {
  copyCount[i].style.color = selector.background;
} }

Answer 3

You could use Array#indexOf with an array for the colors.

 var colorThemes = [{ foreground: "#0A1C6B", background: "#5DF0AD" }, { foreground: "#C2F5FF", background: "#0A1C6B" }, { foreground: "#583985", background: "#CCCCF0" }, { foreground: "#FBBEA6", background: "#5839B5" }, { foreground: "#8A350D", background: "#FFDB0D" }], randomnumber = Math.floor(Math.random() * colorThemes.length), selector = colorThemes[randomnumber], changeColors = ["#0A1C6B", "#5DF0AD", "#C2F5FF", "#ABD1fA", "#FBBEA6", "#FACCD4", "#FF5919", "#D9F2AD", "#83BF25"]; if (changeColors.indexOf(selector.foreground) !== -1) { console.log('change color!'); //copyCount[i].style.color = selector.background; } 

With ES6 you could use Set for the colors

 var colorThemes = [{ foreground: "#0A1C6B", background: "#5DF0AD" }, { foreground: "#C2F5FF", background: "#0A1C6B" }, { foreground: "#583985", background: "#CCCCF0" }, { foreground: "#FBBEA6", background: "#5839B5" }, { foreground: "#8A350D", background: "#FFDB0D" }], randomnumber = Math.floor(Math.random() * colorThemes.length), selector = colorThemes[randomnumber], colorSet = new Set(["#0A1C6B", "#5DF0AD", "#C2F5FF", "#ABD1fA", "#FBBEA6", "#FACCD4", "#FF5919", "#D9F2AD", "#83BF25"]); if (colorSet.has(selector.foreground)) { console.log('change color!'); //copyCount[i].style.color = selector.background; } else { console.log('nothing has changed!'); } 

Answer 4

Don't use an if statement. They are code-smells.

var colorThemes = {
  "#0A1C6B": "#5DF0AD"
  , "#C2F5FF": "#0A1C6B"
  , "#583985": "#CCCCF0"
  , "#FBBEA6": "#5839B5"
  , "#8A350D": "#FFDB0D"
};

var foregroundColors = Object.keys(colorThemes);
var randomForegroundIdx = Math.floor(Math.random() * colorThemes.length);
var randomForeground = foregroundColors[randomForegroundIdx];
copyCount[i].style.color = colorThemes[randomForeground];