ES6 Symbol在對(duì)象中的作用實(shí)例分析
本文實(shí)例講述了ES6 Symbol在對(duì)象中的作用。分享給大家供大家參考，具體如下：
在ES5中 對(duì)象屬性名都是字符串，這容易造成屬性名的沖突，比如，你使用了一個(gè)他人提供的對(duì)象，但又想為這個(gè)對(duì)象添加新的方法（mixin 模式），新方法的名字就有可能與現(xiàn)有方法產(chǎn)生沖突，于是 ES6 引入了Symbol。Symbol是一種新的原始數(shù)據(jù)類型，表示獨(dú)一無(wú)二的值。它是繼undefined、null、布爾值（Boolean）、字符串（String）、數(shù)值（Number）、對(duì)象（Object）六種數(shù)據(jù)類型之后的第七種數(shù)據(jù)類型。凡是屬性名屬于 Symbol 類型，就都是獨(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();
// 第一種寫法
let a = {};
a[mySymbol] = 'Hello!';
// 第二種寫法
let a = {
[mySymbol]: 'Hello!'
};
// 第三種寫法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });
// 以上寫法都得到同樣結(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ù)的寫法：
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]);
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《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)文章
Javascript數(shù)組的排序 sort()方法和reverse()方法
JavaScript提供了sort()方法和reverse()方法，使得我們可以簡(jiǎn)單的對(duì)數(shù)組進(jìn)行排序操作和逆序操作2012-06-06
用iframe實(shí)現(xiàn)不刷新整個(gè)頁(yè)面上傳圖片的實(shí)例
下面小編就為大家?guī)?lái)一篇用iframe實(shí)現(xiàn)不刷新整個(gè)頁(yè)面上傳圖片的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
今天小編就為大家分享一篇關(guān)于js序列化和反序列化的使用講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
JS實(shí)現(xiàn)黑色大氣的二級(jí)導(dǎo)航菜單效果
這篇文章主要介紹了JS實(shí)現(xiàn)黑色大氣的二級(jí)導(dǎo)航菜單效果,具有延遲響應(yīng)鼠標(biāo)事件顯示切換效果的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了JS回調(diào)函數(shù)簡(jiǎn)單用法,結(jié)合實(shí)例形式分析了js回調(diào)函數(shù)的定義與簡(jiǎn)單使用方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
JS實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)小功能
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)返回頂部按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
JavaScript 學(xué)習(xí)小結(jié)(適合新手參考)
JavaScript常量又稱字面常量，是固化在程序代碼中的信息。變量的主要作用是存取數(shù)據(jù)，提供一個(gè)存取信息的容器。2009-07-07
js實(shí)現(xiàn)的文字橫向無(wú)間斷滾動(dòng)
要實(shí)現(xiàn)這樣一個(gè)功能，文字在某塊區(qū)域內(nèi)橫向無(wú)間隙滾動(dòng)。2010-12-12
js實(shí)現(xiàn)權(quán)限樹(shù)的更新權(quán)限時(shí)的全選全消功能
上一篇發(fā)了添加權(quán)限時(shí)的權(quán)限樹(shù)JS源碼，下面把更新時(shí)的也發(fā)給大家借鑒一下，因?yàn)楦聲r(shí)候牽扯到判斷已有權(quán)限等，所以，還要麻煩一些。2009-02-02