碰到一道题:

for(var i=0;i<2;i++){ 
setTimeout(function(){
console.log(i);
},100)
} //输出结果为:2 2
for(let i=0;i<2;i++){
setTimeout(function(){
console.log(i);
},100)
} //输出结果为:0 1

我们先从第一个for循环说起,setTImeout是异步执行的

因此setTImeout在异步队列中,需要等待同步队列(for循环)执行完成后才可进行,

此时,同步队列执行完成后i为2,所以执行setTImeout时,输出为2

接着看第二个for循环,由于i使用let定义的,let为块级作用域,但按我们的正常理解,应该会得出上边的结果

找了下网上,解释如下:

for循环中的let,事实上将其重新绑定到每一个循环迭代中,在确保上一次循环迭代结束后才会进行下一步循环,重新赋值

简单说就是let的for循环中,每次都需要保证循环体里的执行完毕后才会进行下一次循环(我是这么理解的)

又找了一个相似的例子

var a = [];
for (var i = ; i < ; i++) {
a[i] = function () {
console.log(i);
};
}
a[](); //

由于i是全局作用域,可被函数中的i获取得到,所以数组函数中输出的i均为10;

var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6

而这里的i是块级作用域,当前i只能在本轮循环中奇效,每次循环中的i均为一个新的变量,因此最终取出的值为6

JavaScript:for循环中let与var变量的绑定的更多相关文章

  1. for循环中setTimeout,var与let的不同

    先看下面两段代码 for (let i = 0; i < 5; i++) { setTimeout(function () { console.log(i) }, 2000) } for (va ...

  2. for循环中let与var的区别,块级作用域如何产生与迭代中变量i如何记忆上一步的猜想

    我在前一篇讨论let与var区别的博客中,顺带一笔带过了let与var在for循环中的不同表现,虽然解释了是块级作用域的影响,但具体是怎么去影响的呢,我尝试的去理解了下,这篇博客主要从for循环步骤拆 ...

  3. es6种for循环中let和var区别

    let和var区别: for(var i=0;i<5;i++){ setTimeout(()=>{ console.log(i);//5个5 },100) } console.log(i) ...

  4. for循环中 i++和++i 是否有区别?

    正常情况下  i++和++i是有区别的: 前者是:先引用,后增加, 后者是:先增加,后引用, 但是在for循环中: for(var i=0;i<10;i++){ System.out.print ...

  5. for循环中i--的妙用 及 两变量互换数值的问题

    int[] array = new int[4]; for(int i = 0; i < array.length; i++){ array[i] = (int)(Math.random() * ...

  6. JavaScript形而上的For循环中的Break

    break相当于循环中的GOTO,需避免使用. 下面是一个break使用例子. 找出第一个months小于7的项目. const cats = [ { name: 'Mojo', months: 84 ...

  7. javascript var变量删除

    var有三种声明的情形: var声明的全局变量 var在函数范围内声明的局部变量 eval中声明的全局变量. 首先, 1.2种情形var声明的变量是无法删除的. 尽管var声明的全局变量是属于wind ...

  8. JavaScript中var变量引用function与直接声明function

    今天在h5开发app的过程中遇到了一个js问题,function的执行问题 在js中声明函数function有这两种方法 var A=function(){...} 或者 function A(){. ...

  9. javascript精雕细琢(一):var let const function声明的区别

    目录 引言 一.var 二.let 三.const 四.function 五.总结 引言        在学习javascript的过程中,变量是无时无刻不在使用的.那么相对应的,变量声明方法也如是. ...

随机推荐

  1. spring的简易实现(一)

    [练习]spring的简易实现(一) 在第一部分我们实现读取xml的配置,然后实例化xml中的bean 首先定义一个xml和相关的class类 <?xml version="1.0&q ...

  2. java基础(6):方法

    1. 方法 1.1 方法概述 在我们的日常生活中,方法可以理解为要做某件事情,而采取的解决办法. 如:小明同学在路边准备坐车来学校学习.这就面临着一件事情(坐车到学校这件事情)需要解决,解决办法呢?可 ...

  3. HashMap数据结构与实现原理解析(干货)

    HashMap 数据结构解析: HashMap内部使用hash表(本质是一个数组见图一) HashMap使用hash算法计算得到存放的索引位置,以此来加快查询速度,(比ArrayList还要快) 同样 ...

  4. JavaScript 语句解析

    在 HTML 中,JavaScript 语句是由 web 浏览器“执行”的“指令”. 实例 var x, y, z; // 语句 1 x = 22; // 语句 2 y = 11; // 语句 3 z ...

  5. boostrap 学习笔记

    bootstrap : 是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优先的 WEB 项目. 用于项目样式的快速搭建,真的是..特别快.. 随便找两个cdn引用就能使用了. https:// ...

  6. tomcat9启动后控制台输出乱码问题

    修改Tomcat9下 /conf/logging.properties 文件 找到java.util.logging.ConsoleHandler.encoding=utf-8 改成GBK 或者注释掉

  7. curl 模拟https协议请求

    在原有基础上再添加设置下面两个参数: curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 跳过证书检查 curl_setopt($ch, CURLO ...

  8. Saltstack_实战指南01_系统规划

    1. 实战项目GitHub地址 之前<Saltstack_使用指南>详细讲解了saltstack的使用.那么从这节开始实战讲解,当然不会再像之前那样详细说明了.只是讲一些系统规划之类的信息 ...

  9. 【新人填坑008】django升级2.x后报'WSGIRequest' object has no attribute 'session',

    1.X 到2.x后中间件定义的名字也有所不同 改一下就好了 在setting文件中将原先的 MIDDLEWARE_CLASS 改成MIDDLEWARE 如果还运行不成功  注释掉标白线的那一行 删掉也 ...

  10. MySql 库/表级操作 及 数据类型

    数据库分类 关系型数据库(SQL):存储方式固定,安全 非关系型数据库(NoSQL):存储方式比较灵活,存储数据的效率比较高,不太安全 MySQL是一种关系型数据库管理系统(采用关系模型来组织管理数据 ...