ECMAScript声明变量讲解(var let const)

ECMAScript声明变量讲解

ECMAScript 声明变量有三种方式：var,let,const。需注意IE8不支持let,const声明，var 适用所有版本。

前言

一、var 关键字讲解

1.var 初步使用

var 声明变量

	<script>
		/*
		*1.使用var 声明变量,可以保存任意数据类型的值，
		* Undefined、Null、Number、String、Symbol、Boolean、Object 7种类型
		*2.在同一代码块位置：
		* var userName; userName="marshal" 
		* var userName="marshal"  是完全等价有效的
		* var 可以以逗号分隔，定义多个变量,分号结束
		* var userName,userAge,userAddress;
		*/
		var userName="marshal";//var userName;userName="marshal";
		console.log(userName);
	</script>

用开发者工具查看如下图：

2.var 作用域说明

作用域：在运行时，代码区域中变量、对象、函数及其他资源访问的可见性。JavaScript分为两种类型，全局和局部。与Script 标签同级，可理解为全局，在浏览器中这些称为windows对象，所以使用var 定义的全局变量、函数都是window对象的属性和方法。局部是定义在｛｝花括号内，如函数内部，定义在局部作用域，一般来说函数外部是不能访问的，但可以通过闭包方式去解决(后续再讲)。

	<script>
		/* 
		* 1.定义函数localVariable
		* 2.在函数内部使用var 声明变量userName,并设置值为marshal
		* 
		*/
		function localVariable(){
			var userName="marshal";
			console.log("函数内部访问"+userName);//输出函数内部访问marshal
		}
		localVariable();
		console.log("函数外部访问"+userName);  //报错:UncaughtReferenceError: userName is not defined
		
	</script>

函数localVariable()调用后，内函数内部使用var 声明的变量、对象随之销毁，所以报错：UncaughtReferenceError: userName is not defined

如果在函数内部将var 省略，则为全局变量，示例代码如下：

	<script>
		/* 
		* 1.定义函数localVariable
		* 2.在函数内部省去var关键字
		* 3.注不建议省去var 关键字,局部的全局变量很难维护，容易埋坑
		*/
		function localVariable(){
			userName="marshal";
			console.log("函数内部访问"+userName);
		}
		localVariable();//函数调用后，userName变为全局变量，可使用window对象访问。
		console.log("函数外部访问"+window.userName);
		
	</script>

3.var 声明提升

先看示例：

	<script>
		/* 
		* 1.定义函数localVariable
		* 2.先使用变量userName
		* 3.再声明变量及设置值
		*/
		function localVariable(){
			console.log("函数内部访问"+userName);
		    var userName ="marshal";
		}
		localVariable();//运行正常，输出函数内部访问undefined		
	</script>

原因，在ECMAScript运行时，等价如下代码：

function localVariable(){
			var userName;
			console.log("函数内部访问"+userName);
		    userName ="marshal";
		}
		localVariable();//运行正常，输出函数内部访问undefined		

var 声明提升，就是把所有变量声明都拉到函数作用域的顶部先创建执行。

一、let 关键字讲解

let 也可以用声明变量，使用方式与var 差不多，但几点区别，需了解。

1.let 初步使用

	<script>
		/*
		*1.使用let 声明变量,可以保存任意数据类型的值，
		* Undefined、Null、Number、String、Symbol、Boolean、Object 7种类型
		*2.在同一代码块位置：
		* let userName; userName="marshal" 
		* let userName="marshal"  是完全等价有效的
		*/
		function localVariable(){
		    let userName ="marshal";
			console.log("函数内部访问"+userName);
		}
	    let userAge;
		userAge=30;
		console.log(userAge);
		localVariable();//运行正常，输出函数内部访问undefined
	</script>

运行结果：
30
函数内部访问marshal

2.let 与var 声明范围不同

var 声明的范围是函数作用域，而let声明的范围是块作用域，示例代码如下：

<script>
		if(8/2){
			var userName ="marshal";
			console.log(userName);//marshal
		}
		console.log(userName);//marshal
		
		if(8/2){
			let age =30;
			console.log(age);//30
		}
		console.log(age);//UncaughtReferenceError: age is not defined
	</script>

原因let 声明的作用域仅限于所在该块内部

3.let 不能重复声明同一个变量

	<script>
		/*
		*1.var 可以重复声明同一个变量,最后一个变量值覆盖前面的值
		*2.let 不可以重复声明同一个变量
		*
		*/
	    var book="javaScript";
	    var book="springBoot";
	    console.log(book);//输出 springBoot
	   
	    let city="广州";
		let city="上海";
		console.log(city);//Uncaught SyntaxError: Identifier 'city' has already been declared		
	</script>

4.let 不能在作用域提升

	<script>
		function localVariable(){
				console.log("函数内部访问"+userName);
				let book ="springBoot";
			}
		console.log(book);//运行报错，UncaughtReferenceError: age is not defined	
	</script>

在执行上下文时，let声明之前的执行片刻被称为“暂时性死区”，在这前不能以任何方式来引用未声明的变量。

5.let 不能成为windows对象属性

	<script>
		/*
		*1.var 在全局作用域声明可以window对象引用
		*2.let 声明不会成为window对象属性，结果为undefined
		*
		*/
		let book="springBoot";
		console.log(window.book);//运行正常，结果为undefined	
	</script>

6.for循环区别

	<script>
		/*
		*1.var 在全局作用域声明可以window对象引用
		*2.let 声明不会成为window对象属性，结果为undefined
		*
		*/
		for(var i=0;i<10;i++){
			
		}
		console.log(i);//输出结果:10
		
		for(let j=0;j<10;j++){
			
		}
		console.log(j);//运行报错UncaughtReferenceError: j is not defined
	</script>
	<script>
		    for(let i=0;i<3;i++){
				setTimeout(()=>console.log(i),0);//0,1,2
			}
			for(var i=0;i<5;i++){
				setTimeout(()=>console.log(i),0); //5 5 5 5 5
			}
	</script>

let javascript引擎在后台为每次迭代循环声明一个新的迭代变量，而使用var关键字，退出循环时，迭代变量保存的是循环退出的值。

三、const关键字讲解

const 与let 基本相同，唯一不同的是const声明时必须要初始化变量，并且修改const变量会导致运行时错误 。

	<script>
		const book="springBoot";
		console.log(book);//springBoot
		const city;
		city="上海";
		console.log(city);//Uncaught SyntaxError: Missing initializer in const declaration
	</script>

四、总结

1. 如果是常量，不用修改变量值，优先使用const关键字声明
2. 如果是IE9之后的浏览器优先使用let关键字
3. 如果需支持IE8 浏览器使用var关键字
4. 使用变量养成先声明再使用的好习惯,可减少维护成本