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 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
Vue 实现拨打电话操作
Nov 16 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
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
Python 修改列表中的元素方法
2018/06/26 Python
tensorflow更改变量的值实例
2018/07/30 Python
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
师德学习感言
2014/01/31 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
楚门的世界观后感
2015/06/03 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
作文之亲情600字
2019/09/23 职场文书
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers