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

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

let、const聲明的變量僅在塊級(jí)作用域內(nèi)有效，var 聲明變量是全局的，沒有塊級(jí)作用域功能
let 、const 不存在變量提升 , var 存在變量
let 、const不能在同一塊級(jí)作用域內(nèi)重復(fù)申請(qǐng)
用let定義變量，運(yùn)行代碼如下：

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

1
2
3
4
5

以上報(bào)錯(cuò)i未定義，說明let定義變量i，只在所在的塊作用域內(nèi)起作用

var 定義變量，運(yùn)行代碼如下：

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

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

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

1
2
3
4
5
6

很明顯在函數(shù)外輸出變量i的時(shí)候，報(bào)i未定義，var在函數(shù)內(nèi)命名的變量是只在整個(gè)函數(shù)作用域內(nèi)起作用

let不像var那樣會(huì)發(fā)生“變量提升”現(xiàn)象。所以，變量一定要在聲明后使用，否則報(bào)錯(cuò)。
運(yùn)行代碼如下：

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

1
2
3
4

變量arg1用var命令聲明，會(huì)發(fā)生變量提升，即腳本開始運(yùn)行時(shí)，變量arg1已經(jīng)存在了，但是沒有值，所以會(huì)輸出undefined。變量arg2用let命令聲明，不會(huì)發(fā)生變量提升。這表示在聲明它之前，變量arg2是不存在的，這時(shí)如果用到它，就會(huì)拋出一個(gè)錯(cuò)誤。

var 重復(fù)申明變量的運(yùn)行結(jié)果：

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

1
2
3
4

let 重復(fù)聲明變量代碼

let arg2 = ‘test’
console.log(‘let第一次申明：’ + arg2)
let arg2 = ‘test2’
console.log(‘let第二次申明：’ + arg2)
1
2
3
4

let在同一塊作用域內(nèi)不能重復(fù)聲明變量，var 可以重復(fù)聲明

const
const與let上面特點(diǎn)一樣，但是也有不同點(diǎn)，let聲明的是變量，const聲明的是常量，只讀，修改值會(huì)報(bào)錯(cuò)，const保存的是內(nèi)存地址,可以給對(duì)象或數(shù)組添加屬性或元素，但是不能重新復(fù)寫。
————————————————
版權(quán)聲明：本文為CSDN博主「前端嵐楓」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/lfcss/article/details/103869080

總結(jié)

以上是生活随笔為你收集整理的轻松弄懂var、let、const之间的区别（一看就懂）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。