ES6-let声明变量
在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声明变量的更多相关文章
- ES6 新增声明变量的 var let const 的区别详解
var 如果使用关键字 var 声明一个变量,那么这个变量就属于当前的函数作用域,如果声明是发生在任何函数外的顶层声明,那么这个变量就属于全局作用域. let 1.let 声明的变量具有块作用域的特征 ...
- ES6中声明变量 let和const特点
在ES6中我们有两种定义变量的方式:let const let特点: 1.let定义时不会进行变量声明提升 2.变量不允许被重复定义 3.变量不可以被删除 4.在for循环当中用let定义i 循 ...
- 【ES6 】声明变量的方式
var function let const import class
- Nodejs与ES6系列1:变量声明
1.声明变量 在JS当中一个变量的作用域(scope)是程序中定义这个变量的区域.变量分为两类,全局(global)的和局部的.其中全局变量的作用域是全局性的,即在JavaScript代码中,它处处都 ...
- es6中的let声明变量与es5中的var声明变量的区别,局部变量与全局变量
自己通过看typescript官方文档里的let声明,与阮一峰老师翻译的的es6学习文档,总结以下三点 1.var声明可以多次重复声明同一个变量,let不行 2.let变量只在块级作用域里面有效果,v ...
- ES6系列之变量声明let const
ES6也出来好久了,最近闲来无事就想着吧es6做一个系统的总结,巩固自己的知识,丰富一下博客. 为什么叫ES6 实际上是ECMA的一个打的标准,这个标准是在2015年6月发布的,正式的名字实际是es2 ...
- ES6中6种声明变量的方法
相关阅读:http://es6.ruanyifeng.com/#docs/let 相关阅读:https://www.cnblogs.com/ksl666/p/5944718.html 相关阅读:htt ...
- es6 - 一共有 6 种声明变量的方法(var, function, let, const, class, import)
var命令和function命令声明的全局变量,依旧是顶层对象的属性:let命令.const命令.class命令声明的全局变量,不属于顶层对象的属性.也就是说,从 ES6 开始,全局变量将逐步与顶层对 ...
- ES6 声明变量的6种方法
ES5 只有两种声明变量的方法:var命令和function命令. ES6除了添加let和const命令,后面章节还会提到,另外两种声明变量的方法:import命令和class命令.所以,ES6 一共 ...
- JavaScript 一、 ES6 声明变量,作用域理解
// JavaScript/* * ========================================================= * * 编译原理 * 尽管通常将 JavaScr ...
随机推荐
- js获取当前时间:yyyy-MM-dd HH:MM:SS
var nowDate = new Date();var year = nowDate.getFullYear(); < ? ; ? " + nowDate.getDate() : n ...
- 矩阵快速幂 裸 hdu1575
裸题,求A^n次后的对角线数字之和 #include<cstdio> #include<algorithm> #include<string.h> using na ...
- 怎么把项目发布到github上
方法一:在github上新建一个项目,然后在本地任意个文件夹(最好新建)右键 git bash here ,再之后 git clone https://github.com/CKTim/BlueT ...
- Uncaught TypeError: Cannot read property 'addEventListener' of null
<script type="text/javascript"> var body1=document.getElementById('#body') </scri ...
- 题解 【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 ...
- Linux 中查看可用的网络接口
目录 Linux 中查看可用的网络接口 在 Linux 中找到可用的网络接口 title: Linux 中查看可用的网络接口 date: 2020/2/25 16:56:36 toc: true -- ...
- FreeRTOS学习笔记2:列表
list.h 列表结构List_t 列表:主要看三个 xLIST:1.5检查列表完整性的.但是需要开启.默认不开启 2:记录列表中列表项的 数量:3:记录当前列表项 索引号:4:列表中的最后一个 列表 ...
- SCROLLINFO结构详解
在刚开始使用SCROLLINFO结构时感觉很不顺手,尤其其中的成员fMask理解不太深刻,经过查询资料才理解一二. 在使用滚动条功能时,如果要设置它的范围和位置可以用以前的函数,例如:SetScrol ...
- PHP 源码 —— is_array 函数源码分析
is_array 函数源码分析 本文首发于 https://github.com/suhanyujie/learn-computer/blob/master/src/function/array/is ...
- redis哈希操作
用户可以通过执行hset命令为哈希中的指定字段设置值: 127.0.0.1:6379> hset hash field value 根据给定的字段是否存在于散列中,hset命令的行为也会有所不同 ...