JS let, var, const的用法以及区别
阅读原文时间:2023年07月08日阅读:2

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

深入学习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

另外,constlet的特性完全一样。

参考

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