var、let、const 的区别｜ 8月更文挑战

“这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战”

变量的命名有多种方式，今天我们就来聊一聊在 JavaScript 中的 六种 命名方式。

var

我想，陪伴着我们最常时间的，应该就是使用 var 的方式，来命名变量了吧。

但是，使用 var 命名变量会有以下问题：

• 污染全局变量，使用 var 命名的变量，会被挂载到全局

var demo = 'demo';
console.log(window.demo === demo); // true
复制代码

• 会进行提升

console.log(a); // undefined
var a = 123;
console.log(a); // 123
复制代码

• 变量的类型，是根据变量值来决定的 (可以覆盖原来的值)

var data = [1, 2, 3];
console.log(data); // [1, 2, 3]
data = 123;
console.log(data); // 123
复制代码

• 允许重复声明

var a = 123;
console.log(a); // 123
var a = [1, 2, 3];
console.log(a); // [1, 2, 3];
复制代码

由于 var 命名变量的各种问题，所以在 ES6 中新增了两个命名方式 let 和 const，并且引入了 块级作用域 的概念。

let

• 不会污染全局变量

let demo = 'demo';

console.log(window.demo); // undefined
复制代码

使用 var 声明的变量是挂载在全局对象 window 上的，但是使用 let 声明的变量是不会挂载到全局对象 window 上的，这样就不会造成全局对象的变量污染了。

• 不会进行变量提升

console.log(demo); // Uncaught ReferenceError: Cannot access 'demo' before initialization

let demo = 123;
复制代码

和 var 不一样，当使用 let 声明该变量前使用它，会报错。一定要在这个变量初始化之后，才能访问。

• 不允许重复声明

let demo = 'demo';
let demo = 132;
console.log(demo); // Uncaught SyntaxError: Identifier 'demo' has already been declared
复制代码

可以看到在控制台上给我们报了错误，错误信息是为了告诉我们，变量 demo 已经声明了。

const

const 具有 let 的所有特点。就不一 一阐述了。

使用 const 命名的变量，我们通常称它为 常量，为什么呢？
因为使用了 const 命名了变量之后，该变量的值就不能进行更改了。

如果是引用值的话，const 只能确保这个变量指向的地址不会发生改变，不能确保里面的属性的引用值不能进行修改。如下：

• 原始值

const demo = 123;
demo = 234;
console.log(demo); // Uncaught TypeError: Assignment to constant variable.
复制代码

会报类型错误，告诉我们不能对常量进行重新赋值。

• 引用值

// 1
const demo = {a: 1};
demo.a = 2;
console.log(demo); //{a:2}

// ======

// 2
const demo = [1];
demo = {a:1};
console.log(demo); // Uncaught TypeError: Assignment to constant variable.
复制代码

一旦 const 命名的变量指向地址发生改变之后，就会报错。

注意

• 使用 const 命名变量的话，一定要在命名的时候，就进行初始化，否则会报错。
• 在循环中，控制循环的变量不能使用 const，可以使用 let：

  for(const i = 0, i < 9; i ++){
      const a = i;
      console.log(a);
  };
  // 0 第一次输出
  // Uncaught TypeError: Assignment to constant variable.  第二次输出，并且不会在进行后续操作
  
  
  for(let i = 0; i < 9; i ++) {
      const a = i;
      console.log(a)
  }
  // 0
  // 1
  // 2
  // ...
  // 8
  复制代码