JavaScript中的變量怎么用

JavaScript中的變量怎么用？這篇文章運(yùn)用了實(shí)例代碼展示，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

理解變量

變量是用于存儲(chǔ)值的命名容器。我們可能多次引用的一條信息可以存儲(chǔ)在一個(gè)變量中，供以后使用或修改。在JavaScript中，變量中包含的值可以是任何JavaScript數(shù)據(jù)類型，包括數(shù)字、字符串或?qū)ο蟆?/p>

在今天的JavaScript所基于的ECMAScript 2015 (ES6)語(yǔ)言規(guī)范之前，只有一種方法來(lái)聲明變量——使用var關(guān)鍵字。因此，大多數(shù)較老的代碼和學(xué)習(xí)資源將只對(duì)變量使用var。我們將在下面單獨(dú)一節(jié)討論var、let和const關(guān)鍵字之間的區(qū)別。

我們可以使用var來(lái)演示變量本身的概念。在下面的示例中，我們將聲明一個(gè)變量，并為其賦值。

// Assign the string value Sammy to the username identifier
var username = "sammy_shark";

本聲明由以下幾部分組成:

• 使用var關(guān)鍵字聲明變量

• 變量名(或標(biāo)識(shí)符)，用戶名

• 賦值操作，由=語(yǔ)法表示

• 分配的值“sammy_shark”

現(xiàn)在我們可以在代碼中使用username。JavaScript將記住username表示字符串值sammy_shark。

// Check if variable is equal to value
if (username === "sammy_shark") {
  console.log(true);
  }

輸出：

true

如前所述，變量可以用來(lái)表示任何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)存中，稍后可以訪問(wèn)和修改這些數(shù)據(jù)。變量也可以重新分配，并給定一個(gè)新值。下面的簡(jiǎn)化示例演示了如何將密碼存儲(chǔ)到變量中，然后進(jìn)行更新。

//為password變量賦值
var password = "hunter2";
//用一個(gè)新值重新分配變量值
password = "hunter3";
console.log(password);

輸出：

'hunter3'

在實(shí)際的程序中，密碼很可能安全地存儲(chǔ)在數(shù)據(jù)庫(kù)中。然而，這個(gè)例子說(shuō)明了一種情況，在這種情況下，我們可能需要更新變量的值。password的值是hunter2，但是我們將其重新分配給了hunter3，這是JavaScript從那時(shí)起可以識(shí)別的值。

命名變量

變量名在JavaScript中稱為標(biāo)識(shí)符。我們討論了在理解JavaScript語(yǔ)法和代碼結(jié)構(gòu)時(shí)命名標(biāo)識(shí)符的一些規(guī)則，總結(jié)如下:

• 變量名只能由字母(a-z)、數(shù)字(0-9)、美元符號(hào)($)和下劃線(_)組成

• 變量名不能包含任何空白字符(制表符或空格)

• 數(shù)字不能是任何變量的名稱開(kāi)頭

• 保留的關(guān)鍵字不能用作變量的名稱

• 變量名區(qū)分大小寫(xiě)

JavaScript還習(xí)慣在使用var或let聲明的函數(shù)和變量的名稱中使用駝峰大小寫(xiě)(有時(shí)作為駝峰大小寫(xiě)進(jìn)行樣式化)。這是一種將第一個(gè)單詞小寫(xiě)，然后將后面每個(gè)單詞的第一個(gè)字母大寫(xiě)，中間沒(méi)有空格的做法。除了一些例外，大多數(shù)非常量的變量都遵循這種約定。使用const關(guān)鍵字聲明的常量變量的名稱通常都是大寫(xiě)的。

這可能看起來(lái)像要學(xué)習(xí)很多規(guī)則，但很快就會(huì)成為編寫(xiě)有效和常規(guī)變量名稱的第二天性。

var、let和const之間的區(qū)別

