JavaScript LetECMAScript 2015 ES2015 引入了两个重要的 JavaScript 新关键

ECMAScript 2015

ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。

这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。

在 ES2015 之前，JavaScript 只有两种类型的作用域：全局作用域和函数作用域。

全局作用域

全局（在函数之外）声明的变量拥有全局作用域。

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>

<script>
var carName = "porsche";
myFunction();

function myFunction() {
    document.getElementById("demo").innerHTML =
    "I can display " + carName;
}
</script>

</body>
</html>

函数作用域

局部（函数内）声明的变量拥有函数作用域。

<!DOCTYPE html>
<html>
<body>
<p id="demo1"></p>
<p id="demo2"></p>

<script>
myFunction();

function myFunction() {
    var carName = "porsche";
    document.getElementById("demo1").innerHTML =
    typeof carName + " " + carName;
}

document.getElementById("demo2").innerHTML =
typeof carName;
</script>

</body>
</html>

JavaScript 块作用域

通过 var 关键词声明的变量没有块作用域。

在块 **{} **内声明的变量可以从块之外进行访问。

重新声明变量

使用 var 关键字重新声明变量会带来问题。

在块中重新声明变量也将重新声明块外的变量：

<p id="demo"></p>

<script>
var  x = 10;
// Here x is 10
{  
  var x = 2;
  // Here x is 2
}
// Here x is 2
document.getElementById("demo").innerHTML = x;
</script>

使用 let 关键字重新声明变量可以解决这个问题。

循环作用域

let和var

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
<p id="da"></p>
<script>
var i = 1;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
document.getElementById("demo").innerHTML = i;


let a = 3;
for (let a = 0; a < 10; a++) {
  // 一些语句
}
document.getElementById("da").innerHTML = a;
//循环中用var定义执行完毕，用let定义只执行值得次数
</script>

</body>
</html>