文章首先介紹了變量的三種聲明方式：var、let 和 const。它解釋了這三種方式的區(qū)別，以及為什么使用 const 聲明常量。然后，文章深入探討了“賦值”和“變異”的區(qū)別，這是理解 const 的關(guān)鍵。雖然 const 創(chuàng)建的對象和數(shù)組。

正文開始

JavaScript 中的 const 關(guān)鍵字用于聲明常量。常量通常被認(rèn)為是“不能更改的變量”：

const hi = 5;
hi = 10;
// ?? Uncaught TypeError: Assignment to constant variable.
console.log(hi);
// -> 5

有趣的是，當(dāng)我使用const創(chuàng)建一個(gè)對象時(shí)，我可以自由地更改它：

const person = {
  name: 'Hassan',
};
person.name = 'Sujata';
// Seems to work?? ??
console.log(person);
// -> { name: 'Sujata' }

我怎么能夠改變 person 變量？我使用了 const ！

為了理解這個(gè)表面上的矛盾，我們需要了解賦值和變異之間的區(qū)別。這是 JavaScript 中的核心概念，當(dāng)您清楚地理解這個(gè)區(qū)別時(shí)，許多事情就會(huì)變得更加清晰。

變量名作為標(biāo)簽

下面是完全有效的JavaScript程序：

5;

這是另一個(gè):

['apple', 'banana', 'cherry'];

在這兩個(gè)例子中，我正在創(chuàng)建一些東西。一個(gè)數(shù)字和一個(gè)數(shù)組。當(dāng)代碼運(yùn)行時(shí)，這些數(shù)據(jù)將被創(chuàng)建并存儲(chǔ)在計(jì)算機(jī)的內(nèi)存中。

這些程序并不是非常有用。我正在創(chuàng)建一些數(shù)據(jù)，但我沒有訪問它的方式！

變量允許我們在我們創(chuàng)建的東西上貼上標(biāo)簽，以便以后可以引用它。

// Create it now...
const fruits = ['apple', 'banana', 'cherry'];

// ...and access it later:
console.log(fruits);
// -> ['apple', 'banana', 'cherry']

當(dāng)我剛開始學(xué)習(xí)編程時(shí)，我認(rèn)為代碼是從左到右執(zhí)行的：首先我們創(chuàng)建一個(gè) fruits 變量，就像一個(gè)空盒子，然后我們在這個(gè)盒子里組裝我們的數(shù)組。

原來這并不是正確的心理模型。更準(zhǔn)確的說法是，數(shù)組首先被創(chuàng)建，然后我們將我們的 fruits 標(biāo)簽指向它。

重新分配我們的標(biāo)簽

當(dāng)我們使用 let 關(guān)鍵字創(chuàng)建一個(gè)變量時(shí)，我們能夠更改該標(biāo)簽所引用的“事物”。

例如，我們可以將我們的 fruits 標(biāo)簽指向一個(gè)新值：

這被稱為重新分配。實(shí)際上， fruits 標(biāo)簽應(yīng)該指向一個(gè)完全不同的值：

// We start with a labeled array:
  let fruits = ['apple', 'banana', 'cherry'];

// ????????
// 從上面的列表中選擇其他選項(xiàng)
//查看它如何在代碼中翻譯！

我們沒有修改數(shù)據(jù)，我們修改的是標(biāo)簽。我們將其從原始數(shù)組中分離出來，連接到一個(gè)新數(shù)組中。

相比之下，使用 const 創(chuàng)建的變量無法重新賦值：

這是 let 和 const 之間的根本區(qū)別。當(dāng)我們使用 const 時(shí)，我們創(chuàng)建了一個(gè)不可摧毀的鏈接，將變量名和一段數(shù)據(jù)聯(lián)系在一起。

然而，問題在于：我們?nèi)匀豢梢孕薷臄?shù)據(jù)本身！只要標(biāo)簽保持完好無損。

例如，使用數(shù)組，我們可以輕松地添加/刪除其中的項(xiàng)目。 fruits 變量仍然連接到同一個(gè)數(shù)組：

這被稱為變異(mutation)。我們通過添加/刪除項(xiàng)目來編輯數(shù)組的值。

這是另一個(gè)例子，使用對象而不是數(shù)組。只要標(biāo)簽繼續(xù)指向相同的對象，我們就可以編輯對象中的鍵/值。

