以for循环的方式了解var与let的区别
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的区别的更多相关文章
- JavaScript的几种循环使用方式及性能解析
循环的类型 一:for var arr = [1, 2, 3, 4, 5, 6]; for (var i = 0, len = arr.length; i < len; i++) { conso ...
- ArrayList和LinkedList的几种循环遍历方式及性能对比分析(转)
主要介绍ArrayList和LinkedList这两种list的五种循环遍历方式,各种方式的性能测试对比,根据ArrayList和LinkedList的源码实现分析性能结果,总结结论. 通过本文你可以 ...
- ArrayList和LinkedList的几种循环遍历方式及性能对比分析
最新最准确内容建议直接访问原文:ArrayList和LinkedList的几种循环遍历方式及性能对比分析 主要介绍ArrayList和LinkedList这两种list的五种循环遍历方式,各种方式的性 ...
- ArrayList和LinkedList的几种循环遍历方式及性能对比分析(转载)
原文地址: http://www.trinea.cn/android/arraylist-linkedlist-loop-performance/ 原文地址: http://www.trinea.cn ...
- HashMap循环遍历方式及其性能对比(zhuan)
http://www.trinea.cn/android/hashmap-loop-performance/ ********************************************* ...
- HashMap循环遍历方式及其性能对比
主要介绍HashMap的四种循环遍历方式,各种方式的性能测试对比,根据HashMap的源码实现分析性能结果,总结结论. 1. Map的四种遍历方式 下面只是简单介绍各种遍历示例(以HashMap为 ...
- 【转】ArrayList和LinkedList的几种循环遍历方式及性能对比分析
原文网址:http://www.trinea.cn/android/arraylist-linkedlist-loop-performance/ 主要介绍ArrayList和LinkedList这两种 ...
- Java 集合 ArrayList和LinkedList的几种循环遍历方式及性能对比分析 [ 转载 ]
Java 集合 ArrayList和LinkedList的几种循环遍历方式及性能对比分析 @author Trinea 原文链接:http://www.trinea.cn/android/arrayl ...
- jQuery中的for循环var与let的区别
今天在写jQuery请求接口中发现一个问题: 在用AJAX发送请求中又嵌套了一个AJAX请求,发现在内层请求的success中对第一次success中的循环变量 i 无法获取,具体代码如下: $.aj ...
随机推荐
- Qt for android触摸手势事件QGestureEvent
在触摸设备上可以使用Qt的手势事件 要激活手势事件,需要执行以下操作: 第一步,为QWidget控件注册手势事件 QList<Qt::GestureType> gestures; gest ...
- 实现Qt日志功能并输出到文件(使用qInstallMsgHandler安装customMessageHandler)good
原文 http://www.cppblog.com/lauer3912/archive/2011/04/10/143870.html 一.基本分类:qDebug : 调试信息提示qWarning: 一 ...
- MSYS2 环境搭建,并整合Qt
本机环境:Windows XP 32位MSYS2地址:http://sourceforge.net/projects/msys2/ 下载32位版本,地址:http://sourceforge.net/ ...
- Qt 访问网络的 HttpClient(封装QNetworkAccessManager,且有服务端)
Qt 使用 QNetworkAccessManager 访问网络,这里对其进行了简单的封装,访问网络的代码可以简化为: 1 2 3 HttpClient("http://localhost: ...
- 插件化一(android)
插件化设计概述(android) 一. 模块划分 Basic模块包括:初始化接口.插件加载接口.插件更新接口和埋点接口. a) 初始化接口:完成一些必要的初始化 ...
- wangjie.rocks的静态编译Qt,openssl,icu
http://wangjie.rocks/2015/12/28/compile-qt/http://wangjie.rocks/2015/12/10/compile-icu/http://wangji ...
- linux oracle 启动全过程
一:启动oracle [root@ccoracle ~]# su -l oracle [oracle@ccoracle ~]$ sqlplus /nolog SQL*Plus: Release 10. ...
- javaweb各种框架组合案例(二):maven+spring+springMVC+mybatis
1.mybatis是比较新的半自动orm框架,效率也比较高,优点是sql语句的定制,管理与维护,包括优化,缺点是对开发人员的sql功底要求较高,如果比较复杂的查询,表与表之间的关系映射到对象与对象之间 ...
- SYN2101型 NTP网络时间服务器
SYN2101型 NTP网络时间服务器 时钟校准服务器时间 ntp服务器ntp时间校准服务器使用说明视频链接: http://www.syn029.com/h-pd-56-0_310_1_-1. ...
- Docker PHP7 Cannot find OpenSSL's <evp.h>
configure: error: Cannot find OpenSSL's <evp.h> apt-get install libssl-dev