Использование переменной для вызова определенной функции в JavaScript вместо функции IF

Question

Итак, у меня есть строка, которую я хочу нарисовать на холсте HTML5, используя javascript.У меня есть отдельные функции, которые будут рисовать каждый символ алфавита.

Я использовал цикл for для перебора символов в строке.

let theText = "String"

for (let i = 0; i < theText.length; i++) {
  theText[i];
}

У меня также есть функции для каждого символа в алфавите

function draw_A() {
  //code that draws A
}

... a through to x

function draw_X() {
  //code that draws X
}

В настоящее время мое решение для рисования символов:

for (let i = 0; i < theText.length; i++) {
  c = theText[i];

  if (c == "A") {
    draw_A();
  }

  ... a through to x

  else if (c == "X") {
    draw_X();
  }
}

Я знаю, что этот метод неэффективен, и я также пытался использовать case,однако, это просто упрощенная версия того, что я уже делаю.

Я знаю, что если вы хотите вставить переменную в строку в javascript, вы можете использовать символы $ {} внутри `` toсделай это.Приведенный ниже код вставит переменную 'username' в строку.

let myString = `Hello ${username}, welcome to this script`;

Есть ли аналогичный способ сделать это с помощью функций.Я не хочу писать 26 if или case операторов для выполнения чего-то, что, как я знаю, должно быть намного проще

Answer 1

Вы можете использовать литерал объекта, который соответствует символу функции

let functionHash = {
  a : draw_A,
  b : draw_b
  //etc.....
}

functionHash['a'](); //Calls draw a

Это будет занимать фиксированный объем памяти.Другим подходом, который не использует структуру данных, был бы оператор switch.Пока размер ваших входящих символов постоянен.

Answer 2

Просто создайте объект поиска:

const lookup = {
 a: draw_A,
 /*...*/
 x: draw_X
};

И тогда вы можете просто сделать

lookup["a"]()

---

В настоящее время вы можете сделать это немного более хакерским (/ уродливым) безобъект поиска:

window["draw_" + "a"]()