var?let?const關(guān)鍵字之間的區(qū)別及使用場景示例詳解
背景
在寫js和ts代碼的時候，經(jīng)常會用到var、let、const關(guān)鍵字，雖然一直用，但是從來沒有去仔細研究他們之間的區(qū)別，偶爾遇到的使用的問題，就直接換了另一個關(guān)鍵字，其中最明顯的就是我使用const沒有進行初始化發(fā)現(xiàn)不行，就直接換成使用let就可以了，這篇文章就是為了研究其他之間的區(qū)別
一、var變量
1、var在全局作用域的應(yīng)用，使用var關(guān)鍵字聲明的變量，都會被提升到該作用域的最頂部，這就是我們常說的變量提升
console.log(a); //undefind var a = 1； console.log(a); //1
等同于
var a; console.log(a); //undefined a = 1; console.log(a); //1
全局變量
在函數(shù)外聲明的變量作用域是全局的：
var carName = "Volvo";
function person(){
console.log(carName); // "Volvo"
}
person();局部變量
在函數(shù)內(nèi)聲明的變量作用域是局部的（函數(shù)內(nèi)）：
function person() {
var carName = "Volvo";
console.log(carName); // "Volvo"
}
person();
console.log(carName); //報錯 Uncaught ReferenceError: a is not defined使用 var 關(guān)鍵字在塊級作用域存在的問題
var a = 10;
console.log(a); // 10
{
var a = 2;
console.log(a); // 2
}
console.log(a); // 2重置變量
使用 var 關(guān)鍵字聲明的變量在任何地方都可以修改：
var x = 2; console.log(x); // 2 var x = 3; console.log(x); // 3
二、塊級作用域let、const
let、const聲明和var聲明用法一樣，不同點在于let、var聲明的是變量，const聲明的是常量。var存在變量提升，let、const不存在變量提升。var在全局作用域聲明的變量會掛載在window對象上
1、let 聲明
let聲明的是變量，沒有var那樣的變量提升，let聲明的變量只在當前作用域中有效
全局變量
console.log(x);//報錯 Unexpected identifier 'Uncaught' let x = 1; console.log(x)；// 1
塊級作用域
let 中不存在變量提升
{
console.log(x); //報錯 Unexpected identifier 'Uncaught'
let x = 1;
console.log(x);
}重置變量
在相同的作用域或塊級作用域中，不能let關(guān)鍵字來重置 var 關(guān)鍵字聲明
var x = 2; // 合法
let x = 3; // 不合法
{
var x = 4; // 合法
let x = 5 // 不合法
}在相同的作用域或塊級作用域中
let x = 2; // 合法
let x = 3; // 不合法
{
let x = 4; // 合法
let x = 5; // 不合法
}let 關(guān)鍵字在不同作用域，可以重新申明和賦值
let x = 2; // 合法
{
let x = 3; // 合法
}
{
let x = 4; // 合法
}2、const 聲明
const聲明的是常量，常量不可以修改。常量定義必須初始化值，如果不初始化值就會報錯。
全局變量
{
console.log(x); //報錯 Unexpected identifier 'Uncaught'
const x = 1;
console.log(x); // 1
}局部變量
{
const x = 1;
console.log(x); //1;
}
console.log(x)// 報錯 Unexpected identifier 'Uncaught'必須初始化，不能重新賦值
const x; console.log(x);// Uncaught SyntaxError: Missing initializer in const declaration const x = 10; x = 20; // 報錯，const 變量不可重新賦值
對象和數(shù)組，對于引用類型（對象和數(shù)組），const 保證的是變量引用的地址不變，但對象或數(shù)組本身是可以修改的。
const x = [1, 2, 3]; x.push(4); // 合法，數(shù)組本身可以修改 x = [5, 6, 7]; // 報錯，變量引用地址不可變
總結(jié)
let、var聲明的是變量，const聲明的是常量。var存在變量提升，let、const不存在變量提升。var在全局作用域聲明的變量會掛載在window對象上，而let const聲明的變量則不會有這一行為。let聲明的是變量，沒有var那樣的變量提升，let聲明的變量只在當前作用域中有效，const聲明的是常量，常量不可以修改。常量定義必須初始化值，如果不初始化值就會報錯。
以上就是var let const關(guān)鍵字之間的區(qū)別及使用場景示例詳解的詳細內(nèi)容，更多關(guān)于var let const關(guān)鍵字的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript中CommonJS 與 ES Modules的區(qū)別
本文主要介紹了JavaScript中CommonJS 與 ES Modules的區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2026-03-03
解決微信小程序調(diào)用moveToLocation失效問題【超簡單】
這篇文章主要介紹了解決微信小程序調(diào)用moveToLocation失效問題，解決方法超級簡單,需要的朋友可以參考下2019-04-04
今天小編就為大家分享一篇layui radio性別單選框賦值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
js實現(xiàn)樹形數(shù)據(jù)轉(zhuǎn)成扁平數(shù)據(jù)的方法示例
這篇文章主要介紹了js實現(xiàn)樹形數(shù)據(jù)轉(zhuǎn)成扁平數(shù)據(jù)的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
文章介紹了如何使用scrollIntoViewIfNeeded方法將元素滾動到可見區(qū)域,以及如何通過配置對象控制滾動行為,還提供了一個純JavaScript的解決方案,可以實現(xiàn)類似的功能2024-12-12
這篇文章主要介紹了js實現(xiàn)全選反選不選功能，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
js實現(xiàn)Select頭像選擇實時預(yù)覽代碼
這篇文章主要介紹了js實現(xiàn)Select頭像選擇實時預(yù)覽代碼,涉及javascript動態(tài)遍歷及設(shè)置select選項的技巧,非常簡單實用,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了javascript前端實現(xiàn)多視頻上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)特效留言框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
在開發(fā)移動應(yīng)用程序時,我們經(jīng)常需要處理用戶交互事件,然而,有時候這些事件會冒泡,導(dǎo)致意外的行為和不良用戶體驗,在本文中,我們將探討如何使用UniApp框架來阻止事件冒泡,并提供一些示例代碼來幫助您理解如何實現(xiàn)這一功能,需要的朋友可以參考下2023-11-11