entityMap|blocks|key|37ks|text|您可以创建一个包含所有颜色的数组，然后检查选定的颜色是否包含在此数组中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3daol|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');
}|code-block|syntax|javascript|3c56i|​|3a7j5^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|L|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|M|9|@]|A|@]|B|$]]|$2|J|4|-4|6|7|8|N|9|@]|A|@]|B|$]]]]

<p>You can create an array including all the colors and then check that the selected color is included in this array.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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) =&gt; {
  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');
}</code></pre>
</div>
</div>
</p>


entityMap|blocks|key|33ngn|text|您可以尝试使用Array#filter|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|dcdfb|if+(colorThemes.filter(a+=>+(selector.foreground+===+a.foreground%7C%7C+selector.foreground+==+a.background)).length+>+0)+{
++copyCount[i].style.color+=+selector.background;
}+}|code-block|syntax|javascript|ds207^0|7|C|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@$A|N|B|O|C|D]]|E|@]|F|$]]|$2|G|4|H|6|I|8|P|9|@]|E|@]|F|$J|K]]|$2|L|4|-4|6|7|8|Q|9|@]|E|@]|F|$]]]]

<p>You could try with <code>Array#filter</code></p>

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


entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf|1|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set|blocks|key|deff1|text|您可以使用带有颜色数组的Array#indexOf。|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|em85f|​|67kmm|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;
}|code-block|syntax|javascript|cl8qk|f06gv|对于ES6，您可以使用Set表示颜色|bvf79|2k1i7|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!');
}|dt91n|1546p^0|C|D|C|D|0|0|0|0|0|B|3|B|3|1|0|0|0|0^^$0|$1|$2|3|4|5|6|$7|8]]|9|$2|3|4|5|6|$7|A]]]|B|@$C|D|E|F|2|G|H|13|I|@$J|14|K|15|L|M]]|N|@$J|16|K|17|C|18]]|6|$]]|$C|O|E|P|2|G|H|19|I|@]|N|@]|6|$]]|$C|Q|E|R|2|S|H|1A|I|@]|N|@]|6|$T|U]]|$C|V|E|P|2|G|H|1B|I|@]|N|@]|6|$]]|$C|W|E|X|2|G|H|1C|I|@$J|1D|K|1E|L|M]]|N|@$J|1F|K|1G|C|1H]]|6|$]]|$C|Y|E|P|2|G|H|1I|I|@]|N|@]|6|$]]|$C|Z|E|10|2|S|H|1J|I|@]|N|@]|6|$T|U]]|$C|11|E|P|2|G|H|1K|I|@]|N|@]|6|$]]|$C|12|E|-4|2|G|H|1L|I|@]|N|@]|6|$]]]]

<p>You could use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" rel="nofollow noreferrer"><code>Array#indexOf</code></a> with an array for the colors.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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;
}</code></pre>
</div>
</div>
</p>

<p>With ES6 you could use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set" rel="nofollow noreferrer"><code>Set</code></a> for the colors</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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!');
}</code></pre>
</div>
</div>
</p>


entityMap|blocks|key|4dorv|text|不要使用if语句。它们是代码的味道。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2da7f|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];|code-block|syntax|javascript|3cleq^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|J|9|@]|A|@]|B|$F|G]]|$2|H|4|-4|6|7|8|K|9|@]|A|@]|B|$]]]]

<p>Don't use an if statement.  They are code-smells.</p>

<pre><code>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];
</code></pre>


<p>I am trying to improve some of my JS skills.</p>

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

<p>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.</p>

<p>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?</p>

<pre><code> 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;

            }
        }'
</code></pre>

<p>Thank you</p>


Better way to do this if statement

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我正在努力提高我的一些JS技能。 我有一些十六进制的颜色，这些颜色在一个对象中存储为前景色和背景色。 当网页的宽度是一个特定的大小时，我希望确保不会使用对象中的某些特定颜色来更改文本颜色。 这就是我到目前为止所拥有的。这是有效的，我知道我也可以使用一个开关，但是其他人可以改善if || statemenent吗? f...

问执行if语句的更好方法
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问执行if语句的更好方法EN