1.let作用域局限於當前代碼塊 代碼1： let作用域僅限於當前代碼塊，而var的作用域是全局的 2.let作用域不會被提升 代碼2： let作用域不會被提升，而var作用域會被提升 代碼2相當於： 3.let不能被重覆定義 代碼3： 上面這段代碼運行會報錯：Identifier 'str2' h ...
1.let作用域局限於當前代碼塊
文章中//後面的均為列印結果
代碼1：
{
var str1 = "小花";
let str2 = "小明";
console.log(str1); //小花
console.log(str2); //小明
}
console.log(str1); //小花
console.log(str2); //Error:str2 is not defined
let作用域僅限於當前代碼塊，而var的作用域是全局的
2.let作用域不會被提升
代碼2：
{
console.log(str1); //undedined
console.log(str2); //str2 is not defined
var str1 = "小花";
let str2 = "小明";
}
let作用域不會被提升，而var作用域會被提升
代碼2相當於：
{
var str1;
console.log(str1); //undedined
console.log(str2); //str2 is not defined
str1 = "小花";
let str2 = "小明";
}
3.let不能被重覆定義
代碼3：
var str1 = "小花1"; var str1 = "小花2"; let str2 = "小明1"; let str2 = "小明2";
上面這段代碼運行會報錯：Identifier 'str2' has already been declared
var重覆定義後面的會覆蓋前面的，而let則不行，會報語法錯誤，str2標識符已經被聲明
4.let父子作用域
代碼4：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>learn</title>
</head>
<body>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script>
var btns = document.querySelectorAll('button')
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
alert('點擊第'+i+'個按鈕')
}
}
</script>
</body>
</html>
此時不管點擊哪個都是彈出點擊第5個按鈕，因為此時在點擊的事件觸發的時候，for迴圈已經走完了，而此時的i的值為5，此時i變成全局的了，所以不管點擊哪個都會彈出點擊第5個按鈕。
代碼5：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>learn</title>
</head>
<body>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script>
let btns = document.querySelectorAll('button')
for(let i=0;i<btns.length;i++){
btns[i].onclick = function(){
alert('點擊第'+i+'按鈕')
}
}
</script>
</body>
</html>
將上面代碼的var改成let，點擊的時候就會依次彈出對應的i的值，因為此時let定義的變數i的生命周期到for迴圈最後的大括弧就結束了，所以alert中的i和btns[i]中的i對應的就是每次迴圈的值。
以上四點就是let與var的區別，如果有問題可以在評論里提哦。
