javascrip基础：var，let和const区别在哪里

2019-10-18

虽然小编我主要工作时后端框架搭建，但空闲时候也经常捣鼓前端的东西，下面就分享一下入门基础知识，老鸟略过，废话也不多话，上代码之前先上概念，先理论后再实践是我一贯的学习之道。

var

var定义的变量可被更改，如果不初始化而直接使用也不会报错

let定义的变量和var类似，但作用域在当前声明的范围内

const定义的变量只可初始化一次且作用域内不可被更改，使用前必须初始化

下面通过一些例子来为大家介绍如何在JAVAscript中灵活使用var、let和const这些关键字来定义变量，以及这些关键字它们之间有什么区别。

var用以声明一个变量，并且同时我们可以在声明语句中初始化所声明的变量。

例如：

var a = 10;

考虑以下代码片段：

function nodeSimplified() {
 var a =10;
 console.log(a); // 输出 10
 if(true) {
 var a=20;
 console.log(a); // 输出 20
 }
 console.log(a); // 输出 20
}

在上面的代码中，你可以发现，当变量a在if代码段里被更新时，它的值被全局更新了，因此在经过了if代码后，被更新的值仍然被保留着。这与其他语言中的全局变量有点类似。但是，在使用这个功能时要非常小心，因为它有可能会覆盖一个已有的值。

let语句在一个块级范围里声明一个局部变量。和var类似，我们可以在声明时初始化它的值。

例如：

let a = 10;

考虑下面的代码片段：

function myFun() {
 let a =10;
 console.log(a); //输出 10
 if(true) {
 let a=20;
 console.log(a); //输出 20
 }
 console.log(a); // 输出 10
}

它和大多数语言中我们所见的表现行为是一致的。

function myFun() {
 let a =10;
 let a =20; // 抛出语法错误
 console.log(a); 
}

错误信息:"未捕获的异常:标识符'a'已经被声明过。",这个C#这类后端编程方式非常类似。

但如果使用var就没事：

function myFun() { 
 var a =10; 
 var a =20; 
 console.log(a); // 输出 20 
}

使用let语句，可以很好的维护变量的作用范围。当使用内部函数时，let语句让你的代码更整洁。

上面的例子应该能好好的帮你理解var和 let的区别了吧。

const语言中的变量只能被赋值一次，然后就不能在被赋值。const语句的作用范围和let语句一样。

例如：
function myFun() {
 const a =10;
 console.log(a); // 输出 10 
}

问题:如果给一个const变量重新赋值会发生什么？考虑下面的代码：

function myFun() {
 const a =10;
 console.log(a); // 输出 10
 a =20; // 抛出类型错误
 console.log(a); 
}

当我们尝试给已有的const变量赋值时，这段代码会抛出一个错误:"未捕获的类型错误:给const变量赋值"。

介绍就到此结束，希望这篇文章能够帮助到各位更好的理解在Javascript中声明变量，时使用不同关键字时的区别。