let 和 const 是ES6中新增用来定义变量的。
var
var语句用来声明JavaScript变量,在学习JS入门最基础了解的知识,也就是在ES5阶段,所有变量的声明都是用var。
var a=1;
alert(a);
let
let同样是用来定义变量。
let a=1;
alert(a);
var 和 let 区别
既然 var 和 let 都是用来定义变量,那么它们之间必然是存在区别,否则ES6中何故新增这一用法。
1、let 自带块级作用域,它作用于代码块中,{}包含起来的就是代码块,而这也就形成了一个作用域。因此 let 只能在代码块中使用。然而 var 只有函数作用域。
{
var a=1;
}
alert(a);
var 声明的变量在代码块中,外部调用这个变量仍然可以使用。
{
let a=1;
}
alert(a);
let 声明的变量在代码块外调用就会报错,提示a没有被定义,这就说明了 let 只能在代码块中使用。
2、var 声明的变量可以重复,但是 let 不允许重复声明。
var a=1;
var a=2;
alert(a);
显然这是正确的,后一个声明的 a 覆盖了之前的,返回结果就是 2。
let a=1;
let a=2;
alert(a);
会提示报错,“Identifier 'a' has already been declared”。
let 用途
正是因为 let 有块级作用域,这便简化了ES5中封闭空间的实现。那先回顾一下所谓的封闭空间。JavaScript 中没用私有作用域的概念,如果在多人开发的项目上,你在全局或局部作用域中声明了一些变量,可能会被其他人不小心用同名的变量给覆盖掉,根据javascript函数作用域链的特性,可以使用这种技术可以模仿一个私有作用域,用匿名函数作为一个“容器”,“容器”内部可以访问外部的变量,而外部环境不能访问“容器”内部的变量,所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突,俗称 “匿名包裹器” 或 “命名空间”。这也就是立即执行函数的用途。
(function(){
var a=1;
})()
alert(a);
如上就是一个很简单的模拟私有作用域,在外部调用 a 则会报错未定义,然而这样的形式太过复杂,有了 let 则会简便很多。譬如,设置三个按钮,不同编号,在点击按钮会弹出相应的编号。
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<script>
var btn = document.getElementsByTagName("input");
for(var i=0; i<btn.length; i++){
(function(i){
btn[i].onclick=function(){
alert("按钮"+parseInt(i+1));
}
})(i)
}
</script>
这里就用到了立即执行函数,也就是在for循环中增加了( function(){…} )()这样的写法。用 let 就会简单多了,相当于替代了理解执行函数的用法。
var btn = document.getElementsByTagName("input");
for(let i=0; i<btn.length; i++){
btn[i].onclick=function(){
alert("按钮"+parseInt(i+1));
}
}
const
const用来定义常量。一旦赋值,以后再也无法修改。
const a=1;
a=2; //报错
并且,const声明时必须给初始值, 不能重复声明。
const a;
a=1; //报错
const a=1;
const a=2; //报错
const用途
为了防止意外修改变量,比如引入库名,组件名。