JS函数的执行时机

//代码1

let i = 0
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

//6
//6
//6
//6
//6
//6

---

//代码2

for(let i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

//0
//1
//2
//3
//4
//5

代码1

代码1中，每次循环都会执行setTimeout(()=>{console.log(i)},0)，命令计算机在当前任务完成后立即执行代码，使得console.log(i)在执行完for循环后执行。

//代码1

let i = 0
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

console.log(i)//6
console.log(i)//6
console.log(i)//6
console.log(i)//6
console.log(i)//6
console.log(i)//6

代码2

代码2中，由于let声明变量的特殊性，变量i只在当前循环的当前次生效，执行了setTimeout(()=>{console.log(i)},0)代码后，存在了一个隐藏的快照i，并将console.log(i)排列到任务队列中，此时console.log(i)中的i为快照i。

//代码2

for(let i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

console.log(i)//此处的i为快照i=0
console.log(i)//此处的i为快照i=1
console.log(i)//此处的i为快照i=2
console.log(i)//此处的i为快照i=3
console.log(i)//此处的i为快照i=4
console.log(i)//此处的i为快照i=5

//for循环结束后，i变量便消失了

除了使用 for let 配合，还有什么其他方法可以打印出 0、1、2、3、4、5?

立即执行函数

let i = 0
for(i = 0; i<6; i++){
  ! function (i){
    setTimeout(()=>{
      console.log(i)
    },0)}(i)
}

//0
//1
//2
//3
//4
//5

利用const关键字

let i = 0;
for(i; i<6; i++){
    const x = i;
    setTimeout(() => {
        console.log(x);
    }, 0)
}

//0
//1
//2
//3
//4
//5

利用setTimeout函数的第三个参数，传入i

let i = 0;
for(i; i<6; i++){
    setTimeout((value)=>{
    console.log(value)
  },0,i)
}

//0
//1
//2
//3
//4
//5