javascript - 如何通过对象的对象进行映射[Vuejs]

我想创建一个映射函数，如下所示：

export const mapMetricsToValue: any = {
    item1: {
        0: 'green--text',
        0.3: 'red--text',
        0.45: 'orange--text',
    },
    item2:{
        0: 'yellow--text',
        0.5: 'blue--text',
        0.65: 'purple--text',
    }
};

export function getTextClass(metric: string, value: Number): string {
    return mapMetricsToValue(metric,value);
}

这个想法是可以有不同的项目（item1，item2 ...），对于这些项目值中的每一个，都有一个阈值颜色来定义。例如：
    对于项目1：

-if (0<item1<0.3) it should return green,
-if(0.3<item1<0.45) it should return red,
-else it should return orange

对于第2项，这些阈值不同且颜色不同。
我想创建一个函数（getTextClass），该函数将根据项目及其阈值返回颜色

请帮帮我

最佳答案

我总是建议尽可能地遵守类型/接口。我建议将Metric及其容器提取为如下所示的接口：

export interface Metric {
    lowerBound: number;
    color: string;
}

export interface MetricItem {
    name: string;
    metrics: Metric[];
}

这样，如果以后需要它们，您可以更轻松地按名称引用这些值。然后，我们将像这样创建mapMetricsToValue：

export const mapMetricsToValue: MetricItem[] = [
    {
        name: 'item1',
        metrics: [
            {
                lowerBound: 0,
                color: 'green'
            },
            {
                lowerBound: 0.3,
                color: 'red'
            }, //...
        ]
    },
    {
        name: 'item2',
        metrics: [
            {
                lowerBound: 0,
                color: 'yellow'
            } //...
        ]
    }
];

然后确定要映射到给定值的颜色就像在给定MetricItem的值数组上进行迭代并检查给定值是否大于当前lowerBound和下一个lowerBound一样简单。仅当值已经按lowerBound升序排序时，此课程才起作用，但是如果需要，可以始终通过另一个函数对它进行排序。

export function getTextClass(metric: MetricItem, value: number) : string {
    let metrics = metric.metrics;
    let len = metrics.length;

    for(let i = 0; i < len; i++) {
        let currentMetric = metrics[i];

        //if it's the last item in the array then we know it's above the lower bound
        if(i === len - 1) {
            return currentMetric.color;
        }

        let nextMetric = metrics[i + 1];

        if(currentMetric.lowerBound <= value && nextMetric.lowerBound > value) {
            return currentMetric.color;
        }
    }
}

要从名称中找到正确的指标，我们可以使用以下函数：

export function findMetricByName(name: string, metrics: MetricItem[]): MetricItem {
    return metrics.find(metric => metric.name === name);
}