Question

我有一个JavaScript代码，其中包含针对不同品牌的很多if-else条件，而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];
}

Answer 2

尝试这个

    const yourFunction = (label) => {
      return label + "label";
    }
    yourFunction(label);

您甚至不需要\ else可以返回标签+您的品牌。

Answer 3

您可以改用object，并在扩展时添加额外的键/值对

function get_brand_label(b) {
    let mapping = {
      'Brand1': '<div class="brand1_label">B1</div>',
      'Brand2': '<div class="brand1_label">B2</div>',
      'Brand3': '<div class="brand1_label">B3</div>',
      'Brand4': '<div class="brand1_label">B4</div>',
    }
  return mapping[b]
}

console.log(get_brand_label('Brand2'))

Answer 4

就像其他人建议的那样，使用一个对象映射键值对并从中构造HTML，如下所示：

function get_brand_label(b) {
  const brandlabels = {
    "Brand1" : "B1",
    "Brand2" : "B2",
    "Brand3" : "B3",
    "Brand4" : "B4",
  };
  
  return `<div class="${b.toLowerCase()}_label">${brandlabels[b]}</div>`;
}

console.log(get_brand_label("Brand1"));

${b.toLowerCase()}_label将自动创建小写的类名。但是，如果您的品牌包含空格或其他对CSS无效的字符，那么您也需要注意这一点。

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

4 个答案: