let的新特性
let的用法跟es5中的var类似，是用来声明变量的，但是用let声明的变量只在let命令所在的块级区域中有效
不存在变量提升
用var声明的变量是存在变量提升的，但是用let声明的变量是不存在变量提升的，如下实例：
function show(flag){ console.log(a); //因为存在变量提升，所以在这里会打印出undefined if(flag){ var a="123"; return a; }else{ return null; } } show(false);
function show(flag){ console.log(a); //因为let声明的变量不存在变量提升，而变量必须先声明再使用，所以这里会报a is not defined错误 if(flag){ let a="123"; return a; }else{ return null; } } show(false);
暂时性死区
只要在块级作用域内存在let命令，那么他所声明的变量就绑定在这个区域，不受外部的影响。如下实例：
var tmp=123; if(true){ tmp='abc'; //在{}这个代码块内用let声明了tmp这个变量，所以tmp是不受外部影响的，不能在声明变量之前使用变量，所以在这里会报tmp is not defined错误 let tmp; }
不允许重复声明
let不允许在相同作用域内，重复声明同一个变量。所以以下两种情况都会报错
function func1(){ let a=10; var a=1; } func1(); function func2(){ let a=10; let a=1; } func2();
关于const
const命令用于声明一个只读的常量，const声明的常量跟let声明的变量有一些相同的特性
- const声明的常量只在const命令所在的代码块内有效
const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。- const声明的常量也不能重复声明
const还有一些自己的特性，
- 常量一旦声明，是不能改变的。如下实例：
const PI=3.14; console.log(PI); PI=3.14159; //这里会报错，因为const声明了之后，常量的值是不能改变的
- const一旦声明，就必须要赋值，否则就会报错
const PI;//这样会报错，声明了就必须要赋值
let经典实例-选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>let版选项卡</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
-webkit-user-select: none;
}
ul, li {
list-style: none;
}
.box {
500px;
margin: 10px auto;
}
.box ul{
overflow: hidden;
}
.box ul li{
float: left;
margin-right: 15px;
100px;
height: 30px;
border: 1px solid #337ab7;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.box ul li.on{
background:#5bc0de ;
}
.box div {
display: none;
height: 150px;
text-align: center;
line-height: 150px;
background: #5bc0de;
border: 1px solid #9783b9;
}
.box .show{
display: block;
background: #5bc0de;
border-bottom-color: #5bc0de;
}
</style>
</head>
<body>
<div id="box" class="box">
<ul>
<li class="on">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class="show">内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
<script type="text/javascript">
var oBox=document.getElementById('box');
var oLi=document.getElementsByTagName('li');
var aDiv=oBox.getElementsByTagName('div');
for (let i = 0; i <oLi.length; i++) { //let存在块级作用域，所以这里的i只在当前循环内有效
oLi[i].onclick=function(){
for (var i = 0; i < oLi.length; i++) {
oLi[i].className='';
aDiv[i].style.display='none';
}
oLi[i].className='on';
aDiv[i].style.display='block';
}
}
</script>
</body>
</html>