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

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可以重复声明

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

(0)

相关推荐

  • 详解javascript中var与ES6规范中let、const区别与用法

    随着ES6规范的到来,Js中定义变量的方法已经由单一的 var 方式发展到了 var.let.const 三种之多.var 众所周知,可那俩新来的货到底有啥新特性呢?到底该啥时候用呢?下面就是小编总结出的关于javascript中var与ES6规范中let.const区别详解 我们先来絮叨絮叨 var 方式定义变量有啥 bug ? Js没有块级作用域 请看这样一条规则:在JS函数中的var声明,其作用域是函数体的全部. for(var i=0;i<10;i++){ var a = 'a'; }

  • JavaScript ES6中const、let与var的对比详解

    ECMAScript 6 新增 const 和 let 命令,用来声明变量. 声明方式 变量提升 作用域 初始值 重复定义 const 否 块级 需要 不允许 let 否 块级 不需要 不允许 var 是 函数级 不需要 允许 变量提升:const 和 let 必须先声明再使用,不支持变量提升 console.log(c1, l1, v1); // 报错 // Uncaught ReferenceError: c1 is not defined const c1 = 'c1'; let l1 =

  • 简述ES6新增关键字let与var的区别

    最近看了很多文章,偶然间看到ES6中新增了一个关键字 let ,它具有与 var 关键字相似的功能.一开始使用它时,发现它让我对之前一些习以为常的东西产生了怀疑. 下面先让我们看看它和 var 之间用法的不同 { var a = 10; let b = 8; } a //10 b // Referenceerror :b is not defined 上面在代码块中声明了两个变量并分别赋值输出到控制台,结果a的变量成功输出,b的输出结果产生了报错.可见,let声明的变量只在它所在的代码块中产生作

  • JS变量中有var定义和无var定义的区别以及es6中let命令和const命令

    之前我们在写js代码的时候都知道可以用var定义全局变量和局部变量,也可以省略var,而且在非严格模式下不会报错,但是并不知道两者的区别... var x = 1; y = 4; console.log(x);//1 console.log(y);//4 console.log(window.x);//1 console.log(window.y);//4 简单测试下可以知道定义的x和y都被挂载在window对象上,变为window下的属性,这并不能说明什么... delete x; delet

  • ES6深入理解之“let”能替代”var“吗?

    前言 我已经使用ES2015(ES6)的语法编写JavaScript程序很久了,并且喜欢上它提供的新特性带来的优雅和简洁.我最习惯的就是不再使用var,而是let/const.我想当然的以为let仅仅是var的替代者,而事实上let还为我们提供了更加精细的作用域. 我大多数时候使用的变量都是用const来声明,因为如果尝试对使用const声明的变量进行修改,将会报错.这可以避免不小心将一个不该修改的常量值修改.但是,我们还是需要可以声明可以被修改的变量,比如在循环里面的计数器,我们需要不断地对改

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

    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 为什么

  • pythonfor循环中range与len区别

    目录 range(x) range(start,stop) range(start,stop,step) len() len不支持 int 或者float range(len()) 用range常见错误 range(x) range(9) 代表着0.1.2.3.4.5.6.7.8 这九个顺序数字的集合.也就是 range(9) => range(0,9) => [0,1,2,3,4,5,6,7,8] 我们尝试用 for 打印 range(9): 此外,range还有另外两种用法,形如切片: r

  • node.js中grunt和gulp的区别详解

    node.js中grunt和gulp的区别详解 自nodeJS登上前端舞台,自动化构建变得越来越流行.目前最流行的当属grunt和gulp,这两个光看名字挺像,功能也差不多,不过gulp能在grunt这位大哥如日中天的境况下开辟出自己的一片天地,有着她独到的优点. 易用 Gulp相比Grunt更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码. 高效 Gulp相比Grunt更有设计感,核心设计基于Unix流的概念,通过管道连接,不需要写中间文件. 高质量 Gulp的每个插件只完成一个功能

  • 基于js中this和event 的区别(详解)

    今天在看javascript入门经典-事件一章中看到了 this 和 event 两种传参形式.因为作为一个初级的前端开发人员平时只用过 this传参,so很想弄清楚,this和event的区别是什么,什么情况下用什么比较合适. onclick = changeImg(this)       vs     onclick = changeImg(event) <img src='usa.gif' onclick="changeImg(event)" /> <scrip

  • java 中同步、异步、阻塞和非阻塞区别详解

    java 中同步.异步.阻塞和非阻塞区别详解 简单点说: 阻塞就是干不完不准回来,一直处于等待中,直到事情处理完成才返回: 非阻塞就是你先干,我先看看有其他事没有,一发现事情被卡住,马上报告领导. 我们拿最常用的send和recv两个函数来说吧... 比如你调用send函数发送一定的Byte,在系统内部send做的工作其实只是把数据传输(Copy)到TCP/IP协议栈的输出缓冲区,它执行成功并不代表数据已经成功的发送出去了,如果TCP/IP协议栈没有足够的可用缓冲区来保存你Copy过来的数据的话

  • 再谈PHP中单双引号的区别详解

    在PHP中,字符串的定义可以使用英文单引号' ',也可以使用英文双引号" ". 但是必须使用同一种单或双引号来定义字符串,如:'Hello World"和"Hello World'为非法的字符串定义. 单引号和双引号到底有啥区别呢?下面通过本文学习一下吧. 1.定义字符串 在PHP中,字符串的定义可以使用单引号,也可以使用双引号.但是必须使用同一种单或双引号来定义字符串,如:'Hello"和"Hello'为非法的字符串定义. 定义字符串时,只有一

  • JavaScript中object和Object的区别(详解)

    JavaScript中object和Object有什么区别,为什么用typeof检测对象,返回object,而用instanceof 必须要接Object呢 这个问题和我之前遇到的问题非常相似,我认为这里有两个问题需要解决,一个是运算符new的作用机制,一个是function关键字和Funtion内置对象之间的区别.看了一些前辈的博客和标准,这里帮提问者总结一下. 1.new new运算符的作用是创建一个对象实例.这个对象可以是用户自定义的,也可以是带构造函数的一些系统自带的对象.如果 new

  • js监听键盘事件的方法_原生和jquery的区别详解

    经常需要监听键盘的事件,以便做更好的操作,基本原理是:监听全局键盘,每一个键盘,当用户按下某一按键时,返回对应的键值,然后再判断用户按下了哪一科按键,键值对应按键的名称在最下面列出,自行比对.去以下介绍两种不同的方式 原生键盘监听事件:按下一次按键,分为三个过程,按下-按住-松开 onkeydown:某个键被按下 onkeypress:某个键盘的键被按下或按住 onkeyup:某个键盘的键被松开 使用方法,一般来说,键盘监听是直接在整个页面文档上进行监听的,也就是document上 以下是原生的

  • javaScript之split与join的区别(详解)

    共同点:split与join函数通常都是对字符或字符串的操作: 两者的区别: (1)split()用于分割字符串,返回一个数组, 例如 var string="hello world?name=xiaobai"; var splitString = string.split("?"); console.log(splitString);//["hello world","name=xiaobai"] split()只有一个参数

  • 基于js中style.width与offsetWidth的区别(详解)

    作为一个初学者,经常会遇到在获取某一元素的宽度(高度.top值...)时,到底是用 style.width还是offsetWidth的疑惑. 1. 当样式写在行内的时候,如 <div id="box" style="width:100px">时,用 style.width或者offsetWidth都可以获取元素的宽度. 但是,当样式写在样式表中时,如 #box{ width: 100px; }, 此时只能用offsetWidth来获取元素的宽度,而sty

随机推荐