首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >执行if语句的更好方法

执行if语句的更好方法
EN

Stack Overflow用户
提问于 2017-08-16 21:53:11
回答 4查看 62关注 0票数 0

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

我有一些十六进制的颜色,这些颜色在一个对象中存储为前景色和背景色。

当网页的宽度是一个特定的大小时,我希望确保不会使用对象中的某些特定颜色来更改文本颜色。

这就是我到目前为止所拥有的。这是有效的,我知道我也可以使用一个开关,但是其他人可以改善if || statemenent吗? fine...and。

代码语言:javascript
运行
复制
 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;

            }
        }'

谢谢你

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-08-16 21:59:14

您可以尝试使用Array#filter

代码语言:javascript
运行
复制
if (colorThemes.filter(a => (selector.foreground === a.foreground|| selector.foreground == a.background)).length > 0) {
  copyCount[i].style.color = selector.background;
} }
票数 0
EN

Stack Overflow用户

发布于 2017-08-16 21:56:01

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

代码语言:javascript
运行
复制
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');
}

票数 0
EN

Stack Overflow用户

发布于 2017-08-16 22:01:37

您可以使用带有颜色数组的Array#indexOf

代码语言:javascript
运行
复制
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表示颜色

代码语言:javascript
运行
复制
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!');
}

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45715489

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档