首頁技術(shù)文章正文

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

更新時間:2021年09月10日11時51分來源:傳智教育瀏覽次數(shù):

什么是JavaScript變量？

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

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

圖1

JavaScript變量的使用

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

1.聲明變量

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

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

使用var關(guān)鍵字聲明變量后，計(jì)算機(jī)會自動為變量分配內(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)可以輸出變量的值，結(jié)果為18。

JavaScript變量的應(yīng)用案例

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，這是因?yàn)槿肿饔糜蛳露x的變量會自動注冊為window對象的屬性。window對象的屬性還有self、top、location、status等，這些都不推薦作為全局變量名使用。

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

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

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

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

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

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

1. 更新變量的值

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

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

2. 同時聲明多個變量

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

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

3.聲明變量的特殊情況

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

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

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

console.log(age);

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

錯誤提示

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

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

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

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

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

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

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

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

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

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

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

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

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

ECMAScript中的保留關(guān)鍵字

break	case	catch	class
const	continue	debugger	default
delete	do	else	export
extends	finally	for	function
if	import	in	instanceof
new	return	super	switch
this	throw	try	typeof
var	void	while	with
yield

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

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

未來保留關(guān)鍵字

enum	implements	package	public
interface	private	static	let
protected

標(biāo)識符

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

JavaScript交換兩個變量的值

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

交換思想

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

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

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

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