JavaScript第七種數(shù)據(jù)類型Symbol的用法詳解
一、什么是Symbol
Symbol是ES6中引入的一種新的基本數(shù)據(jù)類型,用于表示一個獨一無二的值。它是JavaScript中的第七種數(shù)據(jù)類型,與undefined、null、Number(數(shù)值)、String(字符串)、Boolean(布爾值)、Object(對象)并列。
Symbol特點:
- Symbol的值是唯一的,用來解決命名沖突問題
- Symbol值不能與其他數(shù)據(jù)進行運算
- Symbol定義的對象屬性不能使用for...in循環(huán)遍歷,但是可以使用Reflect.ownKeys來獲取對象的所有鍵名
基本用法:
let a = Symbol("末晨曦吖");
console.log(a); // Symbol(末晨曦吖)
console.log(typeof a); //symbol
// 相同參數(shù) Symbol() 返回的值不相等
let b = Symbol("末晨曦吖");
console.log(a === b); //false
為什么相同參數(shù) Symbol() 返回的值不相等???
因為使用Symbol()創(chuàng)建一個Symbol類型的值并賦值給a變量后,你就得到了一個在內(nèi)存中獨一無二的值?,F(xiàn)在除了通過變量a,任何人在任何作用域內(nèi)都無法重新創(chuàng)建出這個值。所以就算我們通過相同參數(shù)創(chuàng)建的b,結(jié)果還是不相等的。
盡管a和b都是使用Symbol()創(chuàng)建出來的,但是它們在內(nèi)存中看起來卻是這樣的:

實際上,a變量拿到了內(nèi)存中某塊內(nèi)存的唯一引用(這里所說的引用,其實就是該內(nèi)存的地址)。如果不借助a變量,你不可能再得到這個地址。因此:
a !== b; //a和b持有的是兩塊內(nèi)存的引用 const c = a; //手動把a里保存的地址保存在c變量中 a === c; //c和a現(xiàn)在指向同一塊內(nèi)存,因為它們保存了同樣的地址

這種行為看似難以理解,但其實它與對象遵循相同的規(guī)則,如:
let a = {};
let b = {};
a !== b; //a和b各自被分配了不同的內(nèi)存,因此它們保存了不同的地址
//借助變量a,變量c拿到了a指向的那個對象的地址,因此兩者相等
let c = a;
a === c;
但是對于同為基本數(shù)據(jù)類型的字符串來說,它不遵循類似的規(guī)則。比如:
let a = "123"; let b = "123"; a === b; //返回true。兩者在常量區(qū)引用同一個字符串

我們首先通過變量a在內(nèi)存中創(chuàng)建了字符串“123”,然后在不借助變量a的情況下,又通過var b = "123"拿到了對“123”這個字符串的引用,兩者指向內(nèi)存中的同一塊內(nèi)存地址。
因此我們說,a無法確保別的變量無法拿到它保存的地址(前提是不通過a)。但是對于var a = Symbol()這樣的語句,a變量內(nèi)保存的值是唯一的,因為除了借助a變量,你永遠無法得到a中保存的值。這也是Symbol的本質(zhì)。
二、作為屬性名的Symbol
let mySymbol = Symbol();
// 第一種寫法
let a = {};
a[mySymbol] = 'Hello!';
// 第二種寫法
let a = {
[mySymbol]: 'Hello!'
};
// 第三種寫法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });
// 以上寫法都得到同樣結(jié)果
a[mySymbol] // "Hello!"
注意,Symbol值作為對象屬性名時,不能用點運算符。
let a = {};
let name = Symbol();
a.name = 'lili';
a[name] = 'lucy';
console.log(a.name,a[name]);//lili,lucy
Symbol值作為屬性名時,該屬性還是公開屬性,不是私有屬性。
三、Symbol中的方法
1、Symbol.for()
我們知道Symbo()創(chuàng)建的兩個變量永遠不會是相同的。那么如果我們需要重新使用同一個Symbol怎么辦,總不能需要挨個去進行比較吧。還好,es6為我們提供了Symbol.for()方法?!?/p>
參數(shù)是symbol類型的描述信息,不同于Symbol(),這個而參數(shù)只能是字符串或者是undefined,若已經(jīng)創(chuàng)建了則返回這個symbol,否則就進行創(chuàng)建并將這個新的symbol返回,代碼如下
let name = Symbol.for("末晨曦");
let name1 = Symbol.for("末晨曦");
console.log(name === name1); // true
請注意,我們在使用創(chuàng)建描述信息為"末晨曦"的變量的時候,使用的是for,而不是Symbol(),倘若使用Symbol()進行首次創(chuàng)建,for會再次創(chuàng)建一次,二者不會相等,代碼如下:
let name = Symbol("末晨曦");
let name1 = Symbol.for("末晨曦");
console.log(name === name1); // false
原因在于Symbol.for()會有一個登記機制,使用for只會對通過for創(chuàng)建的symbol進行檢查,不會對Symbol()創(chuàng)建的進行檢查。
2、Symbol.keyFor()
這個方法參數(shù)是一個通過Symbol.for()創(chuàng)建的symbol類型變量,返回這個symbol變量的描述信息。
let name = Symbol.for("末晨曦");
console.log(Symbol.keyFor(name)); // "末晨曦"
let name1 = Symbol("末晨曦");
console.log(Symbol.keyFor(name1)); // undefined 不能查找Symbol()創(chuàng)建的變量到此這篇關(guān)于JavaScript第七種數(shù)據(jù)類型Symbol的用法詳解的文章就介紹到這了,更多相關(guān)JavaScript Symbol內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript+Canvas實現(xiàn)繪制音頻可視化波形圖
這篇文章主要為大家詳細介紹了如何利用JavaScript和Canvas實現(xiàn)繪制音頻可視化波形圖,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習一下2024-02-02
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解決辦法
這篇文章主要介紹了JavaScript中ParseInt("08")和“09”返回0的原因分析及解決辦法的相關(guān)資料,需要的朋友可以參考下2016-05-05
JS+CSS設(shè)置img在DIV中只顯示Img垂直居中的部分
img的寬和Div相同,但高不固定,要求只顯示Img垂直居中的部分,下面有個不錯的示例,感興趣的朋友可以參考下2013-10-10
JS實現(xiàn)獲取word文檔內(nèi)容并輸出顯示到html頁面示例
這篇文章主要介紹了JS實現(xiàn)獲取word文檔內(nèi)容并輸出顯示到html頁面,結(jié)合實例形式分析了JavaScript使用ActiveXObject組建操作word文件的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-06-06
EasyUI的DataGrid綁定Json數(shù)據(jù)源的示例代碼
本篇文章主要介紹了EasyUI的DataGrid綁定Json數(shù)據(jù)源的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Javscript調(diào)用iframe框架頁面中函數(shù)的方法
這篇文章主要介紹了Javscript調(diào)用iframe框架頁面中函數(shù)的方法,可實現(xiàn)iframe之間傳值或修改值,是非常實用的技巧,需要的朋友可以參考下2014-11-11

