JavaScript 中 var 、let、const区别

问题

var 、 let、 const 都可以用来声明变量，那么它们的区别是什么？

思考思路

• 变量的数据类型（数字，字符串，数组 and so on)
• 变量的作用域 ( 全局 or 局部 or 某个代码）

• 声明后变量的数据类型有什么不同？
• 声明后变量的作用域有什么不同？

区别探索之路

数据类型

// 声明数字有何不同
var n1 = 10;
let n2 = 10;
const n3 = 10;
console.log(typeof n1);   // number
console.log(typeof n2);   // number
console.log(typeof n3);    // number

// 声明字符串有何不同
var s1 = "hello";
let s2 = "hello";
const s3 = "hell0";
console.log(typeof s1);  //string
console.log(typeof s2);  // string
console.log(typeof s3);   // string

and so on.

// 声明后不设置初始值有何不同
var u1;
let u2;
const u3;     // 报错，const声明变量必须设置初始值
console.log(typeof u1);     // undefined
console.log(typeof u2);     // undefined
console.log(typeof u1);     // wrong 

• var 和 let 可以声明后不设置初始值，但 const 不行

作用域

• var声明的变量是在函数外声明是全局变量，在函数内声明是局部变量，只能在函数内使用

var a = 1;
f();
console.log(a);      // 1
function f(){
	consloe.log(a);    // undefined
	var a = 10;
	console.log(a);    // 10
}

example

<script>
	for(var i = 0; i < 5; i ++){
		console.log(i)
	}
	{
		var i =1;
	}
	console.log(i)
</script>

// 输出结果 0 1 2 3 4 5
// 输出结果 1

• let的作用域仅限于块级作用域

{	
	let i = 1;
}
console.log(i);     // ReferenceError: i is noe defined

网上搜的一道面试题

for(var i = 0; i < 10; i ++){
	setTimeout(function(){
		console.log(i);
		}, 0)
}

// 输出结果   10 个 10

for(ley i = 0; i < 10; i ++){
	setTimeout(function(){
		console.log(i);
		}, 0)
}

// 输出结果 0 1 2 3 4 5 6 7 8 9

念经书

ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

let的另一个区别是不能重复声明。

const意为constant variable，也就是固定的变量，不能被重新赋值，且需要在初始化时给其指定值，要不然会报错

总结

• var 定义的变量是全局变量，可以修改，可以重复定义，不初始化会输出 undefined
• let 定义的变量仅作用与 块级作用域（不受外界影响），可以修改，但不能重复定义，不初始化会输出 undefined
• const 定义的变量是全局变量，不能修改，不能重复定义，不初始化会报错

上周问题回答

_wqh：

window.addEventListener('load',function (){
	console.log(a);
	var a = 1;
});

// 输出  undefined

window.addEventListener('load',function (){
	console.log(a);
	let a = 1;
});

//  wrong