Question

我正在努力提高我的一些JS技能。

我有十六种颜色，它们存储在作为前景色和背景色的对象中。

当网页的宽度是特定尺寸时，我想确保不使用某些特定颜色来改变文本颜色。

到目前为止我的表现如何。这工作正常......我知道我也可以使用开关，但其他任何人都可以改进if ||有意思吗？

 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;

            }
        }'

谢谢

Answer 1

您可以创建包含所有颜色的数组，然后检查所选颜色是否包含在此数组中。

＆＃13;

ip ssh pubkey-chain
   key-hash ssh-rsa 090A4713055CB0CBE097FFF2FFC8065B root@ansible

＆＃13;

Answer 2

您可以尝试使用Array#filter

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

Answer 3

您可以将Array#indexOf与数组一起用于颜色。

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

使用ES6，您可以使用Set作为颜色

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

不要使用if语句。它们是代码气味。

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

更好的方法来做这个if语句

4 个答案: