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

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

请帮帮我

Answer 1

我总是建议尽可能遵守类型/界面。我建议将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);
}

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

1 个答案: