Как создать слушателя, который слушает несколько сочетаний клавиш Ctrl + [1-9]?

Question

Вопрос

Как создать слушателя, который прослушивает несколько комбинаций клавиш Ctrl + [1-9], а затем передает значение нажатой комбинации клавиш методу changeRoute (pressedNumber)?

Например,

• Ctrl + 1 нажат
• changeRoute (pressedNumber) отображает 1 в консоли
• Ctrl + 2 нажат
• changeRoute (pressedNumber)в консоли отображается 2
• ... и т. д.

Код (vue.js)

Пока у меня есть это:

created () {
  window.addEventListener('keydown', this.switchTab)
},

methods: {
  switchTab (event) {
    if (event.ctrlKey && event.keyCode === 49) {
     this.changeRoute (event)        
    }

    if (event.ctrlKey && event.keyCode === 50) {
     this.changeRoute (event)        
    }
    ...
  },
  changeRoute (event) {
    console.log(event.key)
  }
}

Как мне избежать 9 if заявлений?

ОБНОВЛЕНИЕ:

Я решил проблему следующим образом:

if ((event.key >= 1 && event.key <= 9) && event.ctrlKey == true) {
  let tabPathIndex = event.key - 1
}

Answer 1

Если вы не хотите быть явным, вы можете использовать оператор switch:

if(event.ctrlKey) {
    switch(event.keyCode) {
        case 49: case 50: case 51: case 52: case 53: 
        case 54: case 55: case 56: case 57: case 58:
            this.changeRoute(event);
            break;
    }
}

Answer 2

F1-F9 ключи находятся в диапазоне возможных чисел, поэтому просто используйте этот диапазон в одном выражении if:

created () {
  window.addEventListener('keydown', this.switchTab)
},

methods: {
  switchTab (event) {
    // F1 = 112, F12 = 123 
    if (event.ctrlKey && event.keyCode > 111 && event.keyCode < 124   ) {
     this.changeRoute (event)        
    }
  },
  changeRoute (event) {
    console.log(event.key)
  }
}

Демонстрация Vanilla JS:

   // Try pressing CTRL+F1 to F12 (give the demo window focus first)
document.addEventListener('keydown', e => {
    console.log( e.keyCode );
    return false;
})