Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   НЕ срабатывает цикл for (https://javascript.ru/forum/misc/81811-ne-srabatyvaet-cikl.html)

denis_alekss 31.01.2021 21:28

НЕ срабатывает цикл for
 
Почему код срабатывает только тогда когда
Код:

var i = 0;
поменять на
Код:

let i = 0;
?
Если оставить код как есть вывод:

Код:

fib[6] = undefined
Сам код:

Код:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
const fib = [1,2,3,5,8,13]
for(var i = 0; i < fib.length; i++){
        setTimeout(function() {
                console.log(`fib[${i}] = ${fib[i]}`)
        },1500)
}

    </script>
</body>
</html>

Вот такой код:

Код:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
const fib = [1,2,3,5,8,13]
for(var i = 0; i < fib.length; i++){
        (function(j){
        setTimeout(function() {
                console.log(`fib[${i}] = ${fib[i]}`)
        },1500)
        })(i)
}

    </script>
</body>
</html>

выдаст также
Код:

fib[6] = undefined

рони 31.01.2021 21:38

denis_alekss,
https://javascript.ru/basic/closure#...-ispolzovaniya

voraa 31.01.2021 21:43

Переменные, объявленные var попадают в глобальный объект или имеют область видимости функции.
Т.е в вашем случае (когда var) будет всего одна глобальная переменная (содержащаяся в глобальном объекте window)
Переменные объявленные let имеют глобальную область видимости (это не тоже самое, что глобальный объект) или область видимости блока. Блок это все, что в {} тело функции или цикл - частный случай блока. Обнако у циклов блок начинается не с {, а с оператора for (или while)
Фактически на каждой итерации цикла for заводится своя переменная i.
Далее, когда вы создаете функцию
function() {
console.log(`fib[${i}] = ${fib[i]}`)
}
Она использует замыкание на переменную i, созданную именно на этой итерации.

рони 31.01.2021 21:49

denis_alekss,
let создаёт замыкание типа такого ...
const fib = [1, 2, 3, 5, 8, 13];
for (var i = 0; i < fib.length; i++) {
    setTimeout((
        function(i) {
            return function() {
                console.log(`fib[${i}] = ${fib[i]}`)
            }
        }
    )(i), 1500 * i)
}

voraa 31.01.2021 21:58

Цитата:

Сообщение от denis_alekss
Вот такой код:

Код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
const fib = [1,2,3,5,8,13]
for(var i = 0; i < fib.length; i++){
(function(j){
setTimeout(function() {
console.log(`fib[${i}] = ${fib[i]}`)
},1500)
})(i)
}

</script>
</body>
</html>
выдаст также
Код:
fib[6] = undefined

А надо
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
const fib = [1,2,3,5,8,13]
for(var i = 0; i < fib.length; i++){
	(function(j){
	setTimeout(function() {
		console.log(`fib[${j}] = ${fib[j]}`)
	},1500)
	})(i)
}

    </script>
</body>
</html>

denis_alekss 31.01.2021 22:09

Цитата:

let создаёт замыкание типа такого ...
А var не создает замыкания, из-за этого вывод через полтора секунды
fib[6] = undefined


?

рони 31.01.2021 22:20

denis_alekss,
i на момент срабатывая любого setTimeout имеет значение 6 -- элемента с таким индексом не существует.

denis_alekss 31.01.2021 22:32

Если код оставить как есть
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
const fib = [1,2,3,5,8,13]
for(var i = 0; i < fib.length; i++){
	setTimeout(function() {
		console.log(`fib[${i}] = ${fib[i]}`)
	},1500)
}

    </script>
</body>
</html>

и поменять просто на let не используя замыкания, код выведет правильно из-за того что let само по себе в движке создает замыкание?

рони 31.01.2021 22:36

Цитата:

Сообщение от denis_alekss
let само по себе в движке создает замыкание?

да

denis_alekss 31.01.2021 22:42

По какой причине var не создает замыкания и не сохраняет i за каждой итерацией?

Вот здесь будет 3 раза подряд 5 выводится, хотя я вывожу разные индексы

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
let result = []
for (var i = 0; i < 5; i++){
	result.push(function(){
		console.log(i)
	})
}
result[2]()
result[4]()
result[1]()


    </script>
</body>
</html>


Часовой пояс GMT +3, время: 17:15.