var、const、let 的區別

陳田田發表於2018-12-14

定義變數的三種方式

var、const、let 都可以用來定義變數，但三者之間存在區別。

var

  • var 宣告變數的時候無需初始化。
  • var 宣告的變數可在後面進行修改。
  • var 宣告的全域性變數可以被函式修改。
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	var a;
	console.log('定義a變數，此時沒有初始化，a的值為：',a);

	a = 1;
	console.log('修改a的值，此時a的值為：',a);

	function chageVarA () {
		a = 2;
		console.log('在函式裡面修改a的值，此時a的值為：',a);
	}
	chageVarA();

	console.log('在函式執行後，全域性變數a的值為：',a);
</script>
</body>
</html>
複製程式碼

執行的結果為：

在這裡插入圖片描述

const

  • const 宣告變數時必須初始化。
  • const 宣告的變數不能被修改。
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	const a;
	console.log(a);
</script>
</body>
</html>
複製程式碼

執行的結果為：

在這裡插入圖片描述

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	const a = 1;
	console.log('初始化a變數，此時a的值為：',a);

	a = 2;
	console.log('修改a的值，此時a的值為：',a)
</script>
</body>
</html>
複製程式碼

執行的結果為：

在這裡插入圖片描述

let

  • let 是塊級作用域。
  • 在函式內部使用let後，對函式外部的變數無影響。
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	var a = 1;
	console.log('初始化變數a，此時a的值為：',a);

	function changeLet(){
		let a = 2;
		console.log('執行變數修改函式，在函式內容a的值為：',a);
	}
	changeLet();

	console.log('執行變數修改函式後，全域性變數a的值為：',a);
</script>
</body>
</html>
複製程式碼

執行的結果為：

在這裡插入圖片描述

相關文章