for循环中的var和let的区别

 for (var i = 0; i < 3; i++) {setTimeout(function () {console.log(i) // 3s 后输出 3次3}, 30 * 100)console.log(i) // 先输出 0 1 2}

1、这道题涉及到了异步、作用域、闭包：

settimeout是异步执行，10ms后往任务队列里面添加一个任务，只有主线上的全部执行完，才会执行任务队列里的任务，当主线执行完成后，i是3，所以此时再去执行任务队列里的任务时，i全部是3了。对于打印3次是：

每一次for循环的时候，settimeout都执行一次，但是里面的函数没有被执行，而是被放到了任务队列里面，等待执行，for循环了3次，就放了3次，当主线程执行完成后，才进入任务队列里面执行。

（注意：for循环从开始到结束的过程，需要维持几微秒或几毫秒。)

2、当解决变量作用域：

for (let i = 0; i < 3; i++) {setTimeout(function () {console.log(i)// 3s 后输出 0 1 2}, 3000)console.log(i) // 先输出 0 1 2}

因为for循环头部的let不仅将i绑定到for循环块中，事实上它将其重新绑定到循环体的每一次迭代中，确保上一次迭代结束的值重新被赋值。setTimeout里面的function()属于一个新的域，通过 var 定义的变量是无法传入到这个函数执行域中的，通过使用 let 来声明块变量，这时候变量就能作用于这个块，所以 function就能使用 i 这个变量了。

附：由于 var 命令的变量提升机制，var 命令实际只会执行一次。而 let 命令不存在变量提升，所以每次循环都会执行一次，声明一个新变量（但初始化的值不一样）。for 的每次循环都是不同的块级作用域，let 声明的变量是块级作用域的，所以也不存在重复声明的问题。let声明变量的for循环里，每个匿名函数实际上引用的都是一个新的变量。

再熟悉一遍：

  for (var i = 3; i > 0; i--) {setTimeout(function () {console.log(i) // 3s 后输出 3次0}, 30 * 100)console.log(i) // 先输出   3 2 1}

 for (let i = 3; i > 0; i--) {setTimeout(function () {console.log(i) // 3s 后输出 3 2 1}, 30 * 100)console.log(i) // 先输出  3 2 1}

for循环中的var和let的区别相关推荐

for循环中var和let的区别
今天在做题的时候,遇到了一个不太懂的问题,经过查阅资料,终于搞明白了这个问题,发出来当做个笔记. 首先是var: for (var i = 0; i < 5; i++) { setTimeout ...
html页面如何循环遍历,遍历foreach循环中的HTML DOM元素
5 个答案: 答案 0 :(得分:3) 您可以使用closest('tr')查找最近的父tr元素,然后使用index()获取行号.试试这个: $('td').click(function() { va ...
for循环中的break与continue
在for循环中break与baicontinue的区别如下: break用于完全结束一个循环,du跳出循环体执行循环后面的语句:而continue是跳过当次循环中剩dao下的语句,执行下一次循环.简单 ...
el-upload在表单循环中，实现选择，删除，拖拽，并且和表单数组对上
el-upload在表单循环中,实现选择,删除,拖拽,并且和表单数组对上: 微信: volley369 业务要求,实现以下效果: 业务要求: el-upload肯定不能一个个的写,要用json去循环 ...
Vue v-for循环中 key 属性的使用
v-for循环中 key 属性的使用使用到的方法 unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度. push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. k ...
JavaScript 循环中Continue语句
在JavaScript中,你可以使用continue语句重新启动循环的新迭代.该语句可以在while循环,for循环或for-in循环中使用 continue语句终止当前循环或标记循环的当前迭代中的语 ...
R语言循环中break函数和next函数使用实战
R语言循环中break函数和next函数使用实战目录 R语言循环中break函数和next函数使用实战 #基础for循环 #带break的for循环
Vue指令之v-for——迭代数组、迭代对象中的属性、迭代数字||v-for循环中key属性的使用
v-for循环普通数组 v-for循环对象数组 v-for循环对象 v-for迭代数字 v-for循环中key属性的使用 <!DOCTYPE html> <html lang=&qu ...
matlab for 取数组,for循环中的MATLAB和单元格数组处理
for循环中的MATLAB和单元格数组处理我是MATLAB新手,想从数据库中提取一个单元格数组中的数据: sensors = [ 1] [23] [1] [ 0] [0.1000] [1x29 ch ...

for循环中的var和let的区别

for循环中的var和let的区别相关推荐

最新文章

热门文章