JS變量教程：JavaScript中變量的用法詳解

什么是JavaScript變量？

變量是程序在內(nèi)存中申請的一塊用來存放數(shù)據(jù)的空間。例如，程序在內(nèi)存中保存字符串“小明”和“小張”，如圖1所示。在圖1中，我們可以將內(nèi)存想象成一個酒店，當需要人住酒店時，就需要在酒店里預訂一個房間。由于酒店里有大量的房間，為了準確地找到某一個房間， 需要給每個房間分配一個房間號。

同樣地，內(nèi)存中的每個變量需要進行命名，才可以找到某一個變量，因此，圖1中的兩個變量分別被命名為pl和p2。

圖1

JavaScript變量的使用

變量在使用時分為兩步，分別是“聲明變量”和“賦值”。這兩步可以分開進行，也可以同時進行。下 面我們進行詳細講解。

1.聲明變量

JavaScript中變量通常使用var關鍵字聲明，示例代碼如下。

var age;   //聲明一個名稱為age的變量

使用var關鍵字聲明變量后，計算機會自動為變量分配內(nèi)存空間。age是自定義的變量名，通過變量名就可以訪問變量在內(nèi)存中分配的空間。

2.變量賦值

變量聲明出來后，是沒有值的，所以接下來就要為它賦值，示例代碼如下。

var age;	//聲明變量
age = 10;	//為變量賦值

上述代碼在變量聲明后，將10這個值存人age變量中。其中，等號“=”并不是相等的意思，而是把等號右邊的10賦值給左邊的變量age。

在為變量賦值以后，可以用輸出語句輸出變量的值，示例代碼如下。

alert(age);	//使用alert()警告框輸出age的值
console.log(age);	//將age的值輸出到控制臺中

3.變量的初始化

聲明一個變量并為其賦值,這個過程就是變量的初始化,示例代碼如下。

var age = 18;		//聲明變量同時賦值為18

在將變量初始化后，使用console.log(age)可以輸出變量的值，結果為18。

JavaScript變量的應用案例

1.使用變量保存?zhèn)€人信息

使用變量可以保存各種各樣的數(shù)據(jù)，例如，保存一個人的個人信息，具體代碼如下。

<script>
    var myName = '小明';        //名稱
    var address = 'XX市XX區(qū)';   //住址
    var age = 18;               //年齡
    var email = 'xiaoming@loaclhost';   //電子郵箱
    console.log(myName);        //輸出myName的值
    console.log(address);       //輸出address的值
    console.log(age);           //輸出age的值
    console.log(email);         //輸出email的值
</script>

在上述代碼中，第2、3、5行的值為字符串類型的值，需要使用單引號包裹;第4行的值為數(shù)字型的值,也就是一個普通的數(shù)字。

使用myName作為變量名，而不是使用name，這是因為全局作用域下定義的變量會自動注冊為window對象的屬性。window對象的屬性還有self、top、location、status等，這些都不推薦作為全局變量名使用。

2、使用變量保存用戶輸入的值

