Question

我正在制作一张图表，如果某人访问某个地区的国家（在这种情况下是亚洲），请将该栏设为某种颜色。

 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;

显然，代码是错误的。

Answer 1

你可以做你正在谈论的一堆数组，但我可能会使用一个对象作为地图：

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

请注意，具有有效文字名称的属性可以按字面编写，但不具有有效文字名称的属性（如朝鲜，因为空格）会放在引号中。或者你可以将它们全部放在引号中以保持一致。

然后

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等过时的浏览器，您可能需要Array#indexOf的垫片（polyfill）。搜索将变为一个。所有现代浏览器都内置了它。

~~旁注：我非常确定格陵兰岛不在北美。~~你知道什么，I'm wrong关于那个......

Answer 2

您可以使用对象图来“查找”给定国家/地区名称的颜色：

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

Answer 3

是的，你可以做你做过的事情。以下是您的问题的工作示例。

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

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

3 个答案: