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

