Почему не срабатывает цикл при i = i++?

Question

[Иван Доброславин]

<div class="one">1</div>
<div class="one">2</div>
<div class="one">3</div>

let div = document.querySelectorAll('.one')

for (let i = 0; i < div.length; i = i+1) {
    console.log(div[i])
    div[i].style.background = 'red'
}

Очень странно, почему, если в условии поменять i = i+1 на i = i++ цикл зависает, условие окончания цикла "проскакивает"?

Answer 1

[Ярослав Иванов]

Читайте как работает постфиксная инкрементация
https://learn.javascript.ru/operators#inkrement-de...

У вас счётчик не меняетcя от этого и бесконечный цикл.

Какой смысл результат инрементации присваивать в эту же переменную? Операция с побочным эффектом и меняет саму переменную. Нет смысла присваивать.

Answer 2

[Сергей Яковлев]

Потому что не надо i = i++, достаточно i++.

Comments

[Иван Доброславин]

Спасибо!

Answer 3

[Karpion]

В языке Си есть масса случаев неопределённого поведения программы - когда результат выполнения может различаться на разных архитектурах процессора, на разных компиляторх, на разных уровнях оптимизации.
Одно из правил, позволяющих избежать этой проблемы: "никогда не используйте переменную с пред/пост-инкрементацией/декрементацией два или более раз в одном выражении".

Сергей Яковлев правильно сказал: достаточно i++ (или ++i, что в данном случае то же самое).

Answer 4

[BrestFortress]

А почему функцией перебора forEach() не пользуетесь?

Метод «arr.forEach(callback[, thisArg])» используется для перебора массива.

Он для каждого элемента массива вызывает функцию callback.

Этой функции он передаёт три параметра callback(item, i, arr):

item – очередной элемент массива.
i – его номер.
arr – массив, который перебирается.

Comments

[Павел Корнилов]

Потому, что это не массив.
Кроссбраузерно можно так:

[].forEach.call(NodeList, callback);

Answer 5

[Иван Доброславин]

А почему функцией перебора forEach() не пользуетесь?

Не дошёл до изучения

Answer 6

[alexpodelinskii]

Оператор i++ сначала возвращает старое значение переменной и только потом увеличивается. Например если i=2; k =i++, то станет k = 2, а i=3. А вот ++i вернёт сразу уже увеличенное значение и в этом случае k = 3.
А для увеличения i, как уже писали ранее достаточно просто написать i++ или ++i.