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);
	}
}

var、let和const的区别

var、let和const的区别

相关推荐