在es6中除了var还可以用let申明变量,并且建议使用let而不要再使用var,两者有以下区别:

1.let不能重复声明变量

var name = 'tom';

var name = 'jack';

console.log(name);

输出:jack。不会报错

let name = 'tom';

let name = 'jack';

console.log(name);

报错,Identifier 'name' has already been declared

2.let申明的变量不会做预处理变量提升

console.log(name);

var name = 'tom';

输出:undefined。不会报错

console.log(name);

let name = 'tom';

报错,Cannot access 'name' before initialization

3.let只在块级作用域内有效

if(true){

  var name = 'tom';

}

console.log(name );

输出:tom

if(true){

  let name = 'tom';

}

console.log(name );

报错,name is not defined

这个特性可以在循环遍历加监听的时候十分好用。比如这样一个需求,有n个button,在点击button的时候输出这个button的下标是第几个

当使用var的时候:

let btns = document.getElementByTagName('button');

for(var i =0;i<btns.length;i++){

  var btn = btn[i];

  btn.onclick=function(){

    alert(i);

  }

}

输出:不管点击那个button输出的都是最后一个button的下标,因为for循环是在我们点击按钮之前就已经全部执行完了的,而使用var没有块级作用域,也就是是说所有的i都是一个,它的值就是最后一次循环i的值。以前解决这个问题是使用闭包的方式:

let btns = document.getElementByTagName('button');

for(var i =0;i<btns.length;i++){

  var btn = btn[i];

  function(i){

    btn.onClick=function(){

      alert(i);

    }

  }(i);

}

这种方式的原理是,每一次循环都会生成一个函数,而在btn.onClick=function(){alert(i);}声明的回调函数里面使用了外部函数的变量i所有产生了闭包,将当前的i保存起来,在后面回调函数出发的时候打印的就是当前闭包中保存的i;

如果用let来申明i则可以简单解决这个问题:

let btns = document.getElementByTagName('button');

for(let i =0;i<btns.length;i++){

  var btn = btn[i];

  btn.onclick=function(){

    alert(i);

  }

}

因为每次循环都有一次块级作用域产生,而用let声明的变量只能在当前的块级作用域中使用,所以最后回调的时候使用的i就是当前循环次数下的块级作用域下的i,就不会向var声明一样,使用的都是同一个i了。

ES6-let声明变量的更多相关文章

  1. ES6 新增声明变量的 var let const 的区别详解

    var 如果使用关键字 var 声明一个变量,那么这个变量就属于当前的函数作用域,如果声明是发生在任何函数外的顶层声明,那么这个变量就属于全局作用域. let 1.let 声明的变量具有块作用域的特征 ...

  2. ES6中声明变量 let和const特点

    在ES6中我们有两种定义变量的方式:let    const let特点: 1.let定义时不会进行变量声明提升 2.变量不允许被重复定义 3.变量不可以被删除 4.在for循环当中用let定义i 循 ...

  3. 【ES6 】声明变量的方式

    var function let const import class

  4. Nodejs与ES6系列1:变量声明

    1.声明变量 在JS当中一个变量的作用域(scope)是程序中定义这个变量的区域.变量分为两类,全局(global)的和局部的.其中全局变量的作用域是全局性的,即在JavaScript代码中,它处处都 ...

  5. es6中的let声明变量与es5中的var声明变量的区别,局部变量与全局变量

    自己通过看typescript官方文档里的let声明,与阮一峰老师翻译的的es6学习文档,总结以下三点 1.var声明可以多次重复声明同一个变量,let不行 2.let变量只在块级作用域里面有效果,v ...

  6. ES6系列之变量声明let const

    ES6也出来好久了,最近闲来无事就想着吧es6做一个系统的总结,巩固自己的知识,丰富一下博客. 为什么叫ES6 实际上是ECMA的一个打的标准,这个标准是在2015年6月发布的,正式的名字实际是es2 ...

  7. ES6中6种声明变量的方法

    相关阅读:http://es6.ruanyifeng.com/#docs/let 相关阅读:https://www.cnblogs.com/ksl666/p/5944718.html 相关阅读:htt ...

  8. es6 - 一共有 6 种声明变量的方法(var, function, let, const, class, import)

    var命令和function命令声明的全局变量,依旧是顶层对象的属性:let命令.const命令.class命令声明的全局变量,不属于顶层对象的属性.也就是说,从 ES6 开始,全局变量将逐步与顶层对 ...

  9. ES6 声明变量的6种方法

    ES5 只有两种声明变量的方法:var命令和function命令. ES6除了添加let和const命令,后面章节还会提到,另外两种声明变量的方法:import命令和class命令.所以,ES6 一共 ...

  10. JavaScript 一、 ES6 声明变量,作用域理解

    // JavaScript/* * ========================================================= * * 编译原理 * 尽管通常将 JavaScr ...

随机推荐

  1. js获取当前时间:yyyy-MM-dd HH:MM:SS

    var nowDate = new Date();var year = nowDate.getFullYear(); < ? ; ? " + nowDate.getDate() : n ...

  2. 矩阵快速幂 裸 hdu1575

    裸题,求A^n次后的对角线数字之和 #include<cstdio> #include<algorithm> #include<string.h> using na ...

  3. 怎么把项目发布到github上

    方法一:在github上新建一个项目,然后在本地任意个文件夹(最好新建)右键 git bash here   ,再之后 git clone https://github.com/CKTim/BlueT ...

  4. Uncaught TypeError: Cannot read property 'addEventListener' of null

    <script type="text/javascript"> var body1=document.getElementById('#body') </scri ...

  5. 题解 【Codeforces755A】 PolandBall and Hypothesis

    我们可以发现,当n>2时,n·(n-2)+1=(n-1)·(n-1),因此,输出n-2即可. 如果n<=2,我们可以发现: 当n=2时,2·4+1=9不是质数,输出4即可: 当n=1时,1 ...

  6. Linux 中查看可用的网络接口

    目录 Linux 中查看可用的网络接口 在 Linux 中找到可用的网络接口 title: Linux 中查看可用的网络接口 date: 2020/2/25 16:56:36 toc: true -- ...

  7. FreeRTOS学习笔记2:列表

    list.h 列表结构List_t 列表:主要看三个 xLIST:1.5检查列表完整性的.但是需要开启.默认不开启 2:记录列表中列表项的 数量:3:记录当前列表项 索引号:4:列表中的最后一个 列表 ...

  8. SCROLLINFO结构详解

    在刚开始使用SCROLLINFO结构时感觉很不顺手,尤其其中的成员fMask理解不太深刻,经过查询资料才理解一二. 在使用滚动条功能时,如果要设置它的范围和位置可以用以前的函数,例如:SetScrol ...

  9. PHP 源码 —— is_array 函数源码分析

    is_array 函数源码分析 本文首发于 https://github.com/suhanyujie/learn-computer/blob/master/src/function/array/is ...

  10. redis哈希操作

    用户可以通过执行hset命令为哈希中的指定字段设置值: 127.0.0.1:6379> hset hash field value 根据给定的字段是否存在于散列中,hset命令的行为也会有所不同 ...