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

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

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

什么是JavaScript變量？

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

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

圖1

JavaScript變量的使用

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

1.聲明變量

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

var age;   //聲明一個(gè)名稱為age的變量

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

2.變量賦值

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

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

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

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

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

3.變量的初始化

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

var age = 18;		//聲明變量同時(shí)賦值為18

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

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

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

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

<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行的值為字符串類型的值，需要使用單引號(hào)包裹;第4行的值為數(shù)字型的值,也就是一個(gè)普通的數(shù)字。

使用myName作為變量名，而不是使用name，這是因?yàn)槿肿饔糜蛳露x的變量會(huì)自動(dòng)注冊(cè)為window對(duì)象的屬性。window對(duì)象的屬性還有self、top、location、status等，這些都不推薦作為全局變量名使用。

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

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

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

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

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

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

1. 更新變量的值

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

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

2. 同時(shí)聲明多個(gè)變量

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

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

3.聲明變量的特殊情況

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

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

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

console.log(age);

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

錯(cuò)誤提示

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

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

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

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

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

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

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

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

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

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

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

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

在JavaScript中，關(guān)鍵字分為“保留關(guān)鍵字”和“未來(lái)保留關(guān)鍵字”。保留關(guān)鍵字是指在JavaScript語(yǔ)言中被事先定義好并賦予特殊含義的單詞，不能作為變量名使用。下面我們列舉一些常見的保留關(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)鍵字中，每個(gè)關(guān)鍵字都有特殊的作用。例如，var關(guān)鍵字用于定義變量,typeof關(guān)鍵字用于判斷給定數(shù)據(jù)的類型，function關(guān)鍵字用于定義一個(gè)函數(shù)。

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

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

enum	implements	package	public
interface	private	static	let
protected

標(biāo)識(shí)符

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

JavaScript交換兩個(gè)變量的值

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

交換思想

在圖3中，我們可以想象成左手(applel)拿著青蘋果，右手(apple2) 拿著紅蘋果，眼前有一張桌子(temp)。為了將左手的青蘋果和右手的紅蘋果交換，就先把左手的青蘋果放在桌子上，然后右手把紅蘋果給左手，最后右手再?gòu)淖雷由夏闷鹎嗵O果，這樣就完成了交換。

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

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

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