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

正文開始

JavaScript 中的 const 關鍵字用于聲明常量。常量通常被認為是“不能更改的變量”：

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

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

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

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

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

變量名作為標簽

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

5;

這是另一個:

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

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

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

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

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

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

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

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

重新分配我們的標簽

當我們使用 let 關鍵字創(chuàng)建一個變量時，我們能夠更改該標簽所引用的“事物”。

例如，我們可以將我們的 fruits 標簽指向一個新值：

這被稱為重新分配。實際上， fruits 標簽應該指向一個完全不同的值：

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

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

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

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

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

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

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

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

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

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

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

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

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

// 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()是防彈的。無法修改使用此方法凍結的對象/數(shù)組。

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

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

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

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

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

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

let age = 36;
age = 37;

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

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

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

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

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

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

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

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

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

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

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

最新評論