变量中用作if语句条件的字符串

strings in a variable to use as condition for if statement

本文关键字:条件 字符串 语句 if 变量      更新时间:2023-09-26

我正在制作一个图表,如果人们访问一个地区的一个国家(在本例中是亚洲),则将条形图设置为特定的颜色。

 if (
 d.visitCountry === "China" || d.visitCountry === "Japan" ||
 d.visitCountry === "Afghanistan" || d.visitCountry === "Armenia" || 
 d.visitCountry === "Azerbaijan" || d.visitCountry === "Bangladesh" || 
 d.visitCountry === "Bhutan" || d.visitCountry === "Brunei Darussalam" || 
 d.visitCountry === "Cambodia" || d.visitCountry === "Georgia" || 
 d.visitCountry === "Hong Kong" || d.visitCountry === "India" || 
 d.visitCountry === "Indonesia" || d.visitCountry === "Kazakhstan" || 
 d.visitCountry === "North Korea" || d.visitCountry === "South Korea" || 
 d.visitCountry === "Kyrgyzstan" || d.visitCountry === "Laos" || 
 d.visitCountry === "Macau" || d.visitCountry === "Malaysia" || 
 d.visitCountry === "Maldives" || d.visitCountry === "Mongolia" || 
 d.visitCountry === "Myanmar" || d.visitCountry === "Nepal" || 
 d.visitCountry === "Pakistan" || d.visitCountry === "Singapore" || 
 d.visitCountry === "Sri Lanka" || d.visitCountry === "Taiwan" || 
 d.visitCountry === "Tajikistan" || d.visitCountry === "Thailand" || 
 d.visitCountry === "Timor Leste" || d.visitCountry === "Turkmenistan" || 
 d.visitCountry === "Uzbekistan" || d.visitCountry === "Vietnam") {
     returnColor = "red";
 }

我使用的这个方法的问题是它冗长乏味。

有没有办法让它变成这样

var worldRegion = {
 worldRegion.Asia = [ China, Japan, North Korea ... ]
 worldRegion.northAmerica = [USA, Canada, Greenland ... ]
 worldRegion.Africa = [ ... ]
if (d.visitCountry === worldRegion.Asia) /* this is obviously wrong */ {
        returnColor = "red";
}
else if (d.visitCountry === worldRegion.northAmerica) /* this is obviously wrong */ {
        returnColor = "blue";
}
return returnColor;

显然这段代码是错误的

可以做你所说的一堆数组,但我可能会使用一个对象作为映射:

var countryColors = {
    China: "red",
    Japan: "red",
    "North Korea": "red",
    // ...
    USA: "blue",
    Canada: "blue",
    Greenland: "blue"
};

请注意,具有有效文字名称的属性可以按字面意思书写,但那些没有有效文字名称的属性(如North Korea,因为有空格)要放在引号中。或者你可以把它们都放在引号里以保持一致性。

然后

returnColor = countryColors[d.visitCountry];

但是如果你想用一堆数组来做,使用Array#indexOf:如果结果不是-1,条目在那里:

if (worldRegion.Asia.indexOf(d.visitCountry) !== -1) {
    returnColor = "red";
}
else if (worldRegion.northAmerica.indexOf(d.visitCountry !== -1) {
    returnColor = "blue";
}
// ...

旁注:如果你需要支持过时的浏览器,如IE8,你可能需要一个垫片(polyfill)的Array#indexOf。搜索一下就能找到。所有现代浏览器都内置了它。


旁注:我很确定格陵兰不在北美。

您可以使用对象映射来"查找"给定国家名称的颜色:

var colorMap = {
    "China": "red",
    "Japan": "red",
    // fill in other countries and colors here
    "USA": "blue"
};
function getColor(country) {
    var color = colorMap[country];
    if (!color) {
        // default color
        color = "black";
    }
    return color;
}

通过给代码增加一点复杂性,您也可以按颜色对它们进行分组:

var colorMap = {
    red: ["China", "Japan", "North Korea"],
    blue: ["USA", "Canada", "Greenland"],
    yellow: ["Kenya", "Egypt"]
};
function getColor(country) {
    for (var color in colorMap) {
        if (colorMap[color].indexOf(country) !== -1) {
            return color;
        }
    }
    return "black";
}

是的,你可以做你已经做过的事情。下面是您的问题的工作示例。

function GetColorBasedOnCountry(visitCountry) {
        var worldRegion = { Asia: ["China", "Japan", "North Korea", "India"],
            northAmerica: ["USA", "Canada", "Greenland"],
            Africa: ["SouthAfrica", "Zimbabwe"]
        };
        var returnColor = "";
        if (worldRegion.Asia.indexOf(visitCountry) > -1) {
            returnColor = "red";
        }
        else if (worldRegion.northAmerica.indexOf(visitCountry) > -1) {
            returnColor = "blue";
        }
        else
            returnColor = "green";
        return returnColor;
    }