以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 ...
随机推荐
- log4j-slf4j 典型用例
一.maven 配置 <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-log4j ...
- excel导入到数据库的异常处理
excel导入到数据库,这个是经常发生的,今天就碰到了一个非常郁闷的事情,在导入到oracle数据的时候,总是出现ORA-01756: 引号内的字符串没有正确结束,认真的排插了数据当中可能出现的错误, ...
- 针对TianvCms的搜索优化文章源码(无版权, 随便用)
介绍: 搜索优化虽然不是什么高深的技术, 真正实施起来却很繁琐, 后台集成搜索优化的文章可以便于便于管理, 也让新手更明白优化的步奏以及优化的日常. 特点: 根据自己的经验和查阅各种资料整理而成, 相 ...
- PHP实现图片(文件)上传
这几天整理做过的php项目,感觉这个经常会用到,传上来共享一下咯 首先,前端界面 1.表单的首行需要加上enctype="multipart/form-data",需要上传的图片必 ...
- webapi使用autofac
注意:您的项目中如果使用的是webapi2,此处必须为webapi2而不是webapi,否则在运行时将出现“重写成员“Autofac.Integration.WebApi.AutofacWebApiD ...
- 【React】react学习笔记03-React组件对象的三大属性-state
今天晚上学习了React中state的使用,特做此记录,对于学习的方式,博主仍然推荐直接复制完整代码,对着注释观察现象!: 上文中,我列举了两种React自定义组件的声明,这里我拿方式二进行举例: / ...
- UVALive 7037:The Problem Needs 3D Arrays(最大密度子图)
题目链接 题意 给出n个点,每个点有一个值,现在要选择一些点的集合,使得(选择的点生成的逆序对数目)/(选择的点的数量)的比率最大. 思路 点与点之间生成一个逆序对可以看做是得到一个边,那么就是分数规 ...
- HDU 6181:Two Paths(A* + SPFA)
题目链接 题意 给出n个点m条边的无向图,求次短路. 思路 和 POJ 2449 类似,只不过大小要开成long long. #include <bits/stdc++.h> using ...
- scrapy基础知识之将item写入JSON文件:
pipelines.py import json class xxPipeline(object): def __init__(self): self.filename=ope ...
- 【无线安全实践入门】网络扫描和ARP欺骗
文中可能存在错误操作或错误理解,望大家不吝指正. 同时也希望可以帮助到想要学习接触此方面.或兴趣使然的你,让你有个大概的印象. !阅前须知! 本文是基于我几年前的一本笔记本,上面记录了我学习网络基础时 ...