JavaScript中的if-else條件更加動態

Question

我有一個JavaScript代碼，其中包含針對不同品牌的許多if-else條件wrt 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);

您甚至不需要\\可以返回標簽+您的品牌。

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無效的空格或其他字符，則也需要注意這一點。