javascript的var與let,const之間的區(qū)別詳解

更新時間：2022年01月03日 11:33:00 作者：庸人°

這篇文章主要為大家介紹了?javascript的var與let,const之間的區(qū)別，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

作為全局變量時

在ES5中，頂層對象的屬性和全局變量是等價的，用var聲明的變量既是全局變量，也是頂層變量的屬性

但是ES6中用let聲明的變量可以在全局訪問到，但是并沒有在頂層變量的屬性上，const聲明的常量同樣也不會在頂層變量上

請?zhí)砑訄D片描述

變量提升

var聲明的變量存在變量提升，及變量可以在聲明之前調(diào)用，值為undefined

let和const不存在變量提升，即它們所聲明的變量一定要在聲明后使用，否則會報錯

console.log(a)  // undefinedvar a = 1console.log(b)  // Cannot access 'b' before initializationlet b = 2console.log(c)  // Cannot access 'c' before initializationconst c = 3console.log(a)  // undefined
var a = 1

console.log(b)  // Cannot access 'b' before initialization
let b = 2

console.log(c)  // Cannot access 'c' before initialization
const c = 3

暫時性死區(qū)

var不存在暫時性死區(qū)

let和const存在暫時性死區(qū)，只有等到聲明變量的那一行代碼被執(zhí)行后，才可以獲取和使用該變量

其實這一點就是有上一點變量提升延伸而來的區(qū)別。因為var聲明的變量存在變量提升，在聲明之前使用該變量值為undefined，不會報錯，所有沒有暫時性死區(qū)。let、const在該作用域開始前后，變量或常量聲明之前使用會報錯，這一塊區(qū)域也就被稱為暫時性死區(qū)

例同上文：

console.log(a)  // undefined
var a = 1

console.log(b)  // Cannot access 'b' before initialization
let b = 2

console.log(c)  // Cannot access 'c' before initialization
const c = 3

塊級作用域

var不存在塊級作用域

let和const存在塊級作用域

{    var a = 2}console.log(a)  // 2{    let b = 2}console.log(b)  // Uncaught ReferenceError: b is not defined{    const c = 2}console.log(c)  // Uncaught ReferenceError: c is not defined

重復聲明

var在相同作用域下允許重復聲明，后面聲明的變量會覆蓋前面的變量聲明

let、const在相同作用域下不允許重復聲明

var a = 10
var a = 20 // 20

let b = 10
let b = 20 // Identifier 'b' has already been declared

const c = 10
const c = 20 // Identifier 'c' has already been declared

修改聲明的變量（常量與變量聲明）

var和let聲明的是變量，聲明后的變量可被修改

const聲明得失常量，只讀。一旦聲明，常量的值就不能改變。但是需要注意的是，對于引用數(shù)據(jù)類型，JavaScript中的變量或者常量存儲的是該數(shù)據(jù)的存儲地址，只要不直接修改該常量的引用，修改其指向的對象的屬性是可以的。

var a = 10
a = 20
console.log(a)  // 20

let b = 10
b = 20
console.log(b)  // 20

const c = 10
c = 20 // Uncaught TypeError: Assignment to constant variable

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內(nèi)容!

您可能感興趣的文章:

JS array數(shù)組檢測方式解析
這篇文章主要介紹了JS array數(shù)組檢測方式解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-05-05
AngularJS+Bootstrap實現(xiàn)多文件上傳與管理
這篇文章主要為大家詳細介紹了AngularJS+Bootstrap實現(xiàn)多文件上傳與管理，對上傳文件進行加載與刪除操作,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
js最簡單的雙向綁定實例講解
下面小編就為大家分享一篇js最簡單的雙向綁定實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
Javascript中Fetch請求Coze API并流式展示請求結(jié)果
文章介紹了如何使用Fetch API處理CozeAPI返回的流式響應,并在前端進行實時展示,文章提供了處理流式響應的步驟和示例代碼,包括使用fetch發(fā)起POST請求、讀取響應體流、逐步處理數(shù)據(jù)塊以及更新UI,感興趣的朋友一起看看吧
2025-02-02
用于table內(nèi)容排序
用于table內(nèi)容排序...
2006-07-07
JSP中使用JavaScript動態(tài)插入刪除輸入框?qū)崿F(xiàn)代碼
這篇文章主要介紹了JSP中如何使用JavaScript動態(tài)插入刪除輸入框,需要的朋友可以參考下
2014-06-06
ElementUI中Tree組件使用案例講解
這篇文章主要介紹了ElementUI中Tree組件使用案例講解,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
big.js快速上手指南(最全最詳細)
big.js是一個用于任意精度十進制算術的小型、快速的JavaScript庫,它適用于所有瀏覽器,并且支持ECMAScript 3,這篇文章主要介紹了big.js快速上手指南的相關資料,需要的朋友可以參考下
2025-07-07
js實現(xiàn)3D旋轉(zhuǎn)效果
這篇文章主要為大家詳細介紹了js實現(xiàn)3D旋轉(zhuǎn)效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
JSON.stringify()方法講解
今天小編就為大家分享一篇關于JSON.stringify()方法講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-01-01