溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

你知道JavaScript Symbol類型怎么用嗎

發(fā)布時(shí)間:2020-09-19 06:21:12 來(lái)源:腳本之家 閱讀:153 作者:技術(shù)漫談 欄目:web開發(fā)

Symbol 類型

根據(jù)規(guī)范,對(duì)象的屬性鍵只能是字符串類型或者 Symbol 類型。不是 Number,也不是 Boolean,只有字符串或 Symbol 這兩種類型。

到目前為止,我們只見過(guò)字符串。現(xiàn)在我們來(lái)看看 Symbol 能給我們帶來(lái)什么好處。

Symbol

"Symbol" 值表示唯一的標(biāo)識(shí)符。

可以使用 Symbol() 來(lái)創(chuàng)建這種類型的值:

// id 是 symbol 的一個(gè)實(shí)例化對(duì)象
let id = Symbol();

創(chuàng)建時(shí),我們可以給 Symbol 一個(gè)描述(也稱為 Symbol 名),這在代碼調(diào)試時(shí)非常有用:

// id 是描述為 "id" 的 Symbol
let id = Symbol("id");

Symbol 保證是唯一的。即使我們創(chuàng)建了許多具有相同描述的 Symbol,它們的值也是不同。描述只是一個(gè)標(biāo)簽,不影響任何東西。

例如,這里有兩個(gè)描述相同的 Symbol —— 它們不相等:

let id1 = Symbol("id");
let id2 = Symbol("id");

alert(id1 == id2); // false

如果你熟悉 Ruby 或者其他有 "Symbol" 的語(yǔ)言 —— 別被誤導(dǎo)。JavaScript 的 Symbol 是不同的。

注意:Symbol 不會(huì)被自動(dòng)轉(zhuǎn)換為字符串

JavaScript 中的大多數(shù)值都支持字符串的隱式轉(zhuǎn)換。例如,我們可以 alert 任何值,都可以生效。Symbol 比較特殊,它不會(huì)被自動(dòng)轉(zhuǎn)換。

例如,這個(gè) alert 將會(huì)提示出錯(cuò):

let id = Symbol("id");
alert(id); // 類型錯(cuò)誤:無(wú)法將 Symbol 值轉(zhuǎn)換為字符串。

這是一種防止混亂的“語(yǔ)言保護(hù)”,因?yàn)樽址?Symbol 有本質(zhì)上的不同,不應(yīng)該意外地將它們轉(zhuǎn)換成另一個(gè)。

如果我們真的想顯示一個(gè) Symbol,我們需要在它上面調(diào)用 .toString(),如下所示:

let id = Symbol("id");
alert(id.toString()); // Symbol(id),現(xiàn)在它有效了

或者獲取 symbol.description 屬性,只顯示描述(description):

let id = Symbol("id");
alert(id.description); // id

“隱藏”屬性

Symbol 允許我們創(chuàng)建對(duì)象的“隱藏”屬性,代碼的任何其他部分都不能意外訪問(wèn)或重寫這些屬性。

例如,如果我們使用的是屬于第三方代碼的 user 對(duì)象,我們想要給它們添加一些標(biāo)識(shí)符。

我們可以給它們使用 Symbol 鍵:

let user = { // 屬于另一個(gè)代碼
 name: "John"
};

let id = Symbol("id");

user[id] = 1;

alert( user[id] ); // 我們可以使用 Symbol 作為鍵來(lái)訪問(wèn)數(shù)據(jù)

在字符串 "id" 上使用 Symbol("id") 有什么好處?

因?yàn)?user 屬于另一個(gè)代碼,另一個(gè)代碼也使用它執(zhí)行一些操作,所以我們不應(yīng)該在它上面加任何字段,這樣很不安全。但是 Symbol 不會(huì)被意外訪問(wèn)到,所以第三方代碼看不到它,所以使用 Symbol 也許不會(huì)有什么問(wèn)題。
另外,假設(shè)另一個(gè)腳本希望在 user 中有自己的標(biāo)識(shí)符,以實(shí)現(xiàn)自己的目的。這可能是另一個(gè) JavaScript 庫(kù),因此腳本之間完全不了解彼此。

然后該腳本可以創(chuàng)建自己的 Symbol("id"),像這樣:

// ...
let id = Symbol("id");

user[id] = "Their id value";

我們的標(biāo)識(shí)符和他們的標(biāo)識(shí)符之間不會(huì)有沖突,因?yàn)?Symbol 總是不同的,即使它們有相同的名字。

……但如果我們處于同樣的目的,使用字符串 "id" 而不是用 symbol,那么 就會(huì) 出現(xiàn)沖突:

let user = { name: "John" };

// 我們的腳本使用了 "id" 屬性。
user.id = "Our id value";

// ……另一個(gè)腳本也想將 "id" 用于它的目的……  

user.id = "Their id value"
// 砰!無(wú)意中被另一個(gè)腳本重寫了 id!

字面量中的 Symbol

如果我們要在對(duì)象字面量 {...} 中使用 Symbol,則需要使用方括號(hào)把它括起來(lái)。

就像這樣:

let id = Symbol("id");

let user = {
 name: "John",
 [id]: 123 // 而不是 "id:123"
};

這是因?yàn)槲覀冃枰兞?id 的值作為鍵,而不是字符串 "id"。

Symbol 在 for..in 中會(huì)被跳過(guò)

Symbolic 屬性不參與 for..in 循環(huán)。

例如:

let id = Symbol("id");
let user = {
 name: "John",
 age: 30,
 [id]: 123
};

for (let key in user) alert(key); // name, age (no symbols)

// 使用 Symbol 任務(wù)直接訪問(wèn)
alert( "Direct: " + user[id] );

Object.keys(user) 也會(huì)忽略它們。這是一般“隱藏符號(hào)屬性”原則的一部分。如果另一個(gè)腳本或庫(kù)遍歷我們的對(duì)象,它不會(huì)意外地訪問(wèn)到符號(hào)屬性。

相反,Object.assign 會(huì)同時(shí)復(fù)制字符串和 symbol 屬性:

let id = Symbol("id");
let user = {
 [id]: 123
};

let clone = Object.assign({}, user);

alert( clone[id] ); // 123

這里并不矛盾,就是這樣設(shè)計(jì)的。這里的想法是當(dāng)我們克隆或者合并一個(gè) object 時(shí),通常希望 所有 屬性被復(fù)制(包括像 id 這樣的 Symbol)。

其他類型的屬性鍵被強(qiáng)制為字符串:

我們只能在對(duì)象中使用字符串或 symbol 作為鍵,其它類型會(huì)被轉(zhuǎn)換為字符串。

例如,在作為屬性鍵使用時(shí),數(shù)字 0 變成了字符串 "0":

let obj = {
 0: "test" // 和 "0": "test" 一樣
};

// 兩個(gè) alert 都訪問(wèn)相同的屬性(Number 0 被轉(zhuǎn)換為字符串 "0")
alert( obj["0"] ); // test
alert( obj[0] ); // test(同一個(gè)屬性)

全局 symbol

正如我們所看到的,通常所有的 Symbol 都是不同的,即使它們有相同的名字。但有時(shí)我們想要名字相同的 Symbol 具有相同的實(shí)體。例如,應(yīng)用程序的不同部分想要訪問(wèn)的 Symbol "id" 指的是完全相同的屬性。

為了實(shí)現(xiàn)這一點(diǎn),這里有一個(gè) 全局 Symbol 注冊(cè)表。我們可以在其中創(chuàng)建 Symbol 并在稍后訪問(wèn)它們,它可以確保每次訪問(wèn)相同名字的 Symbol 時(shí),返回的都是相同的 Symbol。

要從注冊(cè)表中讀?。ú淮嬖趧t創(chuàng)建)Symbol,請(qǐng)使用 Symbol.for(key)。

該調(diào)用會(huì)檢查全局注冊(cè)表,如果有一個(gè)描述為 key 的 Symbol,則返回該 Symbol,否則將創(chuàng)建一個(gè)新 Symbol(Symbol(key)),并通過(guò)給定的 key 將其存儲(chǔ)在注冊(cè)表中。

例如:

// 從全局注冊(cè)表中讀取
let id = Symbol.for("id"); // 如果該 Symbol 不存在,則創(chuàng)建它

// 再次讀?。赡苁窃诖a中的另一個(gè)位置)
let idAgain = Symbol.for("id");

// 相同的 Symbol
alert( id === idAgain ); // true

注冊(cè)表內(nèi)的 Symbol 被稱為 全局 Symbol。如果我們想要一個(gè)應(yīng)用程序范圍內(nèi)的 Symbol,可以在代碼中隨處訪問(wèn) —— 這就是它們的用途。

這聽起來(lái)像 Ruby:

在一些編程語(yǔ)言中,例如 Ruby,每個(gè)名字都有一個(gè) Symbol。

正如我們所看到的,在 JavaScript 中,全局 Symbol 也是這樣的。

