詳細(xì)談?wù)凟S6中的symbol數(shù)據(jù)類型
symbol數(shù)據(jù)類型
js語言中,ES6前有6種數(shù)據(jù)類型。
ES6新提出symbol數(shù)據(jù)類型,所以symbol是js的第七種數(shù)據(jù)類型,表示獨(dú)一無二的值。是一種類似于字符串的數(shù)據(jù)類型。
目的是為了防止屬性名的沖突,保證對象中每一個(gè)屬性名都是獨(dú)一無二的。
let s1 = Symbol('foo'); let s2 = Symbol('foo'); s1 === s2 // false
Symbol類型可以有一個(gè)字符串參數(shù),表示對Symbol實(shí)例的描述。所以相同描述的兩個(gè)Symbol類型實(shí)例也是不相等的。
symbol出現(xiàn)的原因
ES5 的對象屬性名都是字符串,這容易造成屬性名的沖突。比如,你使用了一個(gè)他人提供的對象,但又想為這個(gè)對象添加新的方法(mixin 模式),新方法的名字就有可能與現(xiàn)有方法產(chǎn)生沖突。如果有一種機(jī)制,保證每個(gè)屬性的名字都是獨(dú)一無二的就好了,這樣就從根本上防止屬性名的沖突。這就是 ES6 引入Symbol的原因
Symbol特點(diǎn)
- Symbol的值是唯一的,用來解決命名沖突的問題
- Slymbol 值不能與其他數(shù)據(jù)進(jìn)行運(yùn)算
- Symbol 定義的對象屬性不能使用fr..in 循環(huán)遍歷,但是可以使用Reflect.ownKeys來獲取對象的所有鍵名
- Symbol函數(shù)前不能使用new命令,否則會報(bào)錯(cuò)。這是因?yàn)樯傻?Symbol 是一個(gè)原始類型的值,不是對象。也就是說,由于 Symbol 值不是對象,所以不能添加屬性?;旧?,它是一種類似于字符串的數(shù)據(jù)類型。
//創(chuàng)建Symbol let s= Symbol(); console.log(s, typeof s); // 試試創(chuàng)建2個(gè)symbol相同 let s2 = Symbol(' 辣雞rb'); let s3 = Symbol(' 辣雞rb'); console.log(s2 === s3); //false //用Symbol.for創(chuàng)建一樣的symbol let s4 = Symbol.for('辣雞rb'); let s5 = Symbol.for('辣雞rb'); console.log(s4 === s5); //true //不能與其他數(shù)據(jù)進(jìn)行運(yùn)算 let result = s + 100;//報(bào)錯(cuò),
文章結(jié)尾回顧一下js的數(shù)據(jù)類型
引用尚硅谷的一個(gè)記憶口訣
// USONB =>you are so .niubility 你是如此牛逼 // u=>undefined // s=>string symbol // 0=>object // n=>null number // b=>boolean
思考一下,決定再寫點(diǎn),
symbol的應(yīng)用
在rb對象中添加up和down方法
方法1
let rb = { name: '日本戰(zhàn)犯', age: 500, }; // 用symbol處理 // 聲明對象,里面包含兩個(gè)方法,方法用symbol()寫 let methods = { up: Symbol(), down: Symbol() }; // 把方法加進(jìn)去 rb[methods.up] = function () { console.log('原諒說的是人'); }; rb[methods.down] = function () { console.log('畜生沒臉讓中華兒女原諒它'); }; console.log(rb);
方法2
在rb對象中添加sb和dsb方法
let rb = { name: '日本戰(zhàn)犯', age: 500, [Symbol('sb')]: function () { console.log('我喜歡日本動(dòng)畫'); }, [Symbol('dsb')]: function () { console.log('但不妨礙我恨他們在華夏大地犯的罪'); }, }; console.log(rb);
Symbol內(nèi)置的屬性值
- Symbol.hasInstance:其它對象使用instanceof運(yùn)算符的時(shí)候會使用該屬性名指向的內(nèi)部方法。
- Symbol.isConcatSpreadable
- Symbol.species
- Symbol.match
- Symbol.replace
- Symbol.search
- Symbol.split
- Symbol.iterator
- Symbol.toPrimitive
- Symbol.toStringTag
- Symbol.unscopables
總結(jié)
到此這篇關(guān)于ES6中symbol數(shù)據(jù)類型的文章就介紹到這了,更多相關(guān)ES6的symbol數(shù)據(jù)類型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js document.getElementsByClassName的使用介紹與自定義函數(shù)
今天在增加一個(gè)功能的時(shí)候需要用到getElementsByClassName(),getElementsByClassName但是HTML5 新增的DOM API。IE8以下不支持,那么就需要下面的方法解決了2016-11-11Bootstrap3 圖片(響應(yīng)式圖片&圖片形狀)
這篇文章主要介紹了 Bootstrap3 圖片 響應(yīng)式圖片和圖片形狀的相關(guān)資料,需非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01JS實(shí)現(xiàn)使用POST方式發(fā)送請求
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)使用POST方式發(fā)送請求,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08Ionic實(shí)現(xiàn)頁面下拉刷新(ion-refresher)功能代碼
這篇文章主要介紹了使用Ionic實(shí)現(xiàn)頁面下拉刷新(ion-refresher)功能的代碼,感興趣的朋友一起看看吧2016-06-06JS頁面獲取 session 值,作用域和閉包學(xué)習(xí)筆記
這篇文章主要介紹了JS頁面獲取 session 值,作用域和閉包,結(jié)合具體實(shí)例形式分析了javascript與jsp交互獲取session值、函數(shù)作用域及閉包相關(guān)操作技巧,需要的朋友可以參考下2019-10-10js實(shí)現(xiàn)三級聯(lián)動(dòng)效果(簡單易懂)
本文主要介紹了js實(shí)現(xiàn)三級聯(lián)動(dòng)效果的示例代碼,簡單易懂。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03uniapp中使用?uni.navigateBack()?返回上級頁面并傳參的方法
最近遇到這樣的需求在A頁面中通過跳轉(zhuǎn)到B頁面,在B頁面中處理的數(shù)據(jù),需要跳轉(zhuǎn)回A頁面供其使用,本文給大家分享uniapp中使用?uni.navigateBack()?返回上級頁面并傳參的操作方法,感興趣的朋友一起看看吧2023-10-10