JS let, var, const的用法以及区别

本文摘自多位前辈的博文，另外还有一些我的多余补充，摘自地址已补充。非常感谢各位前辈。仅以笔记学习为目的！

深入学习ES6的知识还请访问阮一峰老师的ES6教程

如果不使用let或者const，在JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。

1. var声明语句

摘自：https://blog.csdn.net/weixin_44939019/article/details/99843495

var声明语句声明一个变量，并且可选的将它初始化为一个值。

• 声明变量的作用域限制在其声明位置的上下文中，而非声明变量总是全局的（作为window的属性存在），例如：

function x() {
  y = 1;   // 在严格模式（strict mode）下会抛出 ReferenceError 异常
  var z = 2;
}

x();

console.log(y); // 打印 "1"
console.log(z); // 抛出 ReferenceError: z 未在 x 外部声明

• 非声明全局变量和外部函数作用域

var x = 0;  // x是全局变量，并且赋值为0。

console.log(typeof z); // undefined，因为z还不存在。

function a() { // 当a被调用时，
  var y = 2;   // y被声明成函数a作用域的变量，然后赋值成2。

  console.log(x, y);   // 0 2 

  function b() {       // 当b被调用时，
    x = 3;  // 全局变量x被赋值为3，不生成全局变量。
    y = 4;  // 已存在的外部函数的y变量被赋值为4，不生成新的全局变量。
    z = 5;  // 创建新的全局变量z，并且给z赋值为5。
  }         // (在严格模式下（strict mode）抛出ReferenceError)

  b();     // 调用b时创建了全局变量z。
  console.log(x, y, z);  // 3 4 5
}

a();                   // 调用a时同时调用了b。
console.log(x, z);     // 3 5
console.log(typeof y); // undefined，因为y是a函数的本地（local）变量。

全局变量也可以通过window.xxx调用，在方法体中局部变量与全局变量同名的话，优先使用局部变量，所以可以通过window.xxx调用全局变量。

2. let声明语句

摘自：https://es6.ruanyifeng.com/#docs/let

在ES6之前，我们都是用var来声明变量，而且在JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。

所以ES6后出现let，就是为了解决块级作用域的变量问题。

例如：

{
  var i = 9;
}
console.log(i);  // 9

ES6新增的let，可以声明块级作用域的变量。

{
  let i = 9;     // i变量只在 花括号内有效！！！
}
console.log(i);  // Uncaught ReferenceError: i is not defined

• let 配合for循环的独特应用（注意JS中for循环的特性）
• let没有变量提升与暂时性死区
• let变量不能重复声明

示例

摘自：https://blog.csdn.net/weixin_44939019/article/details/99843495

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 同样的变量!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 不同的变量
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

3. const声明语句

摘自：https://es6.ruanyifeng.com/#docs/let

const声明一个只读的常量。一旦声明，常量的值就不能改变，并且必须声明的同时初始化。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.
const foo;
// SyntaxError: Missing initializer in const declaration

另外，const与let的特性完全一样。

参考

https://www.cnblogs.com/fly_dragon/p/8669057.html

https://zhidao.baidu.com/question/329685205173520085.html

https://www.cnblogs.com/zhongxia-zx/p/12019116.html