在for循环中var和let的区别
时间:2019-03-25
本文章向大家介绍在for循环中var和let的区别,主要包括在for循环中var和let的区别使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
当我们中在for循环中使用var或者let为四个按钮绑定点击事件时,你会发现一个现象打个比方 现在有四个按钮
我们使用for来绑定事件 首先我们使用var来修饰变量
<body>
<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>
</body>
var btn = document.querySelectorAll("button");
for(var i=0;i<btn.length;i++){
btn[i].addEventListener("click",function(){
console.log("you click ["+i+"]");
});
}
当我们绑定一个点击事件时 你点击每个按钮输出时,你会发现输出的都是 you click [4]
而当我们使用let来修饰变量时 你会发现不同
var btn = document.querySelectorAll("button");
for(let i=0;i<btn.length;i++){
btn[i].addEventListener("click",function(){
console.log("you click ["+i+"]");
});
}
这样我们点击四个按钮时 将会分别输出 you click [0] you click [1] you click [2] you click [3]
现在来讲讲这是为什么 因为当我们使用var在for中修饰变量时 它其实是一个全局的变量 而我们知道 在全局作用域中全局变量只能有一个,不能出现多个相同的全局变量 就算有也会被覆盖 这也就是说当我们在for中使用var修饰变量时它其实绑定事件时是在不断的修改和覆盖,
当i等于0时 绑定的事件中的i指向的是0 、
btn[0].addEventListener("click",fun(){
console.log("you click ["+i+"]")//---->此时i为0
})
当i等于1时 绑定事件中的的i全都指向1
btn[0].addEventListener("click",fun(){
console.log("you click ["+i+"]")//---->此时i指向 1
})
btn[1].addEventListener("click",fun(){
console.log("you click ["+i+"]")//---->此时i指向 1
})
当i等于2时 绑定事件中的的i全都指向2
btn[0].addEventListener("click",fun(){
console.log("you click ["+i+"]")//---->此时i指向 2
})
btn[1].addEventListener("click",fun(){
console.log("you click ["+i+"]")//---->此时i指向 2
})
btn[2].addEventListener("click",fun(){
console.log("you click ["+i+"]")//---->此时i指向 2
})
以此类推
那为什么会输出4呢 ,因为在for执行到3时会跳出循环 ,但因为是i++,所以最后跳出循环后i还会在运行一次,变成4
由于是用var声明的,也就是说它是全局的,所以在for中无论你声明了多少个i,它都会被最后一个所覆盖
现在在来说说let ,在for中使用let时,其实每一轮声明的都是一个新的let,它不会被覆盖,而是会创建一个新的变量来使用
如下
当i等于0时
btn[0].addEventListener("click",fun(){
console.log("you click ["+i+"]")//---->此时i为0
})
当i等于1时
btn[0].addEventListener("click",fun(){
console.log("you click ["+i+"]")//---->此时i指向 0
})
btn[1].addEventListener("click",fun(){
console.log("you click ["+i+"]")//---->此时i指向 1
})
当i等于2时
btn[0].addEventListener("click",fun(){
console.log("you click ["+i+"]")//---->此时i指向 0
})
btn[1].addEventListener("click",fun(){
console.log("you click ["+i+"]")//---->此时i指向 1
})
btn[2].addEventListener("click",fun(){
console.log("you click ["+i+"]")//---->此时i指向 2
})
当i等于3时
btn[0].addEventListener("click",fun(){
console.log("you click ["+i+"]")//---->此时i指向 0
})
btn[1].addEventListener("click",fun(){
console.log("you click ["+i+"]")//---->此时i指向 1
})
btn[2].addEventListener("click",fun(){
console.log("you click ["+i+"]")//---->此时i指向 2
})
btn[2].addEventListener("click",fun(){
console.log("you click ["+i+"]")//---->此时i指向 3
})
以此类推
这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。由于使用的是let,所以当前i只在本轮循环有效,下一轮循环它又是一个新的i,所以使用let时它是不会被覆盖的
- 【Java学习笔记之二十一】抽象类在Java继承中的用法小结
- 【Java学习笔记之二十】final关键字在Java继承中的用法小结
- 基于Windows下python环境变量配置
- 【机器学习笔记之七】PCA 的数学原理和可视化效果
- 2017"百度之星"程序设计大赛 - 复赛1005&&HDU 6148 Valley Numer【数位dp】
- 【专知-关关的刷题日记20】Leetcode 119. Pascal's Triangle II
- 2017"百度之星"程序设计大赛 - 复赛1003&&HDU 6146 Pokémon GO【数学,递推,dp】
- 2017"百度之星"程序设计大赛 - 复赛1001&&HDU 6144 Arithmetic of Bomb【java大模拟】
- Java面向对象抽象类实例练习
- 经典JS闭包面试题
- Java面向对象接口的应用实例练习
- 【机器学习笔记之八】使用朴素贝叶斯进行文本的分类
- 【Java学习笔记之二十二】解析接口在Java继承中的用法及实例分析
- 扫一扫二维码就能打开网站,就能添加联系人,就能链接wifi(续)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Kotlin:03-变量、常量、数据类型
- nginx工程师,需要上承天命,下召九幽
- 新版视频流媒体平台EasyNVR如何在前端显示当前页面所在位置?
- Kotlin:04-基本数据类型详细介绍
- Kotlin:05-控制流 if、when、for、while
- android: API24 及以上版本调用系统相机时报:FileUriExposedException 的解决
- Typora 完美结合 PicGo,写作体验更佳!
- 视频流媒体服务器EasyNVR在CentOS6.5上编译报 No such file or directory错误
- Flink Timer(定时器)机制及实现详解
- android:运行时权限工具类的封装
- Android:非Activity跳转Activity时要加FLAG?
- Java自动化测试(接口鉴权 16)
- Android:Tools命名空间原来是有大用处的
- Android:无线调试就是这么简单
- Java自动化测试(回写与断言 17)