Bessere Möglichkeit, dies zu tun, wenn Aussage

Question

Ich versuche, einige meiner JS Fähigkeiten zu verbessern.

Ich habe eine Reihe von Farben in Hex, die in einem Objekt als Vordergrund Farben und Hintergrundfarben gespeichert sind.

Wenn die Breite der Webseite eine bestimmte Größe hat, möchte ich sicherstellen, dass bestimmte Farben NICHT vom Objekt verwendet werden, um die Textfarbe zu ändern.

Wie heres was ich bisher habe. Das funktioniert gut ... und ich weiß, dass ich auch einen Schalter benutzen kann, aber kann jemand anderes das if || verbessern Bitte um Aussage?

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; 

      } 
     }' 

Danke

Answer 1

Sie könnten versuchen, mit Array#filter

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

Answer 2

Sie ein Array erstellen können alle Farben einschließlich und dann prüfen, ob die ausgewählte Farbe in diesem Array enthalten ist.

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 3

Sie Array#indexOf mit einem Array für die Farben verwenden könnte.

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; 
 
}

Mit ES6 Sie Set für die Farben

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

Verwenden Sie eine nicht if-Anweisung verwenden könnte. Sie sind Code-Gerüche.

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];