es6 for循环中let和var区别详解


Posted in Javascript onJanuary 12, 2020

let和var区别:

for(var i=0;i<5;i++){
  setTimeout(()=>{
    console.log(i);//5个5
  },100) 
}
console.log(i);//5
console.log('=============')

for(let j=0;j<5;j++){
  setTimeout(()=>{
    console.log(j);//0,1,2,3,4
  },100) 
}
console.log(j);//报错 j is not defined

为什么 用let就可以显示正确结果,而var就不可以呢?

var是全局作用域,有变量提升的作用,所以在for中定义一个变量,全局可以使用,循环中的每一次给变量i赋值都是给全局变量i赋值。

let是块级作用域,只能在代码块中起作用,在js中一个{}中的语句我们也称为叫一个代码块,每次循环会产生一个代码块,每个代码块中的都是一个新的变量j;

es6中不是说let声明变量不能重复声明吗?看下边例子:

{
  let a=123;
}
{
  let a=246;
}
console.log(a);//a is not defined;
{ 
  var b=1;
}
{ 
  var b=2;
}
console.log(b);// 2;

{}代表一个块,这个时候let声明的变量只在这个块中起作用,而这个块对var声明的变量不起作用。因为var是全局作用域。

let a=1;
let a=2;
//Uncaught SyntaxError: Identifier 'a' has already been declared
//let不能重复声明

let b=1;
var b=2;

// Uncaught SyntaxError: Identifier 'a' has already been declared
//let不能重复声明


var c=3;
var c=4;
console.log(c)//4;var可以重复声明

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 页面载入进度条实现代码
Feb 08 Javascript
js 动态选中下拉框
Nov 26 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
javascript操作表格排序实例分析
May 06 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 Javascript
js 计数排序的实现示例(升级版)
Jan 12 #Javascript
JS实现动态无缝轮播
Jan 11 #Javascript
原生js实现无缝轮播图
Jan 11 #Javascript
JS实现轮播图效果
Jan 11 #Javascript
js实现带搜索功能的下拉框
Jan 11 #Javascript
js实现select下拉框选择
Jan 11 #Javascript
js实现二级联动简单实例
Jan 11 #Javascript
You might like
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
事业单位个人应聘自荐信
2013/09/21 职场文书
小学新学期寄语
2014/04/02 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
工作失误检讨书
2015/01/26 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL