我终于把 JS 中 let，const 和 var 的用法讲清楚

在编程时，变量成为了用于存储数据的容器。
例如，当你把自己的名字输入到网站上的表单字段中时，数据就会存储在变量中。而当你在网站上搜索特定项时，返回的信息在展示给你看之前首先也是存储在变量中。
赋值运算符用于将数据赋值给变量。

var name = "Kingsley";

在JavaScript中，有三个定义变量的关键字。它们是let，const和var。2015年以前，使用var关键字是声明JavaScript变量的唯一方法。
幸而，EmcaScript 2016（ES16）的到来带来了另外两个变量关键字：let和const。
在理解这些关键字之前，我们必须了解变量的三个概念：

1.全局作用域：

全局声明的变量（在函数外部）具有全局作用域，并且可以在整个程序的任何位置进行访问。

var name = "Kingsley";

// global scope
function myFunction() {
   //code goes here
}

2.函数作用域：

在函数内部（即本地）声明的变量具有函数作用域。

// global scope
function Function() {
   var name = "Kingsley";
   // function scope
}

上面的例子中我们已经定义了不同的作用域范围，接下来定义三个变量关键字以及它们允许的变量作用域：

3.块作用域

var：用var关键字声明的变量没有块作用域。也就是说，可以在外部访问任何在块内声明的变量。
let：用let定义的变量可以具有块作用域。也就是说，在块{}内部声明的任何变量都不能在块的外部访问。
const：和let一样，用const定义的变量可以具有块作用域。也就是说，在块{}内部声明的任何变量都不能在块的外部访问。

const和let都有块作用域。

var name = “Kingsley”;
// Here name is Kingsley
{
  let name = “Peter”;
  // name is Peter inside this block
}
// Here name is Kingsley

var name = “Kingsley”;
// Here name is Kingsley
{
  const name = “Peter”;
  // name is Peter inside this block
}
// Here name is Kingsley

此外，当在块的内部进行重新声明时，let和var的行为也有所不同。

var name = “Kingsley”;
// Here name is Kingsley
{
  var name = “Peter”;
  // name is Peter inside this block
}
// Here name is Peter

var name = “Kingsley”;
// Here name is Kingsley
{
  let name = “Peter”;
  // name is Peter inside this block
}
// Here name is Kingsley

用const定义的变量不能重新分配另一个值：

const name = “Kingsley”;
name = “Peter”;      // This will give an error

注意：用const定义的数组和对象可以更改属性。不变性仅适用于原始类型值，例如数字和字符串。

可以使用const创建对象：

const writer = {name:"Kingsley", age:"21", sex:"male"};

你可以更改对象属性：

writer.name = "Peter";

你也可以给对象添加新属性：

writer.surname = "Ubah";

但是，不能重新分配完整的对象：

const writer = {name:"Kingsley", age:"21", sex:"male"};
writer = {name:"Peter", age:"25", sex:"male"}; //报错

数组类型也是如此：

const writers = ["Kingsley", "Peter", "Joe"];
writers = ["Sam", "Clark", "Kingsley"];    // 报错

内部循环

var和let在循环中的行为也有所不同。

var i = 5;
for (var i = 0; i < 10; i++) {
  // code
}
// Here i is 10

let i = 5;
for (let i = 0; i < 10; i++) {
  // code
}
// Here i is 5

4.函数范围

用let关键字声明的变量具有函数作用域。也就是说，在范围之外无法访问该变量。

// name can’t be accessed by this global code
function Foo() {
  let name = "Kingsley";
  // func scope
}

5.全局范围

用var关键字声明的变量具有全局范围。可以从所有JavaScript代码进行访问（并且可以通过window对象进行访问）。

• 用let关键字声明的变量具有全局范围。但是，无法通过Windows对象进行访问。

在全局范围内进行声明时，这两个关键字的行为也有所不同：

var x = 1;

// Now x is 1

var x = 5;

// Now x is 5

上面的代码片段表明，允许使用var关键字在同一范围内进行重新声明。

let x = 1;       // Allowed
let x = 5;       // Not allowed

{
  let x = 2;   // Allowed
  let x = 3;   // Not allowed
}

上面的代码片段显示，let关键字不允许在相同范围或相同块中进行重声明。

var x = 1;       // Allowed
let x = 5;       // Not allowed

{
  var x = 2;   // Allowed
  let x = 3   // Not allowed
}

上面的代码片段显示，可以用var在另一个块中成功地重新声明变量，而let却不可以。

var x = 1;       // Allowed
const x = 5;       // Not allowed

{
  var x = 2;   // Allowed
  const x = 3   // Not allowed
}

上面的代码片段显示，可以用var在另一个块中成功地重新声明变量，但const不能。

let x = 1;       // Allowed

{
  let x = 5;   // Allowed
}

{
  let x = 2;   // Allowed
}

上面的代码片段表明，使用let在另一个作用域或者另一个块重声明是可行的。

const x = 1;       // Allowed

{
  const x = 5;   // Allowed
}

{
  const x = 2;   // Allowed
}

上面的代码片段表明，使用const在另一个作用域或另一个块重声明也是可行的。