在前面的小節(jié)中我們講過了使用prompt(彈出一個輸入框，提示用戶輸人內(nèi)容。當用戶輸入內(nèi)容(值)以后,使用變量就可以將值保存下來,具體代碼如下。

<script>
	var myName = prompt('請輸入您的名字');
	alert(myName);
</script>

在上述代碼中，第2行的myName變量用于接收用戶在輸人框中輸入的值，然后在第3行將用戶輸入的值顯示出來。

JavaScript變量的語法細節(jié)

在使用變量時,還有一些值得注意的語法細節(jié),下面進行詳細講解。

1. 更新變量的值

一個變量重新賦值后，它原有的值就會被覆蓋，示例代碼如下。

var myName = '小明';
console.log(myName);    //輸出結果:小明
myName ='小紅';			//更新變量的值
console.log(myName);	//輸出結果:小紅

2. 同時聲明多個變量

在var關鍵字后面可以同時聲明多個變量，多個變量名之間使用英文逗號隔開，示例代碼如下。

//同時聲明多個變量,不賦值
var myName,age,email;
//同時聲明多個變量,并賦值
var myName ='小明',
	age = 18,
	email = 'xiaoming@localhost';

3.聲明變量的特殊情況

(1)只聲明變量,但不賦值,則輸出變量時,結果為undefined，示例代碼如下。

var age;p
console.log(age);	//輸出結果:undefined

(2)不聲明變量,直接輸出變量的值,則程序會出錯,示例代碼如下。

console.log(age);

上述代碼執(zhí)行后，在控制臺中會看到下圖所示的錯誤提示。

錯誤提示

如果前一行代碼出錯，則后面的代碼不會執(zhí)行。因此，在開發(fā)中，如果代碼沒有按照期望的執(zhí)行，可以打開控制臺看一下是否有錯誤提示，找到具體是哪一行代碼出錯了。

(3)不聲明變量,只進行賦值，示例代碼如下。

age1 = 10;		//變量age1沒有使用var進行聲明
console.log(age1);		//輸出結果:10

從輸出結果可以看出，直接賦值一個未聲明的變量，也可以正確輸出變量的值。這個消況是JavaScript語言的特性。

JavaScript變量的命名規(guī)范

在對變量進行命名時,需要遵循變量的命名規(guī)范，從而避免代碼出錯，以及提高代碼的可讀性，具體如下。

(1)由字母、數(shù)字、下劃線和美元符號($)組成，如age、num。

(2)嚴格區(qū)分大小寫，如app和App是兩個變量。

(3)不能以數(shù)字開頭，如18age是錯誤的變量名。

(4)不能是關鍵字、保留字，如var、for、while等是錯誤的變量名。

(5)要盡量做到“見其名知其意”，如age表示年齡，num表示數(shù)字。

(6)建議遵循駝峰命名法，首字母小寫,后面的單詞首字母大寫，如 myFirstName。

在JavaScript中，關鍵字分為“保留關鍵字”和“未來保留關鍵字”。保留關鍵字是指在JavaScript語言中被事先定義好并賦予特殊含義的單詞，不能作為變量名使用。下面我們列舉一些常見的保留關鍵字，如下表1所示。

ECMAScript中的保留關鍵字

表1列舉的關鍵字中，每個關鍵字都有特殊的作用。例如，var關鍵字用于定義變量,typeof關鍵字用于判斷給定數(shù)據(jù)的類型，function關鍵字用于定義一個函數(shù)。

未來保留關鍵字是指ECMAScript規(guī)范中預留的關鍵字，目前它們沒有特殊功能，但是在未來的某個時間可能會加上。具體如表2所示。

未來保留關鍵字

標識符

在JavaScript中還有一個標識符的概念。標識符是指開發(fā)人員為變量、函數(shù)取的名字。例如，變量名age就是一個標識符。從語法上來說，不能使用關鍵字作為標識符，否則會出現(xiàn)語法錯誤。

JavaScript交換兩個變量的值

在學習了變量的使用后，下面我們通過一個案例來練習變量的使用。本案例將會實現(xiàn)交換兩個變量的值。先定義兩個變量applel和apple2,值分別為“青蘋果”和“紅蘋果”，然后借助第3個變量temp來保存臨時數(shù)據(jù)，實現(xiàn)青蘋果和紅蘋果的交換，其思路如圖3所示。

交換思想

在圖3中，我們可以想象成左手(applel)拿著青蘋果，右手(apple2) 拿著紅蘋果，眼前有一張桌子(temp)。為了將左手的青蘋果和右手的紅蘋果交換，就先把左手的青蘋果放在桌子上，然后右手把紅蘋果給左手，最后右手再從桌子上拿起青蘋果，這樣就完成了交換。

下面我們開始編寫代碼完成案例的要求，具體如下。

var temp;
var applel = '青蘋果';
var apple2 = '紅蘋果';
temp = applel;
applel = apple2;
apple2 = temp;
console.log(apple1);	//輸出結果:紅蘋果
console.log(apple2);	//輸出結果:青蘋果

在上述代碼中，第4~6行用于完成apple1和apple2兩個變量的交換。

加QQ：435946716獲取Javascript全套視頻教程+筆記+源碼。

猜你喜歡：

Javascript 3種書寫格式詳細介紹

5款常用JavaScript開發(fā)工具推薦

JavaScript的組成部分包括哪些？

JavaScript是什么意思?JavaScript和Java有什關系？

傳智教育HTML&JS+前端課程