Как переключать много значений одновременно / значения в списке?

Question

Есть ли эффективный способ переключать логическое значение нескольких переменных одновременно? Мои переменные - это строки, которые я хочу показать / скрыть в зависимости от userValue.

myList = [lineA, lineB, lineC, lineD]

Мой пример ниже очень жестко запрограммирован. Здесь много повторного кода. Есть ли более разумный способ сделать это?

if (userValue == 'A') {
    lineA.visible = true;
    lineB.visible = false;
    lineC.visible = false;
    lineD.visible = false;
} else if (userValue == 'B') {
    lineA.visible = false;
    lineB.visible = true;
    lineC.visible = false;
    lineD.visible = false;
} else if (userValue == 'C') {
    lineA.visible = false;
    lineB.visible = false;
    lineC.visible = true;
    lineD.visible = false;
} else if (userValue == 'D') {
    lineA.visible = false;
    lineB.visible = false;
    lineC.visible = false;
    lineD.visible = true;
}

Answer 1

const lines = [lineA, lineB, lineC, lineD];
const userInputs = ['A', 'B', 'C', 'D']

// Reset visible states for all lines
for (line of lines) {
    line.visible = false;
}

// Set visible = true for specific line, picked by entered userValue
lines[userInputs.indexOf(userValue)].visible = true

Answer 2

Лучше бы был распределительный шкаф:

//initialize to false
lineA.visible = false;
lineB.visible = false;
lineC.visible = false;
lineD.visible = false;

switch(userValue ) {
  case 'A':
    lineA.visible = true;
    break;
   case 'B':
    lineB.visible = true;
    break;
 case 'C':
    lineC.visible = true;
    break;
 case 'D':
    lineD.visible = true;
    break;
  default:
    // do something
}

Answer 3

Вы можете взять объект для значений и массив для строк.Затем повторите и установите visible с результатом проверки.

var userValue = 'A',
    values = { A: lineA, B: lineB, C: lineC, D: lineD },
    userObject = values[userValue],
    lines = [lineA, lineB, lineC, lineD];

lines.forEach(line => line.visible = line === userObject);

Answer 4

Вы можете создать два массива: один массив букв и второй массив строк.Переберите массив строк и измените все на false.Затем получите индекс userValue из массива букв и измените строку с этим индексом, изменив visible на true

const arr = ['A','B','C','D']
const objs = [lineA,lineB,lineC,lineD];
objs.forEach(x => x.visible = false)

let index = arr.indexOf(userValue);
obj[index].visible = true;