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

Question

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

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

对于 item2，这些阈值不同且颜色不同。我想创建一个函数(getTextClass)，它将根据项目及其阈值返回颜色

请帮帮我

Answer 1

我总是建议尽可能坚持某种类型/接口(interface)。我建议将 Metric 及其容器提取到如下接口(interface):

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 升序排序时，此 if 过程才有效，但如果需要，始终可以按另一个函数排序。

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