[JavaScript知识库]JavaScript setTimeout 循环输出？let 与 var 与 const 的区别?

一、JavaScript setTimeout 循环输出

1.循环输出： 0 1 2 3 4 每一秒输出一次

for(let i=0;i<5;i++){
? ? setTimeout(function(){
? ? ? ? console.log(i)
? ? ? ? },i*1000)
? ? }

2.把let换成var

循环输出： 5 5 5 5 5 每一秒输出一次

for(var i=0;i<5;i++){
? ? setTimeout(function(){
? ? ? ? console.log(i)
? ? ? ? },i*1000)
? ? }

这是因为setTimeout是异步执行，每一次for循环的时候，setTimeout都执行一次，但是里面的函数没有被执行，而是被放到了任务队列里，等待执行。只有主线上的任务执行完，才会执行任务队列里的任务。也就是说它会等到for循环全部运行完毕后，才会执行function函数

3.1秒后输出结果：0 1 2 3 4

for(let i=0;i<5;i++){
? ? setTimeout(function(){
? ? ? ? console.log(i)
? ? ? ? },1000)
? ? }

4.使用闭包的方式，0 1 2 3 4 每一秒输出一次

for(var i=0;i<5;i++){
? ? (function(a){
? ? ? ? setTimeout(function(){
? ? ? ? console.log(a)
? ? ? ? },a*1000)
? ? ? ? })(i);
? ? }

二、let 与 var 与 const 的区别?
var 声明的变量会挂载在 window 上，而 let 和 const 声明的变量不会
var 声明的变量存在变量提升，let 和 const 不存在变量提升
同一作用域下 var 可以声明同名变量，let 和 const、不可以
let 和 const 声明会形成块级作用域
let 暂存死区
const 一旦声明必须赋值，不能用 null 占位，声明后不能再修改，如果
声明的是复合类型数据，可以修改属性

块级作用域解决问题：

for(var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i)
  })
} // 5 5 5 5 5


for(let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i)
  })
} // 0 1 2 3 4