Переключение между элементами массива при помощи клавиш клавиатуры

Question

function keyPress(e) {
    let keyNum;
    var masiv = ['один', 'два', 'три', 'четыре', 'пять', 'шесть', 'семь', 'восемь', 'девять', 'десять'];
    if (window.event) {
        keyNum = window.event.keyCode;
    }
    else if (e) {
        keyNum = e.which;
    }
    if (keyNum === 38) {
        console.log(masiv[keyNum++]);
    }
    if (keyNum === 40) {
        console.log(masiv[keyNum--]);
    }
    console.log(keyNum);
}
document.onkeydown = keyPress;

Хотел реализовать переключение между элементами массива при помощи клавиш со стрелочками вверх и вниз, то есть допустим , у меня есть массив с 10-тью элементами , я начиная с первого элемента нажимаю на клавишу со стрелочкой вверх , у меня в консоль лог вывелся второй элемент , еще раз нажал вывелся третий , нажал на клавишу со стрелочкой вниз, вывелся опять второй элемент. Во время данной реализации столкнулся с проблемой , что я не могу сосчитать , сколько раз я допустим нажал на стрелочку вверх, чтобы я мог вставить в массив это число и оно вывело тот элемент массива , который будет соответствовать числу нажатий на клавишу ?

Answer 1

Текущее положение лучше вывести в отдельную переменную, которую можно подставлять в качестве индекса массива при обращении к элементам.

Вместо создания нескольких ветвлений if, лучше воспользоваться конструкцией switch. Так вы избавите интерпретарор от лишних проверок.

Так же стоит подумать о выходе за границы массива. Если текущий индекс будет больше индекса последнего элемента массива или меньше 0, то в выводе получим undefined, т.к будем ссылаться на несуществующий элемент массива.

(() => {
  let index = 0; // переменная, отвечающая за текущее положение
  
  const arr = ['один', 'два', 'три', 'четыре', 'пять', 'шесть', 'семь', 'восемь', 'девять', 'десять'];

  showPosition();

  function keyPress(event) {
     event.preventDefault(); // уберем дефолтный браузерный скролл
    // почему бы не использовать конструкцию switch вместо множества if
    switch(event.key) { // event.keyCode deprecated
      case 'ArrowUp' : {
        if (index >= arr.length - 1) return; // проверяем границы массива, index не должен быть > индекса последнего элемента массива, иначе получим undefined
        index++; // инкремент
        break;
      }
      case 'ArrowDown' : {
        if (index <= 0) return;
        index--; // декремент
        break;
      }
      default: return; // остальные нажатия оставляем без вывода
    }
    showPosition();
  }
  
  /**
  * Просто выводим в консоль текущее положение в массиве
  */
  function showPosition() {
     console.log('Текущая позиция: ' + arr[index]);
  }
  
  document.onkeydown = keyPress;
})();

БЛОГ НА HUSL

Переключение между элементами массива при помощи клавиш клавиатуры

Ответы (1 шт):