Symbol.keyFor

對(duì)于全局 Symbol,不僅有 Symbol.for(key) 按名字返回一個(gè) Symbol,還有一個(gè)反向調(diào)用:Symbol.keyFor(sym),它的作用完全反過(guò)來(lái):通過(guò)全局 Symbol 返回一個(gè)名字。

例如:

// 通過(guò) name 獲取 Symbol
let sym = Symbol.for("name");
let sym2 = Symbol.for("id");

// 通過(guò) Symbol 獲取 name
alert( Symbol.keyFor(sym) ); // name
alert( Symbol.keyFor(sym2) ); // id

Symbol.keyFor 內(nèi)部使用全局 Symbol 注冊(cè)表來(lái)查找 Symbol 的鍵。所以它不適用于非全局 Symbol。如果 Symbol 不是全局的,它將無(wú)法找到它并返回 undefined。

也就是說(shuō),任何 Symbol 都具有 description 屬性。

例如:

let globalSymbol = Symbol.for("name");
let localSymbol = Symbol("name");

alert( Symbol.keyFor(globalSymbol) ); // name,全局 Symbol
alert( Symbol.keyFor(localSymbol) ); // undefined,非全局

alert( localSymbol.description ); // name

系統(tǒng) Symbol

JavaScript 內(nèi)部有很多“系統(tǒng)” Symbol,我們可以使用它們來(lái)微調(diào)對(duì)象的各個(gè)方面。
它們都被列在了眾所周知的 Symbol 表的規(guī)范中:

  • Symbol.hasInstance
  • Symbol.isConcatSpreadable
  • Symbol.iterator
  • Symbol.toPrimitive
  • ……等等。

例如,Symbol.toPrimitive 允許我們將對(duì)象描述為原始值轉(zhuǎn)換。我們很快就會(huì)看到它的使用。
當(dāng)我們研究相應(yīng)的語(yǔ)言特征時(shí),我們對(duì)其他的 Symbol 也會(huì)慢慢熟悉起來(lái)。

總結(jié)

Symbol 是唯一標(biāo)識(shí)符的基本類型

Symbol 是使用帶有可選描述(name)的 Symbol() 調(diào)用創(chuàng)建的。

Symbol 總是不同的值,即使它們有相同的名字。如果我們希望同名的 Symbol 相等,那么我們應(yīng)該使用全局注冊(cè)表:Symbol.for(key) 返回(如果需要的話則創(chuàng)建)一個(gè)以 key 作為名字的全局 Symbol。使用 Symbol.for 多次調(diào)用 key 相同的 Symbol 時(shí),返回的就是同一個(gè) Symbol。

Symbol 有兩個(gè)主要的使用場(chǎng)景:

  • “隱藏” 對(duì)象屬性。如果我們想要向“屬于”另一個(gè)腳本或者庫(kù)的對(duì)象添加一個(gè)屬性,我們可以創(chuàng)建一個(gè) Symbol 并使用它作為屬性的鍵。Symbol 屬性不會(huì)出現(xiàn)在 for..in 中,因此它不會(huì)意外地被與其他屬性一起處理。并且,它不會(huì)被直接訪問(wèn),因?yàn)榱硪粋€(gè)腳本沒(méi)有我們的 symbol。因此,該屬性將受到保護(hù),防止被意外使用或重寫。

因此我們可以使用 Symbol 屬性“秘密地”將一些東西隱藏到我們需要的對(duì)象中,但其他地方看不到它。

  • JavaScript 使用了許多系統(tǒng) Symbol,這些 Symbol 可以作為 Symbol.* 訪問(wèn)。我們可以使用它們來(lái)改變一些內(nèi)置行為。例如,在本教程的后面部分,我們將使用 Symbol.iterator 來(lái)進(jìn)行 迭代 操作,使用 Symbol.toPrimitive 來(lái)設(shè)置 對(duì)象原始值的轉(zhuǎn)換 等等。

從技術(shù)上說(shuō),Symbol 不是 100% 隱藏的。有一個(gè)內(nèi)置方法Object.getOwnPropertySymbols(obj) 允許我們獲取所有的 Symbol。還有一個(gè)名為 Reflect.ownKeys(obj) 的方法可以返回一個(gè)對(duì)象的 所有 鍵,包括 Symbol。所以它們并不是真正的隱藏。但是大多數(shù)庫(kù)、內(nèi)置方法和語(yǔ)法結(jié)構(gòu)都沒(méi)有使用這些方法。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI