歡迎您光臨深圳塔燈網絡科技有限公司!
          電話圖標 余先生:13699882642

          網站百科

          為您解碼網站建設的點點滴滴

          Symbol() 教程

          發表日期:2019-09 文章編輯:小燈 瀏覽次數:9124

          Symbol這個詞在IT軟件領域實際上是個常見角色,在傳統前端技術領域,這個詞出現頻率有限,但是,隨著現代web技術的發展,Symbol這個詞開始在不同前端語言中出現。

          symbol的中文意思是:符號;象征;標志;記號等。

          我最早知道是在Adobe Illustrator軟件中,作為一個矢量符號存在。在SVG中,就有專門的<symbol>標簽,用來指代SVG小圖標。

          在這里,Symbol又有了另外的角色,作為一個JavaScript的原生數據類型(primitive data type)存在。

          說到JavaScript原生數據類型,我們通常想到的有這6種:undefined、null、boolean、string、number、object。而symbol是ES6新增的一個原生數據類型。ES6引入了一種新的原始數據類型Symbol,表示獨一無二的值。

          Symbol函數前不能使用new命令,否則會報錯。這是因為生成的Symbol是一個原始類型的值,不是對象。會報下面的錯誤:

          Uncaught TypeError: Symbol is not a constructor

          Uncaught TypeError: Symbol is not a constructor

          Symbol函數可以接受一個字符串作為參數,表示對Symbol實例的描述,主要是為了在控制臺顯示,或者轉為字符串時,比較容易區分。

          而Symbol本身又是一個方法。

          例如下面JS:

          typeof Symbol();

          可以看到Symbol()作為一個方法執行了,同時typeof其類型,也是'symbol',如下截圖:

          Symbol

          Symbol的作用非常的專一,換句話說其設計出來就只有一個目的——作為對象屬性的唯一標識符,防止對象屬性沖突發生。

          舉個例子,你看上了公司前來的前臺妹紙,想了解關于她的更多信息,于是就詢問Hr同事,掃地阿姨,于是得到類似這樣信息:

          let info1 = {name: '塔燈網絡',age: 24,job: 'www.xttblog.com',description: '平時喜歡做做瑜伽,人家有男朋友,你別指望了'}let info2 = {description: '這小姑娘挺好的,挺熱情的,嘿嘿嘿……'}

          顯然,你需要對這兩個數據進行匯總,結果,就會發現,描述都用了同一個對象屬性description,于是整合的時候,就容器沖突,覆蓋,導致“人家有男朋友”這么重要的信息都沒注意到。

          但是,如果要是Symbol,則完全就不要擔心這個問題了:

          let info1 = {name: '婷婷',age: 24,job: '公司前臺',[Symbol('description')]: '平時喜歡做做瑜伽,人家有男朋友,你別指望了'}let info2 = {[Symbol('description')]: '這小姑娘挺好的,挺熱情的,嘿嘿嘿……'}

          此時,我們對info1, info2對象進行復制,如下:

          let target = {};Object.assign(target, info1, info2);

          此時target對象如下截圖所示:

          Symbol

          妹紙所有的描述信息都被完完整整地保留了下來了。

          因為Symbol()返回值是唯一的,也就是:

          Symbol('description') === Symbol('description');// 返回值是false

          Symbol值不能與其他類型的值進行運算

          // 沒有參數的情況var s1 = Symbol();var s2 = Symbol();s1 === s2 // false// 有參數的情況var s1 = Symbol("foo");var s2 = Symbol("foo");s1 === s2 // false

          Symbol作為屬性使用。

          var mySymbol = Symbol();// 第一種寫法var a = {};a[mySymbol] = 'Hello!';// 第二種寫法var a = {[mySymbol]: 'Hello!'};// 第三種寫法var a = {};Object.defineProperty(a, mySymbol, { value: 'Hello!' });// 以上寫法都得到同樣結果a[mySymbol] // "Hello!"

          Symbol值作為對象屬性名時,不能用點運算符。

          var a = {};var name = Symbol();a.name = 'lili';a[name] = 'lucy';console.log(a.name,a[name]); //lili,lucy

          Symbol值作為屬性名時,該屬性還是公開屬性,不是私有屬性。

          這個有點類似于java中的protected屬性(protected和private的區別:在類的外部都是不可以訪問的,在類內的子類可以繼承protected不可以繼承private)

          但是這里的Symbol在類外部也是可以訪問的,只是不會出現在for…in、for…of循環中,也不會被Object.keys()、Object.getOwnPropertyNames()返回。但有一個Object.getOwnPropertySymbols方法,可以獲取指定對象的所有Symbol屬性名。


          本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得,所有資料僅供用戶學習參考,本站不擁有所有權,如您認為本網頁中由涉嫌抄襲的內容,請及時與我們聯系,并提供相關證據,工作人員會在5工作日內聯系您,一經查實,本站立刻刪除侵權內容。本文鏈接:http://www.cjxv.cn/21341.html
          相關前端設計
           八年  行業經驗

          多一份參考,總有益處

          聯系深圳網站公司塔燈網絡,免費獲得網站建設方案及報價

          咨詢相關問題或預約面談,可以通過以下方式與我們聯系

          業務熱線:余經理:13699882642

          Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.    

          主站蜘蛛池模板: 亚洲国产精品自产在线播放| 国产成人欧美视频在线| 两个小姨子韩国| 日韩av激情在线观看| 亚洲国产三级在线观看| 狠狠色综合网站久久久久久久高清 | 花蝴蝶直播苹果版| 国产欧美日韩精品a在线观看| 91精品国产91久久久久青草| 夫妇野外交换hd中文小说| 不用付费的黄色软件| 日日噜噜噜夜夜爽爽狠狠| 久久精品国产一区二区三| 欧洲亚洲综合一区二区三区| 亚洲成a人v欧美综合天| 毛片a级毛片免费观看品善网 | 巨胸喷奶水www视频网站| 久久久久一级片| 日韩v亚洲v欧美v精品综合| 亚洲av专区无码观看精品天堂| 欧美性xxxx禁忌| 亚洲成a人片在线不卡| 毛片免费视频播放| 人与动性xxxxx免费| 疯狂做受XXXX国产| 动漫美女和男人羞羞漫画| 美女裸免费观看网站| 国产xxxx做受欧美88xx00tube| 青青草娱乐视频| 国产在线高清一级毛片| 人人澡人人澡人人看添欧美| 国产精品成人无码久久久久久| 91久久偷偷做嫩草影院免| 在我跨下的英语老师景老师| av天堂午夜精品一区二区三区| 女扒开尿口让男桶30分钟| а√最新版在线天堂| 婷婷开心深爱五月天播播| 七仙女欲春3一级裸片在线播放| 成人免费一级片| 一级黄色香蕉视频|