根据值差比较一个变量与对象和return元素

Question

由于我在 JS 方面不是那么好，我会很感激这里的帮助...

我有这个数组：

segments = [
    { state: 33, color: "red" },
    { state: 66, color:"yellow" },
    { state: 100, color: "green" }
]

三个变量：

goal = 100
currentValue = 26
percentage = currentValue * 100 / goal

我正在尝试编写一个函数来比较对象中的百分比和状态，以及 return 伴随状态的颜色。例如：

如果百分比 < 33，应该 return "red".

如果百分比介于 33 和 66 之间，则必须 return "yelow"。

如果百分比 > 66 或 > 目标，则必须 return "green"。

到目前为止我有这个，但它不起作用：

defineChartColor = (currentActivity, goal) => segments.find(segments => segments.state > percentage).color

Answer 1

您需要检查对象的 state，而不是 value <=。等号对于查找精确值很重要，例如 100.

的最后一个

var segments = [{ state: 33, color: "red" }, { state: 66, color:"yellow" }, { state: 100, color: "green" }],
    goal = 100,
    currentValue = 26,
    percentage = currentValue * 100 / goal,
    getColor = (percentage, goal) => segments.find(({ state }) => percentage === goal
        ? state === 100
        : percentage <= state 
    ).color;

console.log(getColor(33, 100));
console.log(getColor(66, 100));
console.log(getColor(100, 100));
console.log(getColor(20, 20));

根据值差比较一个变量与对象和return元素

Compare a variable with object and return element according to the value difference

javascript

ecmascript-5

ecmascript-6