ES6 Symbol在對(duì)象中的作用實(shí)例分析
本文實(shí)例講述了ES6 Symbol在對(duì)象中的作用。分享給大家供大家參考,具體如下:
在ES5中 對(duì)象屬性名都是字符串,這容易造成屬性名的沖突,比如,你使用了一個(gè)他人提供的對(duì)象,但又想為這個(gè)對(duì)象添加新的方法(mixin 模式),新方法的名字就有可能與現(xiàn)有方法產(chǎn)生沖突,于是 ES6 引入了Symbol。Symbol是一種新的原始數(shù)據(jù)類(lèi)型,表示獨(dú)一無(wú)二的值。它是繼undefined、null、布爾值(Boolean)、字符串(String)、數(shù)值(Number)、對(duì)象(Object)六種數(shù)據(jù)類(lèi)型之后的第七種數(shù)據(jù)類(lèi)型。凡是屬性名屬于 Symbol 類(lèi)型,就都是獨(dú)一無(wú)二的,可以保證不會(huì)與其他屬性名產(chǎn)生沖突。
1.聲明Symbol
Symbol函數(shù)可以接受一個(gè)字符串作為參數(shù),表示對(duì) Symbol 實(shí)例的描述,主要是為了在控制臺(tái)顯示,或者轉(zhuǎn)為字符串時(shí),比較容易區(qū)分。
var f= Symbol();//Symbol() var f= Symbol('foo');//Symbol(foo)
// 沒(méi)有參數(shù)的情況 let s1 = Symbol(); let s2 = Symbol(); s1 === s2 // false // 有參數(shù)的情況 let s1 = Symbol('foo'); let s2 = Symbol('foo'); s1 === s2 // false
注意,Symbol函數(shù)的參數(shù)只是表示對(duì)當(dāng)前 Symbol 值的描述,因此相同參數(shù)的Symbol函數(shù)的返回值是不相等的。
s1和s2都是Symbol函數(shù)的返回值,而且參數(shù)相同,但是它們是不相等的。
2.Symbol在對(duì)象中的應(yīng)用
Symbol作為屬性名:
let mySymbol = Symbol(); // 第一種寫(xiě)法 let a = {}; a[mySymbol] = 'Hello!'; // 第二種寫(xiě)法 let a = { [mySymbol]: 'Hello!' }; // 第三種寫(xiě)法 let a = {}; Object.defineProperty(a, mySymbol, { value: 'Hello!' }); // 以上寫(xiě)法都得到同樣結(jié)果 a[mySymbol] // "Hello!"
賦值-括號(hào)形式:
a[mySymbol]='web';
3.Symbol對(duì)象元素的保護(hù)作用
在對(duì)象中有很多值,但是循環(huán)輸出時(shí),并不希望全部輸出,那我們就可以使用Symbol進(jìn)行保護(hù)。
沒(méi)有進(jìn)行保護(hù)的寫(xiě)法:
var obj={name:'小明',skill:'web',age:18}; for (let item in obj){ console.log(obj[item]); }
現(xiàn)在我不想別人知道我的年齡,這時(shí)候我就可以使用Symbol來(lái)進(jìn)行循環(huán)保護(hù)。
let obj={name:'小明',skill:'web'}; let age=Symbol(); obj[age]=18; for (let item in obj){ console.log(obj[item]);//小明、web } console.log(obj[age]);
感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的小球
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的小球,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08ES6記錄異步函數(shù)的執(zhí)行時(shí)間詳解
在這篇文章里,我會(huì)實(shí)現(xiàn)一個(gè)可重用的函數(shù)來(lái)處理 JavaScript 延時(shí)異步操作。有需要的小伙伴們可以參考借鑒,下面來(lái)一起看看。2016-08-08移動(dòng)端Ionic App 資訊上下循環(huán)滾動(dòng)的實(shí)現(xiàn)代碼(跑馬燈效果)
這篇文章主要介紹了移動(dòng)端Ionic App 資訊上下循環(huán)滾動(dòng)的實(shí)現(xiàn)代碼,實(shí)現(xiàn)方法需要借助jQuery庫(kù)的選擇器和動(dòng)畫(huà)函數(shù),并且把jquery的操作封裝到指令里,具體指令代碼大家通過(guò)本文學(xué)習(xí)吧2017-08-08JS獲取url參數(shù),JS發(fā)送json格式的POST請(qǐng)求方法
下面小編就為大家分享一篇JS獲取url參數(shù),JS發(fā)送json格式的POST請(qǐng)求方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03如何進(jìn)行微信公眾號(hào)開(kāi)發(fā)的本地調(diào)試的方法
這篇文章主要介紹了如何進(jìn)行微信公眾號(hào)開(kāi)發(fā)的本地調(diào)試的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06Bootstrap編寫(xiě)一個(gè)兼容主流瀏覽器的受眾門(mén)戶(hù)式風(fēng)格頁(yè)面
這篇文章主要介紹了Bootstrap編寫(xiě)一個(gè)兼容IE8、谷歌等主流瀏覽器的受眾門(mén)戶(hù)式風(fēng)格頁(yè)面,感興趣的小伙伴們可以參考一下2016-07-07javascript簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)菜單效果的方法
這篇文章主要介紹了javascript簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)菜單效果的方法,實(shí)例分析了javascript通過(guò)對(duì)頁(yè)面元素與相關(guān)屬性的操作實(shí)現(xiàn)滑動(dòng)菜單效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07