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 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
javascript 继承实现方法
Aug 26 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
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
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
Yii中表单用法实例详解
2016/01/05 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
js停止输出代码
2008/07/20 Javascript
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
Python如何发布程序的详细教程
2018/10/09 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
python manage.py runserver流程解析
2019/11/08 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
tensorflow 查看梯度方式
2020/02/04 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
在python image 中实现安装中文字体
2020/05/16 Python
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
安全资金保障制度
2014/01/23 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
给学校的建议书范文
2014/05/15 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
灵魂歌王观后感
2015/06/17 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android