Уменьшить, если еще функция проверки

Question

У меня есть несколько флажков ввода, например
5 <input type="checkbox" name="A" class="A"> (с другим значением)
4 <input type="checkbox" name="B" class="B"> (с различными значениями)
6 <input type="checkbox" name="C" class="C"> (с различными значениями)
и 3 массива array_A [], array_B [], array_C [] для хранения значения ввода каждый раз, когда он проверяется или нет.

Я написал такую ​​функцию для добавления и удаления значения ввода в правый массив

$('input[type="checkbox"]').on('change', function(){
  if($(this).is(':checked')){
    if($(this).is('.A')){
      array_A.push($(this).val());
    }else if($(this).is('.B')){
      array_B.push($(this).val());
    }else if($(this).is('.C')){
      array_C.push($(this).val());
    }
  }else{
    if($(this).is('.A')){
      position = array_A.indexOf($(this).val());
      if ( ~position ) array_A.splice(position, 1);
    }else if($(this).is('.B')){
      position = array_B.indexOf($(this).val());
      if ( ~position ) array_B.splice(position, 1);
    }else if($(this).is('.C')){
      position = array_C.indexOf($(this).val());
      if ( ~position ) array_C.splice(position, 1);
    }
  }
})

В настоящее время я использую функцию if else столько раз, и я определенно не думаю, что это хороший способ сделать это, мне интересно, есть ли лучший способ сделать это. Спасибо.

Answer 1

Попробуйте вместо этого использовать объект, проиндексированный по имени класса:

const arrays = {
  A: [],
  B: [],
  C: [],
}
$('input[type="checkbox"]').on('change', function(){
  const arr = arrays[this.className];
  if($(this).is(':checked')){
    arr.push(this.value);
  } else {
    const position = arr.indexOf(this.value);
    if (position !== -1) {
      arr.splice(position, 1);
    }
  }
});

Обратите внимание, что, вероятно, лучше использовать !== -1, а не ~ - большинство читателей кода, вероятно, будут весьма смущены ~ пока они не ищут его .