var、let和const的区别

在JavaScript中有三种声明变量的方式：var、let、const。下文给大家介绍js中三种定义变量的方式const， var， let的区别。

1.const定义的变量不可以修改，而且必须初始化。

const b = 2;//正确
// const b;//错误，必须初始化 
console.log('函数外const定义b：' + b);//有输出值
// b = 5;
// console.log('函数外修改const定义b：' + b);//无法输出

2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

var a = 1;
// var a;//不会报错
console.log('函数外var定义a：' + a);//可以输出a=1
function change(){
a = 4;
console.log('函数内var定义a：' + a);//可以输出a=4
} 
change();
console.log('函数调用后var定义a为函数内部修改值：' + a);//可以输出a=4

3.let是块级作用域，函数内部使用let定义后，对函数外部无影响。

let c = 3;
console.log('函数外let定义c：' + c);//输出c=3
function change(){
let c = 6;
console.log('函数内let定义c：' + c);//输出c=6
} 
change();
console.log('函数调用后let定义c不受函数内部定义影响：' + c);//输出c=3

var、let和const的区别

let和const是ES6新增的关键字，如果还不知道ES6的小伙伴们，建议好好去了解下。

区别1

let和var用来声明变量，const用来声明常量。

变量就是赋值后可以改变它的值，常量就是赋值后就不能改变它的值。

区别2

const不允许只声明不赋值，一旦声明就必须赋值

错误的写法

const num;

正确的写法

const num = 4;

区别3

var是函数作用域，let和const是块级作用域。

花括号{}就是块级作用域，函数作用域就是函数里面的内容。

对比这两段代码

{
    let num = 4;
}
console.log(num);// num is not defined
{
    var num = 4;
}
console.log(num); // 4

区别4

var有提升的功能，let和const没有

console.log(a);  //undefined
var a = 4;
console.log(a); //a is not defined
let a = 4;

区别5

在最外层的作用域，也就是全局作用域，用var声明的变量，会作为window的一个属性

var a = 4;
function foo(){
	var b = 5;
	console.log("b=>"+b) // 5
	console.log("window.b=>"+window.b) // undefined
	console.log("window.a=>"+window.a) // 4
}

foo()
console.log("a=>"+a) // 4
console.log("window.a=>"+window.a) // 4
console.log("window.b=>"+window.b) // undefined

而用let和const声明的变量或常量，并不会作为window的属性

对比下面两段段代码

var a = 4;
function foo(){
	/*
	这里的this采用默认的规则，与window进行了绑定，所以实际上访问的是window.a
	*/
	console.log(this.a);// 4  
}

foo()
let a = 4;
function foo(){
	/*
	在这种情况下，this.a 访问的是window.a，但是let定义的变量，并不会作为window的属性，所以访问不到
	*/
	console.log(this.a);// undefined  
}

foo()

最后来看下比较经典的错误代码

<button>按钮0</button>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
let btns = document.getElementsByTagName('button');
for(var i = 0; i<btns.length; ++i){
	btns[i].onclick = function(){
		console.log(btns[i].innerText);  // 点击按钮，报错
	}
}

从上面的js代码应该可以看清我的意思，我想点击每个按钮，然后输出其文本，点击按钮0的按钮就输出按钮0

代码看上去是貌似是正确的，但其实是错误的，因为变量i它相当于共用的，当代码运行完后，i就变成了5，我们虽然绑定生效了，确实将点击事件都绑定到了每个按钮，但是，当点击事件，执行这行代码时，有个严重的问题。

console.log(btns[i].innerText);  // 此时此刻，这个i已经是5了，这很明显数组越界了，所以报错了

//将上面的代码改成下面这段代码
console.log(i); // 5，点击任何一个按钮都是输出5

所以在循环中，我们可以用let声明循环的变量，避免这种错误，这样每个循环的变量i，就都是独立的个体。

let btns = document.getElementsByTagName('button');
for(let i = 0; i<btns.length; ++i){
	btns[i].onclick = function(){
		console.log(btns[i].innerText);
	}
}

一、let、const、var的区别

（1）块级作用域：块作用域由 { }包括，let和const具有块级作用域，var不存在块级作用域。块级作用域解决了ES5中的两个问题：
内层变量可能覆盖外层变量
用来计数的循环变量泄露为全局变量

（2）变量提升： var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否在会报错。

（3）给全局添加属性：浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let和const不会。

（4）重复声明： var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的遍历。const和let不允许重复声明变量。

（5）暂时性死区：在使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。使用var声明的变量不存在暂时性死区。

（6）初始值设置：在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。

（7）指针指向： let和const都是ES6新增的用于创建变量的语法。 let创建的变量是可以更改指针指向（可以重新赋值）。但const声明的变量是不允许改变指针的指向。

区别	var	let	const
是否有块级作用域	×	✔️	✔️
是否存在变量提升	✔️	×	×
是否添加全局属性	✔️	×	×
能否重复声明变量	✔️	×	×
是否存在暂时性死区	×	✔️	✔️
是否必须设置初始值	×	×	✔️
能否改变指针指向	✔️	✔️	×

二、const对象的属性可以修改吗

const保证的并不是变量的值不能改动，而是变量指向的那个内存地址不能改动。对于基本类型的数据（数值、字符串、布尔值），其值就保存在变量指向的那个内存地址，因此等同于常量。
但对于引用类型的数据（主要是对象和数组）来说，变量指向数据的内存地址，保存的只是一个指针，const只能保证这个指针是固定不变的，至于它指向的数据结构是不是可变的，就完全不能控制了。