javascript - JavaScript 中的 if-else 条件更动态

Question

我有一个 JavaScript 代码，它有许多针对不同品牌的 if-else 条件 w.r.t html

function get_brand_label(b) {
    var brand1label = '<div class="brand1_label">B1</div>';
    var brand2label = '<div class="brand2_label">B2</div>';
    var brand3label = '<div class="brand3_label">B3</div>';
    var brand4label = '<div class="brand4_label">B4</div>';

    if (b == 'Brand1') {
        return brand1label;
    } else if (b == 'Brand2') {
        return brand2label;
    } else if (b == 'Brand3') {
        return brand3label;
    } else if (b == 'Brand4') {
        return brand4label;
    }
}

我在另一个函数中使用这个 get_brand_label 函数作为:

var label = get_brand_label(d.brand);

以后如果要添加B5和B6，需要添加新的if-else条件

那么在添加新品牌之前，有没有办法让上面的现有代码更具动态性，这样我以后就不需要在添加新品牌时添加 if-else 条件了

Answer 1

您可以只制作标签和品牌的映射，然后根据品牌返回标签:

const brandLabelMap = {
  Brand1: '<div class="brand1_label">B1</div>',
  Brand2: '<div class="brand2_label">B2</div>',
  Brand3: '<div class="brand3_label">B3</div>',
  Brand4: '<div class="brand4_label">B4</div>'
};

function get_brand_label(b) {
  return brandLabelMap[b];
}