JavaScript中的變量怎么用？這篇文章運(yùn)用了實(shí)例代碼展示，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。
理解變量
變量是用于存儲(chǔ)值的命名容器。我們可能多次引用的一條信息可以存儲(chǔ)在一個(gè)變量中，供以后使用或修改。在JavaScript中，變量中包含的值可以是任何JavaScript數(shù)據(jù)類型，包括數(shù)字、字符串或?qū)ο蟆?/p>
在今天的JavaScript所基于的ECMAScript 2015 (ES6)語言規(guī)范之前，只有一種方法來聲明變量——使用var關(guān)鍵字。因此，大多數(shù)較老的代碼和學(xué)習(xí)資源將只對(duì)變量使用var。我們將在下面單獨(dú)一節(jié)討論var、let和const關(guān)鍵字之間的區(qū)別。
我們可以使用var來演示變量本身的概念。在下面的示例中，我們將聲明一個(gè)變量，并為其賦值。
// Assign the string value Sammy to the username identifier var username = "sammy_shark";
本聲明由以下幾部分組成:
使用var關(guān)鍵字聲明變量
變量名(或標(biāo)識(shí)符)，用戶名
賦值操作，由=語法表示
分配的值“sammy_shark”
現(xiàn)在我們可以在代碼中使用username。JavaScript將記住username表示字符串值sammy_shark。
重慶分公司
重慶分公司
// Check if variable is equal to value
if (username === "sammy_shark") {
console.log(true);
}輸出：
true
如前所述，變量可以用來表示任何JavaScript數(shù)據(jù)類型。在本例中，我們將使用字符串、數(shù)字、對(duì)象、布爾值和null值聲明變量。
// Assignment of various variables
var name = "Sammy";
var spartans = 300;
var kingdoms = [ "mammals", "birds", "fish" ];
var poem = { roses: "red", violets: "blue" };
var success = true;
var nothing = null;使用console.log，我們可以看到特定變量中包含的值。
// Send spartans variable to the console console.log(spartans);
輸出：300
變量將數(shù)據(jù)存儲(chǔ)在內(nèi)存中，稍后可以訪問和修改這些數(shù)據(jù)。變量也可以重新分配，并給定一個(gè)新值。下面的簡化示例演示了如何將密碼存儲(chǔ)到變量中，然后進(jìn)行更新。
//為password變量賦值 var password = "hunter2"; //用一個(gè)新值重新分配變量值 password = "hunter3"; console.log(password);
輸出：
'hunter3'
在實(shí)際的程序中，密碼很可能安全地存儲(chǔ)在數(shù)據(jù)庫中。然而，這個(gè)例子說明了一種情況，在這種情況下，我們可能需要更新變量的值。password的值是hunter2，但是我們將其重新分配給了hunter3，這是JavaScript從那時(shí)起可以識(shí)別的值。
命名變量
變量名在JavaScript中稱為標(biāo)識(shí)符。我們討論了在理解JavaScript語法和代碼結(jié)構(gòu)時(shí)命名標(biāo)識(shí)符的一些規(guī)則，總結(jié)如下:
變量名只能由字母(a-z)、數(shù)字(0-9)、美元符號(hào)($)和下劃線(_)組成
變量名不能包含任何空白字符(制表符或空格)
數(shù)字不能是任何變量的名稱開頭
保留的關(guān)鍵字不能用作變量的名稱
變量名區(qū)分大小寫
JavaScript還習(xí)慣在使用var或let聲明的函數(shù)和變量的名稱中使用駝峰大小寫(有時(shí)作為駝峰大小寫進(jìn)行樣式化)。這是一種將第一個(gè)單詞小寫，然后將后面每個(gè)單詞的第一個(gè)字母大寫，中間沒有空格的做法。除了一些例外，大多數(shù)非常量的變量都遵循這種約定。使用const關(guān)鍵字聲明的常量變量的名稱通常都是大寫的。
這可能看起來像要學(xué)習(xí)很多規(guī)則，但很快就會(huì)成為編寫有效和常規(guī)變量名稱的第二天性。
var、let和const之間的區(qū)別
JavaScript有三個(gè)不同的關(guān)鍵字來聲明變量，這給語言增加了額外的復(fù)雜性。三者之間的區(qū)別是基于范圍、提升和重新分配。
| 關(guān)鍵字 | 范圍 | 變量提升 | 可以重新分配 | 可以重新定義 |
|---|---|---|---|---|
| var | 功能范圍 | Yes | Yes | Yes |
| let | 阻止范圍 | No | Yes | No |
| const | 阻止范圍 | No | No | No |
您可能想知道應(yīng)該在自己的程序中使用這三種方法中的哪一種。一個(gè)普遍接受的做法是盡可能多地使用const，并在循環(huán)和重新分配的情況下使用let。通常，在處理遺留代碼之外可以避免var。
變量作用域
JavaScript中的作用域是指代碼的當(dāng)前上下文，它決定了變量對(duì)JavaScript的可訪問性。范圍的兩種類型是局部的和全局的:
全局變量是在塊之外聲明的變量
局部變量是在塊內(nèi)聲明的變量
在下面的示例中，我們將創(chuàng)建一個(gè)全局變量。
//初始化一個(gè)全局變量 var creature = "wolf";
我們知道變量可以重新分配。使用局部作用域，我們實(shí)際上可以創(chuàng)建與外部作用域中的變量同名的新變量，而無需更改或重新分配原始值。
在下面的示例中，我們將創(chuàng)建一個(gè)全局species變量。函數(shù)內(nèi)部是一個(gè)具有相同名稱的局部變量。通過將它們發(fā)送到控制臺(tái)，我們可以看到變量的值如何根據(jù)范圍而不同，并且原始值不會(huì)更改。
//初始化一個(gè)全局變量
var species = "human";
function transform() {
//初始化一個(gè)局部的、函數(shù)作用域的變量
var species = "werewolf";
console.log(species);
}
//記錄全局和局部變量
console.log(species);
transform();
console.log(species);輸出：
human werewolf human
在本例中，局部變量是函數(shù)作用域的。使用var關(guān)鍵字聲明的變量總是函數(shù)作用域，這意味著它們將函數(shù)識(shí)別為具有獨(dú)立作用域。因此，這個(gè)局部作用域的變量不能從全局作用域訪問。
然而，新的關(guān)鍵字let和const是塊范圍的。這意味著從任何類型的塊(包括函數(shù)塊、if語句、for和while循環(huán))創(chuàng)建一個(gè)新的本地范圍。
為了說明函數(shù)作用域變量和塊作用域變量之間的區(qū)別，我們將使用let在if塊中分配一個(gè)新變量。
var fullMoon = true;
//初始化一個(gè)全局變量
let species = "human";
if (fullMoon) {
//初始化一個(gè)塊范圍的變量
let species = "werewolf";
console.log(`It is a full moon. Lupin is currently a ${species}.`);
}
console.log(`It is not a full moon. Lupin is currently a ${species}.`);輸出：
It is a full moon. Lupin is currently a werewolf. It is not a full moon. Lupin is currently a human.
在此示例中，species變量具有一個(gè)值global（human），另一個(gè)值local（werewolf）。var但是，如果我們使用，則會(huì)有不同的結(jié)果。
//使用var初始化一個(gè)變量
var species = "human";
if (fullMoon) {
//嘗試在一個(gè)塊中創(chuàng)建一個(gè)新變量
var species = "werewolf";
console.log(`It is a full moon. Lupin is currently a ${species}.`);
}
console.log(`It is not a full moon. Lupin is currently a ${species}.`);輸出：
It is a full moon. Lupin is currently a werewolf. It is not a full moon. Lupin is currently a werewolf.
在這個(gè)例子的結(jié)果中，全局變量和塊范圍的變量都以相同的值結(jié)束。這是因?yàn)槟皇鞘褂胿ar創(chuàng)建一個(gè)新的本地變量，而是在相同的范圍內(nèi)重新分配相同的變量。var不能識(shí)別是否屬于不同的新范圍。通常建議聲明塊范圍的變量，因?yàn)樗鼈兩傻拇a不太可能無意中覆蓋變量值。
變量提升
到目前為止，在大多數(shù)示例中，我們已經(jīng)使用var聲明了一個(gè)變量，并使用一個(gè)值初始化了它。在聲明和初始化之后，我們可以訪問或重新分配變量。
如果我們?cè)噲D在變量被聲明和初始化之前使用它，它將返回undefined。
//在聲明變量之前嘗試使用它 console.log(x); / /變量賦值 var x = 100;
輸出：
undefined
但是，如果省略var關(guān)鍵字，就不再聲明變量，而是初始化它。它將返回一個(gè)ReferenceError并停止腳本的執(zhí)行。
//在聲明變量之前嘗試使用它 console.log(x); //沒有var的變量賦值 x = 100;
輸出：
ReferenceError: x is not defined
原因在于提升，這是JavaScript的一種行為，其中變量和函數(shù)聲明被移到它們作用域的頂部。由于只掛起實(shí)際聲明，而沒有初始化，因此第一個(gè)示例中的值返回未定義的值。
為了更清楚地演示這個(gè)概念，下面是我們編寫的代碼以及JavaScript如何解釋它。
// The code we wrote console.log(x); var x = 100; // How JavaScript interpreted it var x; console.log(x); x = 100;
JavaScript在執(zhí)行腳本之前將x保存為內(nèi)存作為變量。 由于它在定義之前仍然被調(diào)用，因此結(jié)果是未定義的而不是100.但是，它不會(huì)導(dǎo)致ReferenceError并停止腳本。
盡管var關(guān)鍵字實(shí)際上并未更改var的位置，但這有助于表示提升的工作原理。 但是，這種行為可能會(huì)導(dǎo)致問題，因?yàn)榫帉懘舜a的程序員可能希望x的輸出為true，而不是undefined。
在下一個(gè)例子中，我們還可以看到提升是如何導(dǎo)致不可預(yù)測(cè)的結(jié)果的:
//在全局范圍內(nèi)初始化x
var x = 100;
function hoist() {
//不應(yīng)影響編碼結(jié)果的條件
if (false) {
var x = 200;
}
console.log(x);
}
hoist();輸出：
undefined
在本例中，我們聲明x全局為100。根據(jù)if語句，x可以更改為200，但是由于條件為false，所以它不應(yīng)該影響x的值。
這種不可預(yù)測(cè)的行為可能會(huì)在程序中引起bug。由于let和const是塊范圍的，所以它們不會(huì)以這種方式提升，如下所示。
//在全局范圍內(nèi)初始化x
let x = true;function hoist() {
//在函數(shù)作用域中初始化x
if (3 === 4) {
let x = false;
}
console.log(x);
}
hoist();輸出：
true
變量的重復(fù)聲明(這在var中是可能的)將在let和const中拋出一個(gè)錯(cuò)誤。
//試圖覆蓋用var聲明的變量 var x = 1; var x = 2; console.log(x);
輸出：2
//試圖覆蓋用let聲明的變量 let y = 1; let y = 2; console.log(y);
輸出：
Uncaught SyntaxError: Identifier 'y' has already been declared
總之，使用var引入的變量有可能受到提升的影響，提升是JavaScript中的一種機(jī)制，其中變量聲明被保存到內(nèi)存中。這可能導(dǎo)致代碼中出現(xiàn)未定義的變量。let和const的引入解決了這個(gè)問題，它在試圖在聲明變量之前使用該變量或多次聲明該變量時(shí)拋出一個(gè)錯(cuò)誤。
常量
許多編程語言都有常量，這些常量是不能修改或更改的值。在JavaScript中，const標(biāo)識(shí)符是根據(jù)常量建模的，不能重新分配分配給const的值。
將所有const標(biāo)識(shí)符都寫成大寫是常見的約定。這將它們與其他變量值區(qū)分開來。
在下面的示例中，我們使用const關(guān)鍵字將變量SPECIES初始化為常量。試圖重新分配變量將導(dǎo)致錯(cuò)誤。
//給const賦值 const SPECIES = "human"; //嘗試重新分配值 SPECIES = "werewolf"; console.log(SPECIES);
輸出：
Uncaught TypeError: Assignment to constant variable.
因?yàn)椴荒苤匦路峙鋍onst值，所以需要同時(shí)聲明和初始化它們，否則也會(huì)拋出錯(cuò)誤。
//聲明，但不初始化const const TODO; console.log(TODO);
輸出：
Uncaught SyntaxError: Missing initializer in const declaration
不能在編程中更改的值稱為不可變值，而可以更改的值是可變的。雖然const值不能重新分配，但是它們是可變的，因?yàn)榭梢孕薷挠胏onst聲明的對(duì)象的屬性。
//創(chuàng)建一個(gè)具有兩個(gè)屬性的CAR對(duì)象
const CAR = {
color: "blue",
price: 15000}
//修改CAR的屬性
CAR.price = 20000;
console.log(CAR);輸出：
{ color: 'blue', price: 20000 }常量非常有用，可以讓將來的自己和其他程序員清楚地認(rèn)識(shí)到，不應(yīng)該重新分配預(yù)期的變量。如果您希望將來修改某個(gè)變量，那么您可能希望使用let來聲明該變量。
到此為止, 關(guān)于JavaScript中的變量有了一個(gè)基礎(chǔ)的認(rèn)識(shí), 但是對(duì)于具體的使用方法還是需要多加鞏固和練習(xí)，如果想了解更多相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊。
