javascript - 动态切换大小写 Javascript，将值附加到不同的变量

Question

我想在 javascript 中使用动态内容进行切换，我将举一个我使用 3 cases 的示例:

    for (var i = 1; i <= count; i++) {

        switch(hari) 
        {
            case 'senin':
                senin 
                += '<tr class="' + arr[i] + '">';
                senin 
                += '<td class="td'+hari + i + '">' + i + '</td>';
                senin 
                += '<td> <input type="time" class="form-control" name="waktu_1[]"> </td>';
                senin 
                += '<td> <input type="time" class="form-control" name="waktu_2[]"> </td>';
                senin 
                += '<td> <select class="form-control jenis_mapel" name="jenis_mapel[]" id="jenisMapel'+hari + i + '"><option value="pelajaran">pelajaran</option><option value="istirahat">istirahat</option><option value="upacara">upacara</option></select> </td>';
                senin 
                += '</tr>';
            break;
            case 'selasa':
                selasa 
                += '<tr class="' + arr[i] + '">';
                selasa 
                += '<td class="td'+hari + i + '">' + i + '</td>';
                selasa 
                += '<td> <input type="time" class="form-control" name="waktu_1[]"> </td>';
                selasa 
                += '<td> <input type="time" class="form-control" name="waktu_2[]"> </td>';
                selasa 
                += '<td> <select class="form-control jenis_mapel" name="jenis_mapel[]" id="jenisMapel'+hari + i + '"><option value="pelajaran">pelajaran</option><option value="istirahat">istirahat</option><option value="upacara">upacara</option></select> </td>';
                selasa 
                += '</tr>';
            break;
            case 'rabu':
                rabu 
                += '<tr class="' + arr[i] + '">';
                rabu 
                += '<td class="td'+hari + i + '">' + i + '</td>';
                rabu 
                += '<td> <input type="time" class="form-control" name="waktu_1[]"> </td>';
                rabu 
                += '<td> <input type="time" class="form-control" name="waktu_2[]"> </td>';
                rabu 
                += '<td> <select class="form-control jenis_mapel" name="jenis_mapel[]" id="jenisMapel'+hari + i + '"><option value="pelajaran">pelajaran</option><option value="istirahat">istirahat</option><option value="upacara">upacara</option></select> </td>';
                rabu 
                += '</tr>';
            break;
        }
    }

我正在考虑将所有案例按如下方式排列: ['senin','selasa','rabu','kamis','jumat','sabtu']

但我不知道如何以最优化的方式将其放入开关

有人有其他解决方案来缩短它吗？

Answer 1

如果您更改变量定义，这是可能的。无论 senin、selasa 等变量是什么，都将它们定义为对象的属性，而不是拥有许多独立的变量名称。例如，而不是

var senin = 'some string';
var selasa = 'some other string';
// ...

做

var htmlsByCase = {
  senin: 'some string',
  selasa: 'some other string',
  // ...
};

然后你可以只查找对象的属性，而不用使用switch。您还可以使用模板文字来使其更具可读性:

if (htmlsByCase[hari]) {
  htmlsByCase[hari] +=  `
    <tr class="${arr[i]}">
      <td class="td${hari}${i}">${i}</td>
      <td> <input type="time" class="form-control" name="waktu_1[]"> </td>
      <td> <input type="time" class="form-control" name="waktu_2[]"> </td>
      <td>
        <select class="form-control jenis_mapel" name="jenis_mapel[]" id="jenisMapel${hari}${i}">
          <option value="pelajaran">pelajaran</option><option value="istirahat">istirahat</option>
          <option value="upacara">upacara</option>
        </select>
      </td>
    </tr>
  `;
}

如果 hari 参数保证为以下之一 ['senin','selasa','rabu','kamis','jumat','sabtu'] 现在是对象的属性，那么上面的代码块中就不需要 if 语句。