----------------------------------------------------------------------------------let命令----------------------------------------------------
基本用法
ES6新增了let命令，用來聲明變量。它的用法類似於var，但是所聲明的變量，只在let命令所在的代碼塊內有效。
不存在變量提升
let不像var那樣，會發生“變量提升”現象。
暫時性死區
只要塊級作用域內存在let命令，它所聲明的變量就“綁定”（binding）這個區域，不再受外部的影響。
不允許重複聲明
let不允許在相同作用域內，重複聲明同一個變量。
--------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let與var的區別</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
{
var a=100;
let b=200; //let所聲明的變量，只在let命令所在的代碼塊內有效
}
console.log(a); //100
console.log(b); //b is not defined --Error
</script>
</head>
<body>
</body>
</html>
----------------------------------------------------------------------let不存在變量提升------------------
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>let不存在變量提升</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
//ES5
console.log("ES5:");
var a=[];
for(var i=0;i<10;i++){
var c=i;
a[i]=function(){
console.log(c);
};
};
a[5]();//輸出爲9,不管a[]爲幾，總是要等循環結束才跳出循環
//ES6
console.log("ES6:");
var b=[];
for(var j=0;j<10;j++){
let d=j;
b[j]=function(){
console.log(d);
};
};
b[5](); //輸出5，即 let不像var那樣，會發生“變量提升”現象。
</script>
</head>
<body>
</body>
</html>
---------------------------------------------------------------let暫時性死區-----------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let暫時性死區</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
{
console.log(a); //undefined
let a=100;
console.log(a); //100
}
</script>
</head>
<body>
</body>
</html>
---------------------------------------let不受外界影響-------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let不受外界影響</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
var a=100;
{
console.log(a); //undefined
let a=100;
console.log(a); //100
}
</script>
</head>
<body>
</body>
</html>
--------------------------------------------------------------------------let模塊內不允許重複聲明----------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let模塊內不允許重複聲明</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
{
var a=100;
var a=200;
}
console.log(a);
{
var b=100;
let b=200;
}
console.log(b);//報錯
{
let c=100;
var c=200;
}
console.log(c);//報錯
{
let d=100;
let d=200;
}
console.log(d);//報錯
</script>
</head>
<body>
</body>
</html>
-------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let不允許重複聲明</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
{
var a=100;
var a=200;
console.log(a);
}
{
let a=300;
console.log(a);
}
//模塊內部不允許用let命令重複聲明，模塊之間可以重複聲明
{
var a=1;
let a=2;
}
</script>
</head>
<body>
</body>
</html>
------------------------------------