Как переписать скрипт с forEach на обычный for

Question

window.addEventListener('scroll', () => {
    let scrollDistance = window.scrollY;

        document.querySelectorAll('.block').forEach((el, i) => {
            if (el.offsetTop - document.querySelector('.header').clientHeight <= scrollDistance) {
                document.querySelectorAll('.menu__body a').forEach((el) => {
                    if (el.classList.contains('_active')) {
                        el.classList.remove('_active');
                    }
                    console.log(el)
                });
                document.querySelectorAll('.menu__body li')[i].querySelector('a').classList.add('_active');
            }
        });

});

Answer 1

Технически, никак, это разные алгоритмы, for - цикл, forEach как таковым им и не является. Теперь как переписать?

const names = ['Дима', 'Паша', 'Петя']; 
//ForEach - Метод и ему подобные принимают аргумент, который является на итерации его - текущим. 
names.forEach((current, index) => console.log(current, index));  

//For - предоставляет собственный счетчик и не является функцией/методом. 
for (let i = 0; i<names.length; i++) { 
  //Тут для ясности текущий запишем сразу в переменную 
  const current = names[i]; 
  console.log(current);
}
  
//Буква I В [???] - спооб получить элемент по его индексу.  
const str = 'Дима я сейчас возьму последнюю букву, знаешь как:?'; 
const last = str[str.length - 1]; 
console.log(last); //Последний символ знак вопроса.

document.querySelectorAll('.menu__body li')[i].querySelector('a').classList.add('_active');

Тут ошибки не вижу.

Answer 2

Я бы обратил ваше внимание на то, что на каждый триггер скролла - вы дёргаете DOM. Это те же .block, .header., .menu__body a, .menu__body li, не лучше ли их вынести один раз за пределы слушателя, чтобы снизить операции с DOM ?

Вот переписанный вариант:

const collection = document.querySelectorAll('.block');
const links = document.querySelectorAll('.menu__body a');
const header = document.querySelector('.header');

let scrollDistance = window.scrollY;

window.addEventListener('scroll', () => {
  scrollDistance = window.scrollY;

  for (let i = 0; i < collection.length; i++) {
    const el = collection[i];

    if (el.offsetTop - header.clientHeight <= scrollDistance) {
      for (let j = 0; j < links.length; j++) {
        if (el.classList.contains('_active')) {
          el.classList.remove('_active');
        }
      }

      links[i].classList.add('_active');
    }
  }
});

БЛОГ НА HUSL

Как переписать скрипт с forEach на обычный for

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