輕松弄懂var、let、const之間的區別

ECMAScript 6（簡稱ES6）是JavaScript語言的下一代標准，於2015年6月正式發布，也稱ECMAScript 2015。

ES6的好處

ES6的出現為我們前端帶來了很多方便之處，以前用js幾十行才實現的一個功能，ES6幾行代碼就能簡單的實現，ES6新增的一些特性，改變了很多弊端之處，比如新出現的let、const，實現了塊級作用域功能，減少了以前var的全局變量，箭頭函數代替詞法作用域的"this" 等等，在這里就不再做更多的舉例子，想了解更多請參考 https://www.w3cschool.cn/ecmascript/pgms1q5d.html，今天主要跟大家一起了解一下var、let、const之間的區別

let

let是ES6新增的命令，用來聲明變量，跟var聲明變量一樣。但是它倆有很大的區別。

• let、const聲明的變量僅在塊級作用域內有效，var 聲明變量是全局的，沒有塊級作用域功能
• let 、const 不存在變量提升 , var 存在變量
• let 、const不能在同一塊級作用域內重復申請

用let定義變量，運行代碼如下：

	const arr = [1, 2, 3, 4]
  	for (let i = 0; i < arr.length; i++) {
  	console.log(arr[i])
  	}
		console.log(i);

以上報錯i未定義，說明let定義變量i，只在所在的塊作用域內起作用

var 定義變量，運行代碼如下：

var arr = [1, 2, 3, 4]
  	for (var i = 0; i < arr.length; i++) {
			console.log(arr[i])
		}
		console.log(i);

以上運行結果說明，var 定義變量 沒有塊級作用域，i在塊級作用域照樣可以輸出結果
其實var在函數內命名的變量是只在整個函數作用域內起作用，出了這個函數作用域就不能用了，例如下面

	function testVar () {
			var i = 2
			console.log('函數內:' + i)
		}
		testVar()
		console.log('函數外:' + i)

很明顯在函數外輸出變量i的時候，報i未定義，var在函數內命名的變量是只在整個函數作用域內起作用

let不像var那樣會發生“變量提升”現象。所以，變量一定要在聲明后使用，否則報錯。
運行代碼如下：

	console.log(arg1)
	console.log(arg2)
	var arg1 = 'test'
	let arg2 = 'test2'

變量arg1用var命令聲明，會發生變量提升，即腳本開始運行時，變量arg1已經存在了，但是沒有值，所以會輸出undefined。變量arg2用let命令聲明，不會發生變量提升。這表示在聲明它之前，變量arg2是不存在的，這時如果用到它，就會拋出一個錯誤。

var 重復申明變量的運行結果：

	var arg1 = 'test'
		console.log('var第一次申明：' + arg1)
		var arg1 = 'test2'
		console.log('var第二次申明：' + arg1)

let 重復聲明變量代碼

let  arg2 = 'test'
console.log('let第一次申明：' + arg2)
let  arg2 = 'test2'
console.log('let第二次申明：' + arg2)

let在同一塊作用域內不能重復聲明變量，var 可以重復聲明

const

const與let上面特點一樣，但是也有不同點，let聲明的是變量，const聲明的是常量，只讀，修改值會報錯，const保存的是內存地址,可以給對象或數組添加屬性或元素，但是不能重新復寫。
想要了解更多，請掃描二維碼