var、let以及const的区别「代码示例」

介绍

在JavaScript中，我们需要定义变量来存储值。在ES6之前，我们只有一种声明变量的方式，那就是使用var。但是，ES6引入了两个新的方式来声明变量，即let和const。在本文中，我们将讨论这三种声明变量的方式的区别。

var

var是使用得最广泛的变量声明方式。使用var定义的变量没有块级作用域。这就意味着在一个函数内定义的变量可以被整个函数访问。

function example(){
  var a = 1;
  if (true) {
    var b = 2;
  }
  console.log(a); // 输出1
  console.log(b); // 输出2
}
example();

在上面的代码中，我们在if语句块内部定义了变量b，但是在函数外部仍然可以访问它。

另外，使用var声明的变量可以重复定义，不会有错误报告。

var c = 1;
var c = 2;
console.log(c); // 输出2

如果多次声明同一个变量，最终只会存储最后一次的值。

let

let是ES6引入的新声明变量的方式。与var不同，使用let声明的变量具有块级作用域。这意味着在if语句块中定义的变量无法在if语句块之外访问。

function example(){
  let a = 1;
  if (true) {
    let b = 2;
  }
  console.log(a); // 输出1
  console.log(b); // 报错：Uncaught ReferenceError: b is not defined
}
example();

在上面的代码中，我们在if语句块内部定义了变量b，但是在函数外部无法访问它。

与var不同，使用let重复定义变量将报错。

let c = 1;
let c = 2; // 报错：Uncaught SyntaxError: Identifier 'c' has already been declared
console.log(c);

这个特点可以有效减少由于同名变量引起的错误。

暂时性死区

当使用let声明一个变量时，这个变量会被限制在块级作用域内。在这个作用域内，任何引用变量的操作都会报错。

let x = 1;
if (true) {
  console.log(x); // 报错：Uncaught ReferenceError: x is not defined
  let x = 2;
}

在上面的代码中，我们在if语句块之前获得x的值，但在if语句块中定义了另一个x，导致我们无法在if语句块之前访问变量x。这个现象被称为“暂时性死区”。

const

与let类似，const也是ES6引入的声明变量的方式。const定义的变量是常量，其值无法被修改。

const a = 1;
a = 2; // 报错：Uncaught TypeError: Assignment to constant variable.
console.log(a);

在上面的代码中，我们试图将常量a的值从1修改为2，但是会报错。

const创建的常量具有与let相同的块级作用域特性。

可以用const声明对象和数组，但是不能改变对象和数组的引用地址。但是可以改变对象和数组中的值。

const arr = [1, 2, 3];
arr[0] = 2;
console.log(arr); // 输出[2, 2, 3]

在上面的代码中，我们可以修改arr的元素值，但是不能重新定义arr。

总结

1. var声明的变量没有块级作用域，let和const声明的变量具有块级作用域。

2. 使用var重复定义同一个变量不会出错，使用let和const重复定义同一个变量将会出错。

3. 使用let和const声明的变量存在“暂时性死区”。

4. 使用const声明的变量是常量，其值无法被修改。

在实际开发中，我们应该尽量使用let和const，以减少由于变量作用域引起的错误。