目錄
聲明變數關鍵字var、let和const
1.var關鍵字
1.1.var宣告作用域
1.2.var宣告提升
2 .let聲明
2.1.暫時性死區
2.2.全域宣告
2.3.條件宣告
2.4.for迴圈中的let宣告
3 .const宣告
4.使用建议
4.1.不使用var
4.2.const优先,let次之
首頁 web前端 js教程 javascript用哪個關鍵字宣告變數

javascript用哪個關鍵字宣告變數

Jun 09, 2021 pm 03:07 PM
javascript

在js中,可以使用var、let和const關鍵字宣告。 var宣告的變數可以用來保存任何類型的值,範圍是函數作用域;let宣告的變數在{}中使用,變數的作用域限制在區塊級域中;const用於修飾常數,宣告位置不限。

javascript用哪個關鍵字宣告變數

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

聲明變數關鍵字var、let和const

ECMAScript變數是鬆散類型的,即變數可以用於保存任何類型的數據,每個變數只不過是一個用於保存任意值的命名佔位符。

1.var關鍵字

    var宣告的變數可以用來保存任何類型的值(在不初始化的情況下會保存一個特殊值undefined),像其他語言一樣在javascript在定義變數的同時還可以對變數進行賦值,該變數被定義為保存所賦值的值的變量,因為javascript是動態語言,在初始化變數的時候不會將它標識為所賦值的資料類型,只是一個簡單的賦值而已。隨後不僅可以改變已儲存的值,還可以改變值的類型:

var message = "hi";
	message = 100;
登入後複製

1.1.var宣告作用域

    使用var運算子定義的變數會成為包含它的函數的局部變量。例如,使用var在函數內部定義一個變量,就意味著這該變量將在函數退出時被銷毀,我覺得這就是所說的垃圾回收:

function test( ) {
		vart message = "hi";	//局部变量
	}
test( );
console.log(message);	//报错!
登入後複製

    函數調用之後變量會隨機被銷毀,因此最後一行會報錯。不過,在函數定義變數時省略var運算子時可以建立一個全域變數:

function test( )  {
	message = "hi";	//全局变量
}
test( );
console.log(message);	//"hi"
登入後複製

    只要呼叫一次函數test( )就會定義message這一全域變量,並且可以在函數外部存取。但是由於在局部作用域中定義的全域變數很難維護,所以一般不建議這樣做。

1.2.var宣告提升

    使用var關鍵字宣告的變數會自動提升函數作用域頂部,即所謂的「提升」(hoist),也就是把所有變數宣告都拉到函數作用域的頂端:

function fool( ) {
	console.log(age);
	var age = 28;
}
fool( );	//undefined
登入後複製

    這裡是不會報錯的,而是顯示undefined,ECMAScript在運作是會把它看成等價於如下的程式碼:

function fool( ) {
	var age;
	console.log(age);
	age = 28;
}
fool( );	//undefined
登入後複製

2 .let聲明

    let跟var的作用差不多,但有著非常重要的差異。最明顯的差異在於let宣告的範圍是區塊作用域,而var宣告的範圍是函數作用域:

if (true) {
	let age = 26;
	console.log(age);	//26
}
console.log(age);	//ReferceError:age没有定义
登入後複製

    age變數的作用域僅限於該區塊內部,所以不能在if區塊外部被引用。塊作用域是函數作用域的子集,所以適用於var的作用域限制也同樣適用於let。

    let也不允許在同一塊作用域中出現冗餘宣告(var可以):

var name;
var name;
let age;
let age;	//SyntaxError;标识符age已经声明过了
登入後複製

    另外,對宣告冗餘封包不會因混用var和let而受影響。這兩個關鍵字聲明的並不是不同類型的變量,他們只是指出變數在相關作用域如何存在。

2.1.暫時性死區

    let與var的另一個重要差異是let宣告的變數不會在作用域中被提升:

//name会提升
console.log(name);	//undefined
var name = 'matt';

//name不会提升
console.log(name);	//ReferenceError:name没有定义
let name = 'matt';
登入後複製

2.2.全域宣告

    與var不同,使用let在全域作用域中宣告的變數不會成為window物件的屬性(var宣告的變數則會):

var name = 'matt';
console.log(window.name);	//'matt'

let name = 'matt';
console.log(window.name);	//undefined
登入後複製

    不過,let宣告仍然是在全域作用域中發生的,對應變數會在頁面的宣告週期記憶體續。

2.3.條件宣告

    let的作用域是區塊,所以不可能檢查前面是否已經使用let宣告過同名變量,同時也就不可能在沒有宣告的情況下宣告它。使用try/catch或typeof運算子也不能解決,因為條件區塊中let宣告的作用域僅限於該區塊。為此,對於let這個新的ES6聲明關鍵字不能依賴條件聲明模式。

2.4.for迴圈中的let宣告

    在使用var的時候,最常見的問題就是迭代變數的奇特宣告與修改:

for(var i = 0; i < 5; ++i) {
	setTimeout( () => console.log(i) ,0)
}
//你可能以为会输出0、1、2、3、4
//实际上输出的是5、5、5、5、5
登入後複製

    在退出循環的時候迭代變數保存的是導致循環退出的值:5。之後執行setTimeout逾時邏輯時,所以i都是同一個變量,因而最終輸出的都是同一個值。

    使用let宣告迭代變數時,JavaScript引擎在後台會為每個迭代循環宣告一個新的迭代變量,每個setTimeout所引用的都是不同的變數實例:

for(let i = 0; i < 5; ++i) {
	setTimeout( () => console.log(i) ,0)
}
//会输出0、1、2、3、4
登入後複製

3 .const宣告

    const的行為基本上與let相同,唯一重要差異在於它宣告變數時必須同時初始化變量,且嘗試修改const宣告的變數會導致運算錯誤。

const声明的限制只适用于它指向的变量的引用。如果const变量引用的是一个对象,那么修改这个对象内部的属性并不违反const的限制:

const person = { };
person.name = &#39;matt&#39;;
登入後複製

4.使用建议

let和const是ES6中新增的,从客观上为JavaScript更精确地声明作用域和语义提供更好的支持。

4.1.不使用var

    限制自己只使用let和const有助于提升代码质量,因为变量有了明确的作用域、声明位置,以及不变的值。

4.2.const优先,let次之

    使用const声明可以让浏览器运行时强制保持变量不变,也可以让静态代码分析工具提前发现不合法的赋值操作。因此,我们应该优先使用const来声明变量,只有在提前知道未来会有修改时再使用let。

【推荐学习:javascript高级教程

以上是javascript用哪個關鍵字宣告變數的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

javascript如何使用insertBefore javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

JavaScript與WebSocket:打造高效率的即時影像處理系統 JavaScript與WebSocket:打造高效率的即時影像處理系統 Dec 17, 2023 am 08:41 AM

JavaScript是一種廣泛應用於Web開發的程式語言,而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能,我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統,並提供具體的程式碼範例。首先,我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備,可以擷取即時的影像數

See all articles