碰到一道题:

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. Java入门系列之类继承、抽象类、接口(五)

    前言 C#和Java关于类.抽象类.接口使用方式基本相似,只是对应关键字使用不同罢了,本节呢,我们只是对照C#和Java中关于这三个概念在具体使用时,看看有哪些不一样的地方. 类继承 C#和Java在 ...

  2. PostgreSQL学习之路一

    PostgreSQL的扩展PostGIS是最著名的开源GIS数据库. 安装PostgreSQL是第一步. 1.下载PostgreSQL的二进制安装文件 PostgreSQL官网–>Downloa ...

  3. 学习强国docker文件用法

    学习强国docker用法 docker文件地址   https://github.com/fuck-xuexiqiangguo/docker 构建  docker  docker build -t D ...

  4. 订单结算submit_order.php扣库存,扣账号金额(学生笔记)

    <?php header("Content-type: text/html; charset=utf-8"); session_start(); include_once(& ...

  5. [转]How to enable macros in Excel 2016, 2013, and 2010

    本文转自:https://www.ablebits.com/office-addins-blog/2014/07/22/enable-macros-excel/#always-run-macros T ...

  6. NumPy实现数据的聚合,计算最大值,最小值

    1.数组值的求和 首先构造一个具有100个值的数组,然后我们利用两个不同的方法进行求和: >>> l=np.random.random() l的数据如下: >>> ...

  7. ABP入门教程2 - 体系架构

    点这里进入ABP入门教程目录 介绍 应用程序代码库的分层是一种广泛接受的技术,可帮助降低复杂性并提高代码可重用性.为了实现分层体系结构,ASP.NET Boilerplate遵循域驱动设计的原理. D ...

  8. ABP入门教程9 - 展示层实现增删改查-视图模型

    点这里进入ABP入门教程目录 创建视图模型 在展示层(即JD.CRS.Web.Mvc)的Models下新建文件夹Course //用以存放Course相关视图模型 在JD.CRS.Web.Mvc/Mo ...

  9. elasticsearch安装与使用

    一.windows10上安装elasticsearch Elasticsearch 需要 Java环境,在安装Elasticsearch之前先安装好JDK. 本文安装jdk1.8,es6.3.2为例. ...

  10. android binder 进程间通信机制5-Service注册和代理对象的获取

    ServiceManager,其实也是一个Service,不过它的Server端实现并未使用Binder库的结构实现,而是直接打开binder/dev进行通信的,不具有普遍性. 下面以MediaSer ...