JavaScript变量声明var,let,const及区别浅析

在JavaScript中，我们可以使用 var，let 和 const 关键字来声明变量，但这些关键字的用法和区别是比较容易混淆的。本文将对这三种关键字进行详细讲解。

var

在ES6之前，JavaScript中只有 var 这一个声明变量的关键字。var 关键字声明的变量作用域是函数级别的。

function example1() {
  var foo = 'hello';

  if (true) {
    var foo = 'world';
    console.log(foo);//"world"
  }
  console.log(foo);//"world"
}

example1();

在上面的例子中，即使变量 foo 在 if 语句块中已经定义过了，但由于 var 关键字声明的变量作用域是函数级别的，导致我们在函数内部的任何地方都可以访问到 foo 变量，所以在函数内部两次打印 foo 全部都是 "world"。

使用 var 声明的变量，我们还可以重复声明，这种行为虽然是不推荐的，但毕竟语言本身允许，所以需要多加注意。

function example2() {
  var foo = 'hello';
  var foo = 'world';

  console.log(foo);//"world";
}

example2();

let

在ES6中，引入了一个新的关键字 let ，它声明的变量也是块级作用域的。

function example3() {
  let foo = 'hello';

  if (true) {
    let foo = 'world';
    console.log(foo);//"world"
  }

  console.log(foo);//"hello"
}

example3();

在上面的例子中，变量 foo 只在 if 语句块中被声明，在 if 语句块外部无法访问到。

另外，使用 let 声明的变量不能重复声明，重复声明会导致语法错误。

function example4() {
  let foo = 'hello';
  let foo = 'world';//Uncaught SyntaxError: Identifier 'foo' has already been declared
}

const

const 也是在ES6中新增的一个关键字，它用于声明常量，常量也是块级作用域的，只能在定义时赋值，之后不能再修改它的值。

function example5() {
  const foo = 'hello';

  if (true) {
    const foo = 'world';
    console.log(foo);//"world"
  }

  console.log(foo);//"hello"
}

example5();

在上面的例子中，和 let 一样，变量 foo 只在 if 语句块中被声明，在 if 语句块外部无法访问到。而且由于 const 声明的常量不能再修改它的值，故再次赋值会导致语法错误。

function example6() {
  const foo = 'hello';

  foo = 'world';//Uncaught TypeError: Assignment to constant variable.
}

区别浅析

在实际开发中，尤其是开发大型应用时，对于变量的使用需要细心考虑。下面是它们的一些区别：

1. let 和 const 声明的变量作用域为块级，而 var 声明的变量作用域为函数级别的，这会导致在需要访问变量的时候，let 和 const 会产生更多的垃圾数据，内存的消耗要更加大；

2. let 声明的变量可以被修改，const 声明的常量不可被修改；

3. 在同一个作用域内，var 声明的变量可以重复声明，let 和 const 声明的变量不能重复声明。

在实际开发中，应该遵循合适的使用场景和最佳实践，选择合适的变量声明方式。比如：使用 let 或 const 可以防止变量声明提升带来的认知困难，也可以防止在代码中因为变量重名而导致的问题，但在需要使用全局变量时，可以使用 var 进行声明。

示例

下面我们通过一个实际的例子演示 var 和 let 在作用域上的区别：

function example7() {
  for (var i = 0; i < 5; i++) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  }
}

example7();

在此例中，我们尝试使用闭包把变量 i 私有化。但是结果并不符合预期。

这是因为 var 声明的变量作用域为函数级别的，而 setTimeout 异步函数是在 for 循环结束后才开始执行的，而此时 i 的值是 5，因此我们看到的输出结果是 5 5 5 5 5。

接下来我们尝试改用 let 关键字进行声明。

function example8() {
  for (let i = 0; i < 5; i++) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  }
}

example8();

在这个例子中，我们使用 let 声明变量 i，它的作用域是块级作用域，因此 i 的值在每个循环中都被重新声明，而 setInterval 异步函数会在每次循环中都重新执行，因此我们看到的输出结果是 0 1 2 3 4。

总的来说，使用 let 和 const 更容易让我们写出比较优美、更健壮的代码，但使用 var 也是可行的。需要根据实际的情况进行抉择。