var、let、const在声明变量时有什么区别？

声明变量的关键词有三个：var、let、const。这三个有什么区别呢？好多人傻傻分不清楚。今天，就给大家详细的说一下。

let和const是2015年才被引入的两个关键词，之前声明变量只有var。

所以，let和const在var的基础上做了很多功能上的修改。比如，我们上篇文章讲JS提升的时候就提到了，let和const声明的变量是不会被提升的。相比较var，let和const更严谨了；在JS作用域中，我们也提到了，var声明的变量没有块作用域，可以使用let声明变量使其拥有块作用域，这样看来，let比var更安全了。

除了上面说的两点区别以外，它们三个还有以下区别：

重复声明

var是可以重复声明的，不管在任何位置。比如：

var a = 1;
var a = 2;

在相同的作用域，或在相同的块中，let是不允许重新声明的。

通过 let 重新声明一个 var 变量或者let变量是不允许的。
通过 var 重新声明一个 let 变量也是不允许的。

比如：

var x = 10;  // 允许
let x = 6;   // 不允许

let y = 20;  //允许
let y = 30; //不允许

let z = 2; //允许
var z = 3; //不允许

{
  var x = 10;   // 允许
  let x = 6;   // 不允许

  let y = 20;  //允许
  let y = 30; //不允许

  let z = 2; //允许
  var z = 3; //不允许
}

在不同的作用域或块中，通过 let 重新声明变量是允许的。比如：

let x = 6;       // 允许

{
  let x = 7;   // 允许
}

{
  let x = 8;   // 允许
}

在循环作用域里，let和var的作用也是不一样的。比如：

<p id="demo"></p>
<p id="test"></p>

<script>
var i = 5;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
document.getElementById("demo").innerHTML = i; //i的值为10

let a = 5;
for (let a = 0; a < 10; a++) {
  // 一些语句
}
document.getElementById("test").innerHTML = a; //i的值为5
</script>

再来说下const。const我更倾向于把它理解为是用来声明常量的，但是，它又可以修改。怎么回事呢？具体来说一下。

const和let很类似，像上面重复声明的问题，let的情况const也同样适用。但是，const变量必须在声明时赋值并且变量不能重新赋值，比如：

const a;
a = 1;

//这种写法会报错

const a = 10;
a = 20; //报错

如果我们给const变量赋值的是数值、字符串、布尔值这几种数据类型，我们是不能更改变量的值。但是，如果赋值的数据类型是对象或者数组的话，我们是可以更改对象属性或者数组元素的，但是，仍然不能给变量重新赋值新的对象或者数组。比如：

const person = {name:"刘小妞", work:"code"};

// 可以更改属性：
person.name = "刘小小";

// 可以添加属性：
person.like = "food";

person = {name:"刘小小", work:"code"};//报错

const person = ['刘小妞','刘小小'];

//修改元素
person[0] = '刘小二';

//添加元素
person.push('刘小');

person = ['刘小二','刘小小']; //报错

看完文章希望能解决一些对var、let、const的疑惑，如果想看更多的前端知识文章，欢迎微信搜索公众号：“刘小妞的栖息地”或者识别下面的二维码查看，感谢大家的支持。