JavaScript有三個(gè)不同的關(guān)鍵字來(lái)聲明變量，這給語(yǔ)言增加了額外的復(fù)雜性。三者之間的區(qū)別是基于范圍、提升和重新分配。

您可能想知道應(yīng)該在自己的程序中使用這三種方法中的哪一種。一個(gè)普遍接受的做法是盡可能多地使用const，并在循環(huán)和重新分配的情況下使用let。通常，在處理遺留代碼之外可以避免var。

變量作用域

JavaScript中的作用域是指代碼的當(dāng)前上下文，它決定了變量對(duì)JavaScript的可訪問(wèn)性。范圍的兩種類型是局部的和全局的:

• 全局變量是在塊之外聲明的變量

• 局部變量是在塊內(nèi)聲明的變量

在下面的示例中，我們將創(chuàng)建一個(gè)全局變量。

//初始化一個(gè)全局變量
var creature = "wolf";

我們知道變量可以重新分配。使用局部作用域，我們實(shí)際上可以創(chuàng)建與外部作用域中的變量同名的新變量，而無(wú)需更改或重新分配原始值。

在下面的示例中，我們將創(chuàng)建一個(gè)全局species變量。函數(shù)內(nèi)部是一個(gè)具有相同名稱的局部變量。通過(guò)將它們發(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è)局部作用域的變量不能從全局作用域訪問(wèn)。

然而，新的關(guān)鍵字let和const是塊范圍的。這意味著從任何類型的塊(包括函數(shù)塊、if語(yǔ)句、for和while循環(huán))創(chuàng)建一個(gè)新的本地范圍。

為了說(shuō)明函數(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不太可能無(wú)意中覆蓋變量值。

變量提升

到目前為止，在大多數(shù)示例中，我們已經(jīng)使用var聲明了一個(gè)變量，并使用一個(gè)值初始化了它。在聲明和初始化之后，我們可以訪問(wèn)或重新分配變量。

如果我們?cè)噲D在變量被聲明和初始化之前使用它，它將返回undefined。

//在聲明變量之前嘗試使用它
console.log(x);
/ /變量賦值
var x = 100;

輸出：

undefined

但是，如果省略var關(guān)鍵字，就不再聲明變量，而是初始化它。它將返回一個(gè)ReferenceError并停止腳本的執(zhí)行。

//在聲明變量之前嘗試使用它
console.log(x);
//沒(méi)有var的變量賦值
x = 100;

輸出：

ReferenceError: x is not defined

原因在于提升，這是JavaScript的一種行為，其中變量和函數(shù)聲明被移到它們作用域的頂部。由于只掛起實(shí)際聲明，而沒(méi)有初始化，因此第一個(gè)示例中的值返回未定義的值。

為了更清楚地演示這個(gè)概念，下面是我們編寫(xiě)的代碼以及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)致問(wèn)題，因?yàn)榫帉?xiě)此代碼的程序員可能希望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語(yǔ)句，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è)問(wèn)題，它在試圖在聲明變量之前使用該變量或多次聲明該變量時(shí)拋出一個(gè)錯(cuò)誤。

常量

許多編程語(yǔ)言都有常量，這些常量是不能修改或更改的值。在JavaScript中，const標(biāo)識(shí)符是根據(jù)常量建模的，不能重新分配分配給const的值。

將所有const標(biāo)識(shí)符都寫(xiě)成大寫(xiě)是常見(jiàn)的約定。這將它們與其他變量值區(qū)分開(kāi)來(lái)。

在下面的示例中，我們使用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 }

常量非常有用，可以讓將來(lái)的自己和其他程序員清楚地認(rèn)識(shí)到，不應(yīng)該重新分配預(yù)期的變量。如果您希望將來(lái)修改某個(gè)變量，那么您可能希望使用let來(lái)聲明該變量。

到此為止, 關(guān)于JavaScript中的變量有了一個(gè)基礎(chǔ)的認(rèn)識(shí), 但是對(duì)于具體的使用方法還是需要多加鞏固和練習(xí)，如果想了解更多相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊。