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

成都網(wǎng)站建設(shè)、網(wǎng)站制作的關(guān)注點不是能為您做些什么網(wǎng)站，而是怎么做網(wǎng)站，有沒有做好網(wǎng)站，給成都創(chuàng)新互聯(lián)一個展示的機會來證明自己，這并不會花費您太多時間，或許會給您帶來新的靈感和驚喜。面向用戶友好，注重用戶體驗，一切以用戶為中心。

理解變量

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

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

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

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

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

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

• 變量名(或標識符)，用戶名

• 賦值操作，由=語法表示

• 分配的值“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ù)字、對象、布爾值和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ù)存儲在內(nèi)存中，稍后可以訪問和修改這些數(shù)據(jù)。變量也可以重新分配，并給定一個新值。下面的簡化示例演示了如何將密碼存儲到變量中，然后進行更新。

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

輸出：

'hunter3'

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

命名變量

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

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

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

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

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

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

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

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

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

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

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

變量作用域

JavaScript中的作用域是指代碼的當前上下文，它決定了變量對JavaScript的可訪問性。范圍的兩種類型是局部的和全局的:

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

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

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

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

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

在下面的示例中，我們將創(chuàng)建一個全局species變量。函數(shù)內(nèi)部是一個具有相同名稱的局部變量。通過將它們發(fā)送到控制臺，我們可以看到變量的值如何根據(jù)范圍而不同，并且原始值不會更改。

//初始化一個全局變量
var species = "human";
function transform() {
//初始化一個局部的、函數(shù)作用域的變量
  var species = "werewolf";
  console.log(species);
}
//記錄全局和局部變量
console.log(species);
transform();
console.log(species);

輸出：

human
werewolf
human

在本例中，局部變量是函數(shù)作用域的。使用var關(guān)鍵字聲明的變量總是函數(shù)作用域，這意味著它們將函數(shù)識別為具有獨立作用域。因此，這個局部作用域的變量不能從全局作用域訪問。

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

為了說明函數(shù)作用域變量和塊作用域變量之間的區(qū)別，我們將使用let在if塊中分配一個新變量。

var fullMoon = true;
//初始化一個全局變量
let species = "human";
if (fullMoon) { 
//初始化一個塊范圍的變量
  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變量具有一個值global（human），另一個值local（werewolf）。var但是，如果我們使用，則會有不同的結(jié)果。

//使用var初始化一個變量
var species = "human";
if (fullMoon) {  
//嘗試在一個塊中創(chuàng)建一個新變量
  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.

在這個例子的結(jié)果中，全局變量和塊范圍的變量都以相同的值結(jié)束。這是因為您不是使用var創(chuàng)建一個新的本地變量，而是在相同的范圍內(nèi)重新分配相同的變量。var不能識別是否屬于不同的新范圍。通常建議聲明塊范圍的變量，因為它們生成的代碼不太可能無意中覆蓋變量值。

變量提升

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

如果我們試圖在變量被聲明和初始化之前使用它，它將返回undefined。

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

輸出：

undefined

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

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

輸出：

ReferenceError: x is not defined

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

為了更清楚地演示這個概念，下面是我們編寫的代碼以及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.但是，它不會導(dǎo)致ReferenceError并停止腳本。

盡管var關(guān)鍵字實際上并未更改var的位置，但這有助于表示提升的工作原理。 但是，這種行為可能會導(dǎo)致問題，因為編寫此代碼的程序員可能希望x的輸出為true，而不是undefined。

在下一個例子中，我們還可以看到提升是如何導(dǎo)致不可預(yù)測的結(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ù)測的行為可能會在程序中引起bug。由于let和const是塊范圍的，所以它們不會以這種方式提升，如下所示。

//在全局范圍內(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中拋出一個錯誤。

//試圖覆蓋用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中的一種機制，其中變量聲明被保存到內(nèi)存中。這可能導(dǎo)致代碼中出現(xiàn)未定義的變量。let和const的引入解決了這個問題，它在試圖在聲明變量之前使用該變量或多次聲明該變量時拋出一個錯誤。

常量

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

將所有const標識符都寫成大寫是常見的約定。這將它們與其他變量值區(qū)分開來。

在下面的示例中，我們使用const關(guān)鍵字將變量SPECIES初始化為常量。試圖重新分配變量將導(dǎo)致錯誤。

//給const賦值
const SPECIES = "human"; 

//嘗試重新分配值
SPECIES = "werewolf";

console.log(SPECIES);

輸出：

Uncaught TypeError: Assignment to constant variable.

因為不能重新分配const值，所以需要同時聲明和初始化它們，否則也會拋出錯誤。

//聲明，但不初始化const
const TODO;

console.log(TODO);

輸出：

Uncaught SyntaxError: Missing initializer in const declaration

不能在編程中更改的值稱為不可變值，而可以更改的值是可變的。雖然const值不能重新分配，但是它們是可變的，因為可以修改用const聲明的對象的屬性。

//創(chuàng)建一個具有兩個屬性的CAR對象
const CAR = {
    color: "blue",
    price: 15000}
//修改CAR的屬性
CAR.price = 20000;

console.log(CAR);

輸出：

{ color: 'blue', price: 20000 }

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

到此為止, 關(guān)于JavaScript中的變量有了一個基礎(chǔ)的認識, 但是對于具體的使用方法還是需要多加鞏固和練習(xí)，如果想了解更多相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊。