摘要:前端技術(shù)日新月異,不斷有新技術(shù)出現(xiàn),我們就需要不斷地學(xué)習(xí)新知識(shí),雖然已經(jīng)提出很久了,但是最近我才有時(shí)間靜下心來好好學(xué)習(xí)一下里面提出的新規(guī)則。
前端技術(shù)日新月異,不斷有新技術(shù)出現(xiàn),我們就需要不斷地學(xué)習(xí)新知識(shí),雖然ES6已經(jīng)提出很久了,但是最近我才有時(shí)間靜下心來好好學(xué)習(xí)一下里面提出的新規(guī)則。今天總結(jié)下ES6提出的這個(gè)新的原始數(shù)據(jù)類型--Symbol。
為啥需要Symbol一個(gè)新規(guī)則的提出,必然是因?yàn)橛行枨?,熟悉ES5的人都知道,ES5里面對(duì)象的屬性名都是字符串,如果你需要使用一個(gè)別人提供的對(duì)象,你對(duì)這個(gè)對(duì)象有哪些屬性也不是很清楚,但又想為這個(gè)對(duì)象新增一些屬性,那么你新增的屬性名就很可能和原來的屬性名發(fā)送沖突,顯然我們是不希望這種情況發(fā)生的。所以,我們需要確保每個(gè)屬性名都是獨(dú)一無二的,這樣就可以防止屬性名的沖突了。因此,ES6里就引入了Symbol,用它來產(chǎn)生一個(gè)獨(dú)一無二的值。
Symbol是什么我們已經(jīng)知道ES6中引入了一個(gè)叫Symbol的東西,但是這個(gè)東西到底是什么呢?是一個(gè)函數(shù)還是一個(gè)對(duì)象或者是其他什么?Symbol實(shí)際上是ES6引入的一種原始數(shù)據(jù)類型,除了Symbol,JavaScript還有其他5種數(shù)據(jù)類型,分別是Undefined、Null、Boolean、String、Number、對(duì)象,這5種數(shù)據(jù)類型都是ES5中就有的。
怎么生成一個(gè)Symbol類型的值既然我們已經(jīng)知道了Symbol是一種原始的數(shù)據(jù)類型,那么怎么生成這種數(shù)據(jù)類型的值呢?Symbol值是通過Symbol函數(shù)生成的,如下:
let s = Symbol(); console.log(s); // Symbol() typeof s; // "symbol"
上面代碼中,s就是一個(gè)Symbol類型的值,它是獨(dú)一無二的。
Symbol函數(shù)前不能用newSymbol函數(shù)不是一個(gè)構(gòu)造函數(shù),前面不能用new操作符。所以Symbol類型的值也不是一個(gè)對(duì)象,不能添加任何屬性,它只是一個(gè)類似于字符型的數(shù)據(jù)類型。如果強(qiáng)行在Symbol函數(shù)前加上new操作符,會(huì)報(bào)錯(cuò),如下:
let s = new Symbol(); // Uncaught TypeError: Symbol is not a constructor(…)Symbol函數(shù)的參數(shù) 字符串作為參數(shù)
用上面的方法生成的Symbol值不好進(jìn)行區(qū)分,Symbol函數(shù)還可以接受一個(gè)字符串參數(shù),來對(duì)產(chǎn)生的Symbol值進(jìn)行描述,方便我們區(qū)分不同的Symbol值。
let s1 = Symbol("s1"); let s2 = Symbol("s2"); console.log(s1); // Symbol(s1) console.log(s2); // Symbol(s2) s1 === s2; // false let s3 = Symbol("s2"); s2 === s3; // false
從上面代碼可以看出:
給Symbol函數(shù)加了參數(shù)之后,控制臺(tái)輸出的時(shí)候可以區(qū)分到底是哪一個(gè)值;
Symbol函數(shù)的參數(shù)只是對(duì)當(dāng)前Symbol值的描述,因此相同參數(shù)的Symbol函數(shù)返回值是不相等的;
對(duì)象作為參數(shù)如果Symbol函數(shù)的參數(shù)是一個(gè)對(duì)象,就會(huì)調(diào)用該對(duì)象的toString方法,將其轉(zhuǎn)化為一個(gè)字符串,然后才生成一個(gè)Symbol值。所以,說到底,Symbol函數(shù)的參數(shù)只能是字符串。
Symbol值可以進(jìn)行運(yùn)算么?既然Symbol是一種數(shù)據(jù)類型,那我們一定想知道Symbol值是否能進(jìn)行運(yùn)算。告訴你,Symbol值是不能進(jìn)行運(yùn)算的,不僅不能和Symbol值進(jìn)行運(yùn)算,也不能和其他類型的值進(jìn)行運(yùn)算,否則會(huì)報(bào)錯(cuò)。
Symbol值可以顯式轉(zhuǎn)化為字符串和布爾值,但是不能轉(zhuǎn)為數(shù)值。
var mysym1 = Symbol("my symbol"); mysym1.toString() // "Symbol("my symbol")" String(mysym1) // "Symbol("my symbol")" var mysym2 = Symbol(); Boolean(mysym2); // true Number(mysym2) // TypeError: Cannot convert a Symbol value to a number(…)Symbol如何作為屬性名
Symbol就是為對(duì)象的屬性名而生,那么Symbol值怎么作為對(duì)象的屬性名呢?有下面幾種寫法:
let a = {}; let s4 = Symbol(); // 第一種寫法 a[s4] = "mySymbol"; // 第二種寫法 a = { [s4]: "mySymbol" } // 第三種寫法 Object.defineProperty(a, s4, {value: "mySymbol"}); a.s4; // undefined a.s4 = "mySymbol"; a[s4] // undefined a["s4"] // "mySymbol"
從上面代碼可以看出:
使用對(duì)象的Symbol值作為屬性名時(shí),獲取相應(yīng)的屬性值不能用點(diǎn)運(yùn)算符;
如果用點(diǎn)運(yùn)算符來給對(duì)象的屬性賦Symbol類型的值,實(shí)際上屬性名會(huì)變成一個(gè)字符串,而不是一個(gè)Symbol值;
在對(duì)象內(nèi)部,使用Symbol值定義屬性時(shí),Symbol值必須放在方括號(hào)之中,否則只是一個(gè)字符串。
Symbol值作為屬性名的遍歷使用for...in和for...of都無法遍歷到Symbol值的屬性,Symbol值作為對(duì)象的屬性名,也無法通過Object.keys()、Object.getOwnPropertyNames()來獲取了。但是,不同擔(dān)心,這種平常的需求肯定是會(huì)有解決辦法的。我們可以使用Object.getOwnPropertySymbols()方法獲取一個(gè)對(duì)象上的Symbol屬性名。也可以使用Reflect.ownKeys()返回所有類型的屬性名,包括常規(guī)屬性名和 Symbol屬性名。
let s5 = Symbol("s5"); let s6 = Symbol("s6"); let a = { [s5]: "s5", [s6]: "s6" } Object.getOwnPropertySymbols(a); // [Symbol(s5), Symbol(s6)] a.hello = "hello"; Reflect.ownKeys(a); // ["hello", Symbol(s5), Symbol(s6)]
利用Symbol值作為對(duì)象屬性的名稱時(shí),不會(huì)被常規(guī)方法遍歷到這一特性,可以為對(duì)象定義一些非私有的但是又希望只有內(nèi)部可用的方法。
Symbol.for()和Symbol.keyFor()Symbol.for()函數(shù)也可以用來生成Symbol值,但該函數(shù)有一個(gè)特殊的用處,就是可以重復(fù)使用一個(gè)Symbol值。
let s7 = Symbol.for("s7"); console.log(s7); // Symbol(s7) s7.toString(); // "Symbol(s7)" let s8 = Symbol.for("s8"); s7 === s8 // true let s9 = Symbol(); Symbol.keyFor(s9); // undefined Symbol.keyFor(s8); // "s8"
Symbol.for()函數(shù)要接受一個(gè)字符串作為參數(shù),先搜索有沒有以該參數(shù)作為名稱的Symbol值,如果有,就直接返回這個(gè)Symbol值,否則就新建并返回一個(gè)以該字符串為名稱的Symbol值。上面代碼中,s7和s8實(shí)際上就是同一個(gè)Symbol值,所以兩者是相等的。
Symbol.keyFor()函數(shù)是用來查找一個(gè)Symbol值的登記信息的,Symbol()寫法沒有登記機(jī)制,所以返回undefined;而Symbol.for()函數(shù)會(huì)將生成的Symbol值登記在全局環(huán)境中,所以Symbol.keyFor()函數(shù)可以查找到用Symbol.for()函數(shù)生成的Symbol值。
ES6提供了11個(gè)內(nèi)置的Symbol值,分別是Symbol.hasInstance 、Symbol.isConcatSpreadable 、Symbol.species 、Symbol.match 、Symbol.replace 、Symbol.search 、Symbol.split 、Symbol.iterator 、Symbol.toPrimitive 、Symbol.toStringTag 、Symbol.unscopables 等。
有興趣的可以自行了解:http://es6.ruanyifeng.com/#docs/symbol
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/91273.html
摘要:靜態(tài)方法靜態(tài)方法直接用類名來調(diào)用就可以了,熟悉面向?qū)ο缶幊痰耐瑢W(xué)應(yīng)該都不陌生。在中,一個(gè)類不能繼承多個(gè)類。為了解決這個(gè)問題,可以使用。當(dāng)類表達(dá)式有命名時(shí),該命名僅作為類內(nèi)部使用。 本文同步自我得博客:http://www.joeray61.com 簡(jiǎn)介 ES6的Classes是在原型鏈繼承的基礎(chǔ)上,由語言本身提供的語法糖,并非是一種全新的繼承模式。這使得Javascript有一種更加簡(jiǎn)...
摘要:的碼點(diǎn)被稱為基本字符區(qū)域。關(guān)于的介紹,我準(zhǔn)備用文檔阮一峰來做一些介紹,具體的可以參考文檔引入的原因的對(duì)象屬性名都是字符串,這容易造成屬性名的沖突。其他的一些屬性可以去看文檔阮一峰注意函數(shù)前不能使用命令,否則會(huì)報(bào)錯(cuò)。 筆記說明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄,每天10分鐘,重構(gòu)你的前端知識(shí)體系,筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟,完...
摘要:的碼點(diǎn)被稱為基本字符區(qū)域。關(guān)于的介紹,我準(zhǔn)備用文檔阮一峰來做一些介紹,具體的可以參考文檔引入的原因的對(duì)象屬性名都是字符串,這容易造成屬性名的沖突。其他的一些屬性可以去看文檔阮一峰注意函數(shù)前不能使用命令,否則會(huì)報(bào)錯(cuò)。 筆記說明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄,每天10分鐘,重構(gòu)你的前端知識(shí)體系,筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟,完...
摘要:的碼點(diǎn)被稱為基本字符區(qū)域。關(guān)于的介紹,我準(zhǔn)備用文檔阮一峰來做一些介紹,具體的可以參考文檔引入的原因的對(duì)象屬性名都是字符串,這容易造成屬性名的沖突。其他的一些屬性可以去看文檔阮一峰注意函數(shù)前不能使用命令,否則會(huì)報(bào)錯(cuò)。 筆記說明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄,每天10分鐘,重構(gòu)你的前端知識(shí)體系,筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟,完...
閱讀 3357·2023-04-26 00:07
閱讀 3987·2021-11-23 10:08
閱讀 2990·2021-11-22 09:34
閱讀 897·2021-09-22 15:27
閱讀 1784·2019-08-30 15:54
閱讀 3802·2019-08-30 14:07
閱讀 944·2019-08-30 11:12
閱讀 712·2019-08-29 18:44