var是ES5定义变量的一种声明方式。

let是ES6定义变量的一种声明方式---可定义局部变量,即定义块级作用域。

  • 以下列简单的函数进行表现二者作用域的不同

在ES6之前,我们都是用var来声明变量,而且JS只有函数作用域和全局作用域,没有块级作用域,所以{}限定不了var声明变量的访问范围。

{
  var i=0
}
console.log(i) //输出0

ES6新增的let,可以声明块级作用域的变量。

{
let i=0
}
console.log(i) //输出“Uncaught ReferenceError: i is not defined”以简单
  • 以简单示例表现二者提升变量的不同

因为变量被提升了,但是输出在赋值之前,所以,未找到aicoder的值,输出“undefined”

console.log(aicoder);    // “undefined”
var aicoder = 'aicoder.com'

在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”。

console.log(aicoder);    // 错误:Uncaught ReferenceError: Cannot access 'aicoder' before initialization
let aicoder = 'aicoder.com'; // 这之后就可以安全使用aicoder
  • 与for循环的独特应用
for (var i = 0; i < 5; i++) {
setTimeout(() => {
console.log("var", i)
}, 1000)
}

 输出:一秒后,输出5个5
 因为var,导致最后i成为5
 函数执行顺序:
 ->开始同步
 ->for循环5次,并向异步中推5个timeout函数
 ->同步结束
 ->开始异步
 ->同时开始执行5个timeout函数(因为i是全局变量,所以,外部for循环结束时,i为5,则timeout函数i也发生变化,变为5)
 ->异步结束
 ->打印结果:一秒后,同时输出5个5

---------------------------------------------------------------------------------

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

 输出:一秒后,同时输出01234
 因为let,let限制了参数作用域
 函数执行顺序:
 ->开始同步
 ->for循环5次,并向异步中推5个timeout函数
 ->同步结束
 ->开始异步
 ->同时开始执行5个timeout函数(虽然i在变化,但传入timeout函数的i已经拥有了块作用域,所以并不会因为外部的改变而改变)
 ->异步结束
 ->打印结果:一秒后,同时输出01234

---------------------------------------------------------------------------------

ES6的let让js真正拥有了块级作用域,也是向这更安全更规范的路走,虽然加了很多约束,但是都是为了让我们更安全的使用和写代码。

以for循环的方式了解var与let的区别的更多相关文章

  1. JavaScript的几种循环使用方式及性能解析

    循环的类型 一:for var arr = [1, 2, 3, 4, 5, 6]; for (var i = 0, len = arr.length; i < len; i++) { conso ...

  2. ArrayList和LinkedList的几种循环遍历方式及性能对比分析(转)

    主要介绍ArrayList和LinkedList这两种list的五种循环遍历方式,各种方式的性能测试对比,根据ArrayList和LinkedList的源码实现分析性能结果,总结结论. 通过本文你可以 ...

  3. ArrayList和LinkedList的几种循环遍历方式及性能对比分析

    最新最准确内容建议直接访问原文:ArrayList和LinkedList的几种循环遍历方式及性能对比分析 主要介绍ArrayList和LinkedList这两种list的五种循环遍历方式,各种方式的性 ...

  4. ArrayList和LinkedList的几种循环遍历方式及性能对比分析(转载)

    原文地址: http://www.trinea.cn/android/arraylist-linkedlist-loop-performance/ 原文地址: http://www.trinea.cn ...

  5. HashMap循环遍历方式及其性能对比(zhuan)

    http://www.trinea.cn/android/hashmap-loop-performance/ ********************************************* ...

  6. HashMap循环遍历方式及其性能对比

    主要介绍HashMap的四种循环遍历方式,各种方式的性能测试对比,根据HashMap的源码实现分析性能结果,总结结论.   1. Map的四种遍历方式 下面只是简单介绍各种遍历示例(以HashMap为 ...

  7. 【转】ArrayList和LinkedList的几种循环遍历方式及性能对比分析

    原文网址:http://www.trinea.cn/android/arraylist-linkedlist-loop-performance/ 主要介绍ArrayList和LinkedList这两种 ...

  8. Java 集合 ArrayList和LinkedList的几种循环遍历方式及性能对比分析 [ 转载 ]

    Java 集合 ArrayList和LinkedList的几种循环遍历方式及性能对比分析 @author Trinea 原文链接:http://www.trinea.cn/android/arrayl ...

  9. jQuery中的for循环var与let的区别

    今天在写jQuery请求接口中发现一个问题: 在用AJAX发送请求中又嵌套了一个AJAX请求,发现在内层请求的success中对第一次success中的循环变量 i 无法获取,具体代码如下: $.aj ...

随机推荐

  1. 数据备份服务商Rubrik获4000万美元B轮融资

    搜狐科技 文/丽丽卡 5月27日,数据备份服务商Rubrik获Greylock Partners领投的4000万美元B轮融资,Lightspeed Venture Partners及其现有投资者跟投, ...

  2. .Net上传文件处理三大范式,及开发注意事项

    最近工作内容涉及到一点前端的内容,把学习到的内容记录下来,在今后的开发过程中,不要犯错.本篇只针对一些刚入职的小白及前端开发人员,大牛请绕道!~ 刚开始我们先不讲上传文件的防范问题,先通过一个例子,让 ...

  3. Laravel --- artisan创建表以及填充表数据流程总结

    1.创建建表文件 php artisan make:migration create_comments_table 打开database/migrations/xxx_create_comments_ ...

  4. 你需要了解的HTTP协议

    了解HTTP协议 HTTP (超文本传输协议,HyperText Transfer Protocol),是一种用于分布式.协作式和超媒体信息系统的应用层协议.HTTP 是万维网的数据通信基础. 通常, ...

  5. 【UVA - 11624】Fire!

    -->Fire! 直接上中文 Descriptions: 乔在迷宫中工作.不幸的是,迷宫的一部分着火了,迷宫的主人没有制定火灾的逃跑计划.请帮助乔逃离迷宫.根据乔在迷宫中的位置以及迷宫的哪个方块 ...

  6. Spring Framework 组件注册 之 FactoryBean

    Spring Framework 组件注册 之 FactoryBean 前言 前两篇文章介绍了如何使用@Component,@Import注解来向spring容器中注册组件(javaBean),本文将 ...

  7. Linux下,非Docker启动Elasticsearch 6.3.0,安装ik分词器插件,以及使用Kibana测试Elasticsearch,

    Linux下,非Docker启动Elasticsearch 6.3.0 查看java版本,需要1.8版本 java -version yum -y install java 创建用户,因为elasti ...

  8. SQL Server温故系列(4):SQL 查询之集合运算 & 聚合函数

    1.集合运算 1.1.并集运算 UNION 1.2.差集运算 EXCEPT 1.3.交集运算 INTERSECT 1.4.集合运算小结 2.聚合函数 2.1.求行数函数 COUNT 2.2.求和函数 ...

  9. CodeForces 696A:Lorenzo Von Matterhorn(map的用法)

    http://codeforces.com/contest/697/problem/C C. Lorenzo Von Matterhorn time limit per test 1 second m ...

  10. Django rest framework(3)----节流

    目录 Django组件库之(一) APIView源码 Django restframework (1) ----认证 Django rest framework(2)----权限 Django res ...