JavaScript ES6中const、let与var的对比详解

简介

在JavaScript中，有三种声明变量的关键字：var, let, const。很多初学者可能对它们的区别有所疑惑。本文将详细解释它们之间的区别。

var

var 是在ES6之前使用最广泛的声明变量的关键字。它有如下特点：

• 它是全局作用域或函数作用域内的变量。
• 它可以被重复声明。
• 它存在 变量提升 的机制，即可以在声明之前使用。

下面是一个使用var声明变量的简单例子：

var x = 1;
if (true) {
    var x = 2;
}
console.log(x); // 2

在这个例子中，x在全局作用域内被声明为1，然后在if语句块内部重新声明为2。由于var没有块级作用域，所以if语句内的x并没有影响语句块外的x。

let

let 是ES6中新增的声明变量的关键字。它有如下特点：

• 它只在块级作用域内有效。（块级作用域是指{}包含的代码块）
• 它不可以被重复声明。
• 它不存在变量提升。

下面是一个使用let声明变量的简单例子：

let x = 1;
if (true) {
    let x = 2;
}
console.log(x); // 1

在这个例子中，x在全局作用域内被声明为1，然后在if语句块内部重新声明为2。由于let有块级作用域，所以if语句内的x并不影响语句块外的x。

const

const 是ES6中新增的声明变量的关键字。它有如下特点：

• 它只在块级作用域内有效。（块级作用域是指{}包含的代码块）
• 它不可以被重新赋值。
• 它不存在变量提升。

下面是一个使用const声明常量的简单例子：

const PI = 3.1415;
PI = 3; // TypeError: Assignment to constant variable.

在这个例子中，PI被声明为常量，即使试图修改它的值，也会导致TypeError错误。

总结

• var是 ES5 中声明变量的关键字，它是全局作用域或函数作用域内的变量，可以被重复声明，存在变量提升的机制。
• let和const是 ES6 中新增的关键字，它们都只在块级作用域内有效，不可以被重复声明，不存在变量提升的机制，其中let声明的是变量，可以被重新赋值，而const声明的是常量，不可被重新赋值。

示例

示例一

使用var和let声明的变量Spending，在不同代码块中重复声明。

// 使用var声明变量Spending
var Spending = 10;
if (true) {
    var Spending = 5;
}
console.log(Spending); // 5

// 使用let声明变量Spending
let Spending = 10;
if (true) {
    let Spending = 5;
}
console.log(Spending); // 10

在这个例子中，使用var声明的Spending被重新声明为5，并在if语句内的生命周期影响到了if语句外的生命周期，而使用let声明的Spending只在if语句块内有效，不会影响if语句外的生命周期。

示例二

使用const声明一个常量并尝试更改它的值。

const PI = 3.1415;
PI = 3; // TypeError: Assignment to constant variable.

在这个例子中，常量PI被声明为常量，无法被重新赋值。试图修改它的值将会导致TypeError。