重新分配（將變量名稱指向新事物）和突mutation （編輯事物內(nèi)的數(shù)據(jù)）之間存在根本區(qū)別。

當(dāng)我們使用 const 創(chuàng)建一個(gè)常量時(shí)，我們可以百分之百地確定該變量永遠(yuǎn)不會(huì)被重新分配，但是在變異方面沒有任何承諾。 const 并不完全阻止變異。

這里還有一個(gè)問題：像字符串和數(shù)字這樣的“原始”數(shù)據(jù)類型是不可變的。這使得事情變得更加混亂。我們將在下一節(jié)中討論。

如果你正在尋找一種方法來確保你的數(shù)據(jù)不會(huì)被修改，那么有一個(gè)方法叫做Object.freeze()，它可以派上用場。使用該方法可以將對象和數(shù)組凍結(jié)，使它們變成只讀的，這樣就可以保護(hù)它們免受修改。這是一種非常有用的方法，特別是在需要確保數(shù)據(jù)的不可變性時(shí)。使用這種方法，即使使用const關(guān)鍵字也可以確保你的數(shù)據(jù)不會(huì)被修改

// With arrays:
const arr = Object.freeze([1, 2, 3]);
arr.push(4);
console.log(arr);
// -> [1, 2, 3]


// With objects:
const person = Object.freeze({ name: 'Hassan' });
person.name = 'Sujata';
console.log(person);
// -> { name: 'Hassan' }

據(jù)我所知，Object.freeze()是防彈的。無法修改使用此方法凍結(jié)的對象/數(shù)組。

同樣，如果你使用TypeScript，你也可以使用as const斷言來實(shí)現(xiàn)類似的結(jié)果

const arr = [1, 2, 3] as const;
arr.push(4);
// ?? Error: Property 'push' does not exist
//           on type 'readonly [1, 2, 3]'.

與所有靜態(tài)類型一樣，當(dāng)代碼被編譯為JavaScript時(shí)，這些保護(hù)就會(huì)消失，因此這并不能提供與Object.freeze()相同數(shù)量的保護(hù)。

原始數(shù)據(jù)類型

到目前為止，我們看到的所有示例都涉及對象和數(shù)組。但是如果我們有一個(gè)“原始”數(shù)據(jù)類型，例如字符串、數(shù)字或布爾值，該怎么辦呢？

以一個(gè)數(shù)字為例：

let age = 36;
age = 37;

我們應(yīng)該如何解釋這個(gè)？我們是將 age 標(biāo)簽重新分配給一個(gè)新值，還是突變這個(gè)數(shù)字，將 36 編輯為 37 ？

這就是問題所在：JavaScript 中的所有原始數(shù)據(jù)類型都是不可變的。無法“編輯”數(shù)字的值。我們只能將變量重新分配給不同的值。

假裝有一個(gè)包含所有可能數(shù)字的大列表。我們已經(jīng)將 age 變量分配給數(shù)字36，但我們可以將它指向列表中的任何其他數(shù)字：

要明確的是，瀏覽器并沒有所有可能數(shù)字的大索引。我希望在這里闡述的重點(diǎn)是數(shù)字本身無法更改。我們只能更改標(biāo)簽指向的數(shù)字。

這適用于所有原始值類型，包括字符串、布爾值、null等。

如上所述，在JavaScript中，原始值是不可變的;它們不能被編輯。但如果他們能做到呢?如果數(shù)字本身可以改變，那么語法會(huì)是什么樣子呢?它看起來是這樣的:

// 編輯數(shù)字36的值
36 = 37;

// 36這個(gè)數(shù)字不再存在了
console.log(36); // 37

所以，如果我們可以在JavaScript中改變原始值，那就意味著基本上覆蓋某些數(shù)字，這樣它們就永遠(yuǎn)不會(huì)再被引用了!這顯然會(huì)讓人感到困惑和無助，這就是為什么在JavaScript中基本類是不可變的。

編輯中可能存在的bug沒法實(shí)時(shí)知道，事后為了解決這些bug,花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。

到此這篇關(guān)于JavaScript中const關(guān)鍵字的用法及特性的文章就介紹到這了,更多相關(guān)JS const關(guān)鍵字用法及特性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論