創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務(wù)器提供商,新人活動買多久送多久,劃算不套路!
這篇文章運(yùn)用簡單易懂的例子給大家介紹如何使用symbol,代碼非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
symbol是一種新的原始數(shù)據(jù)類型,它是JavaScript的第七種數(shù)據(jù)類型,Symbol值通過Symbol函數(shù)生成,使用語法為“l(fā)et s = Symbol();typeof s;”,其中typeof表明s是symbol數(shù)據(jù)類型。
Symbol() 的使用方法
簡介:ES5的對象屬性名都是字符串,這就很容易造成屬性名的沖突,比如一個(gè)項(xiàng)目很龐大,又不是一個(gè)人開發(fā) 的,就有可能會造成變量名沖突,如果有一個(gè)獨(dú)一無二的名字就好了,這樣就能從根本上防止屬性名沖突。這就是ES6引入Symbol的原因。
ES6引入的是一種新的原始數(shù)據(jù)類型Symbol,表示獨(dú)一無二的,它是JavaScript的第七種數(shù)據(jù)類型。Symbol值通過Symbol函數(shù)生成,只要屬性名是屬于Symbol類型的,就是獨(dú)一無二的,可以保證不會與其他屬性名產(chǎn)生沖突。
let s = Symbol(); typeof s; //"symbol"
上面的代碼中s 就是一個(gè)獨(dú)一無二的值,typeof表明s 是symbol數(shù)據(jù)類型的。
注意:symbol函數(shù)前不能使用new關(guān)鍵字,否則會報(bào)錯(cuò),這是因?yàn)閟ymbol是原始數(shù)據(jù)類型,而不是對象,所以不能添加屬性。
symbol可以接受一個(gè)字符串作為參數(shù),表示對Symbol的描述,主要是在控制臺顯示時(shí)容易區(qū)分
var s1 = Symbol("foo"); var s2 = Symbol("bar"); s1 // Symbol("foo") s2 // Symbol("bar") s1.toString() // "Symbol(foo)" s2.toString() // "Symbol(bar)
這個(gè)參數(shù)可以不加,如果不加在控制臺輸出就是兩個(gè)Symbol()不利于區(qū)分,加上參數(shù)就是為了加以區(qū)分。
沒有參數(shù)的兩個(gè)Symbol是不相等的,例如
// 沒有參數(shù)的情況 var s1 = Symbol(); var s2 = Symbol(); s1 == s2 // false // 有參數(shù)的情況 var s1 = Symbol("foo"); var s2 = Symbol("foo"); s1 == s2 // false
無論有沒有參數(shù)都是不相等的
Symbol不能與其他值進(jìn)行運(yùn)算,否則會報(bào)錯(cuò)
var s1 = Symbol("My Symbol"); "your symbol is" + s1; // TypeError: can't convert symbol to string `your symbol is ${s1}` // TypeError: can't convert symbol to string
Symbole 可以顯示的轉(zhuǎn)為字符串,布爾值,但是不能轉(zhuǎn)為數(shù)字
// 轉(zhuǎn)為字符串 var s1 = Symbol("My Symbol"); String(s1) // "Symbol(My Symbol)" s1.toString() // "Symbol(My Symbol)" //轉(zhuǎn)為布爾值 var s1 = Symbol(); Boolean(s1) //true !s1 //false if(s1) { // ... } //轉(zhuǎn)為數(shù)值就會報(bào)錯(cuò)
由于每一個(gè)Symbol都不相同,那么可以作為標(biāo)識符作為對象的屬性名,保證不會出現(xiàn)同名的的屬性
var mySymbol = Symbol(); //第一種寫法 var a = {}; a[mySymbol] = "Hello!"; //第二種寫法 var a = { [mySymbol]: "Hellow!" } //第三種寫法 var a = {}; Object.defineProperty(a, mySymbol, { value: "Hellow!" }); //以上寫法的結(jié)果都相同 a[mySymbol] // "Hellow!"
注意:Symbol值作為對象的屬性名時(shí)不能使用點(diǎn)運(yùn)算符,同理,在對象的內(nèi)部使用Symbol值時(shí)也必須放在方括號中
let s = Symbol(); let obj = { [s]: function(arg) {...} } //如果s不放在[]中,該屬性名就是字符串,而不是Symbol //可以采用增強(qiáng)的方式在書寫上面的代碼 let s = Symbol(); let obj = { [s](arg) {...} }
Symbol還可以定義一組常量,保證這組常量的值都是不相等的
const COLOR_RED = Symbol(); const COLOR_GREEN = Symbol(); function getComponent(color) { switch(color) { case: COLOR_RED: return "red"; case: COLOR_GREEN: return "green"; default: throw new Error("Undefind color") } }
常量使用Symbol值大的好處就是,其他任何值都不可能與之相同。
消除魔術(shù)字符串
魔術(shù)字符串就是指,在代碼之中多次出現(xiàn),與代碼形成強(qiáng)耦合的某一個(gè)具體的字符串或數(shù)字,良好的代碼風(fēng)格應(yīng)該消除魔術(shù)字符串,由含義清晰的變量代替。
function getArea(shape, options) { var area = 0; switch(shape) { case: "Tringel": // 魔術(shù)字符串 area = 5*options.width*options.height; break; } return area; } getArea("Tringel", {width: 100, height: 100}); // 魔術(shù)字符串
上面的字符串中 Tringel 就是一個(gè)魔術(shù)字符串,它多次出現(xiàn),與代碼形成強(qiáng)耦合,不利于將來的維護(hù)。
var shapeType = { triangle: "Tringel" } function getArea(shape, options) { var area = 0; switch(shape) { case: shapeType.triangle: // 消除魔術(shù)字符串 area = 5*options.width*options.height; break; } return area; } getArea(shapeType.triangle, {width: 100, height: 100}); //消除魔術(shù)字符串
這里就很適合用Symbol來代替
var shapeType = { triangle: Symbol() }
關(guān)于如何使用symbol就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
分享題目:如何使用symbol-創(chuàng)新互聯(lián)
網(wǎng)頁地址:http://jinyejixie.com/article24/depece.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、移動網(wǎng)站建設(shè)、小程序開發(fā)、企業(yè)建站、Google
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容