JavaScript中var与let的区别

讲解一下JavaScript中var与let的区别，首先从定义入手。

定义

• var是ES5时代定义的关键字，用于声明变量，可以声明全局变量或局部变量；
• let是ES6时代新增的关键字，用于声明块级作用域变量，只能在块级作用域中使用。

区别

1. var声明的变量存在变量提升，而let不存在。

变量提升是指变量在声明前部分代码就可以使用的行为。对于使用var声明的变量，由于JavaScript会将当前作用域中所有声明的变量提升到作用域顶部，因此可以在变量声明前使用，值为undefined；而使用let声明的变量，在声明之前使用会抛出ReferenceError。

console.log(num);    // 输出：undefined
var num = 1;

console.log(age);    // 报错：ReferenceError: Cannot access 'age' before initialization
let age = 10;

1. let声明的变量不允许重复声明，而var可以。

使用let声明的变量，只能在当前作用域下声明一次，否则会抛出SyntaxError；而使用var，可以在同一作用域下重复声明，并且不会抛出错误，而后面的声明会覆盖前面的声明。

let a = 1;
let a = 2;    // 报错：SyntaxError: Identifier 'a' has already been declared

var b = 1;
var b = 2;    // 不会报错

示例

1. 使用var声明的变量，在全局作用域下声明一个age，再在一个函数中重新声明一个age。

// 全局作用域
var age = 28;

function getAge() {
  // 函数作用域
  var age = 18;
  console.log(age);  // 输出：18
}

getAge();

console.log(age);    // 输出：28

从输出可以看出，虽然在函数中声明了一个同名变量，但是不影响全局作用域下age的值，即age变量生效的范围仅限于当前函数。

1. 使用let声明的变量，在块级作用域内声明一个num，在块级作用域外声明一个num。

{
  let num = 1;
  console.log(num);   // 输出：1
}
let num = 2;
console.log(num);     // 输出：2

从输出可以看出，let声明的变量num的作用域仅限于块级作用域内，而在块级作用域外声明的同名变量，不会受到块内声明变量的影响，而是单独生效。