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.elementGetStyle(element, style)应用示例
Sep 24 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 Javascript
JS数组方法some、every和find的使用详情
Oct 05 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
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通过获取头信息判断图片类型的方法
2015/06/26 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
使用python实现ANN
2017/12/20 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Django stark组件使用及原理详解
2019/08/22 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
社保委托书怎么写
2014/08/02 职场文书
党支部先进事迹材料
2014/12/24 职场文书
售后服务承诺函格式
2015/01/21 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
golang正则之命名分组方式
2021/04/25 Golang
使用tensorflow 实现反向传播求导
2021/05/26 Python
Vue操作Storage本地化存储
2022/04/29 Vue.js