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了。
最新文章
- ADT - Eclipse 常用快捷键
- [LeetCode] Matchsticks to Square 火柴棍组成正方形
- C++ 制作 json 数据 并 传送给服务端(Server) 的 php
- Git add 常见用法
- Oracle SQL Developer连接报错(ORA-12505)
- mysql-创建函数,存储过程以及视图
- COM组件开发实践(八)---多线程ActiveX控件和自动调整ActiveX控件大小(下)
- leetcode 31. Next Permutation(字典序的下一个)
- HDU 5543 Pick The Sticks
- 旋转关节(Revolute Joint)
- sql with as 用法(转载)
- MSIL实用指南-加载null、string、long、float、double等值
- time to set up Goals
- 使用js生成二维码和条形码
- {Django基础九之中间件} 一 前戏 二 中间件介绍 三 自定义中间件 四 中间件的执行流程 五 中间件版登陆认证
- Angular 组件
- jquery+jquery.pagination+php+ajax 无刷新分页
- 0005python中的静态方法和类方法
- C#使用Linq对DataGridView进行模糊查找
- HMM分词实例
热门文章
- MODULE BUILD FAILED: ERROR: COULDN’T FIND PRESET “ES2015” RELATIVE TO DIRECTORY
- ErgExp-lookbehind assert(后行断言)
- Redis06——Redis五大数据类型 list
- C++的四种转换(const_cast、static_cast、dynamic_cast、reinterpreter_cast)
- DataGridView绑定数据源后添加行
- Windows引用opencv静态库
- mybatis--一对多关联
- Python学习之面向对象进阶
- ZOJ1002 —— 深度优先搜索
- AttributeError: This QueryDict instance is immutable