Day24【ES6 小筆記】資料型別Symbol 使用時機

而 Symbol 是 ES6 推出的資料型別，今天就來看個範例了解一下他的用法唄！ ... const bunny = Symbol(); const rabbit = Symbol(); bunny == rabbit; //false bunny ... 第11屆iThome鐵人賽 DAY 24 3 ModernWeb 透過ESLint練習JavaScriptES6系列第 24篇 Day24【ES6小筆記】資料型別Symbol使用時機 11th鐵人賽 javascript es6 eslint 高雄火箭隊的前後端小夥伴們 江江好 團隊火箭隊 2019-09-2517:06:462024瀏覽 在JavaScript中，原始型別有以下幾種： Boolean：僅有true,false兩個值 Null：僅有null的值 Undefined：沒有被定義的變數 String：字串 Number：數值 Symbo 除了上述的六種原始型別，其餘都是物件型別Object，包含很常使用的陣列、函式等。

而Symbol是ES6推出的資料型別，今天就來看個範例了解一下他的用法唄！ 使用方式 Symbol([description]) Symbol特性 每一個Symbol的值都是獨一無二的，可以保證不會跟其他的屬性名產生衝突 constbunny=Symbol(); constrabbit=Symbol(); bunny==rabbit;//false bunny===rabbit;//false 可以在()中加入對此Symbol的描述 constbunny=Symbol('可愛的小兔子'); constrabbit=Symbol('野兔'); 可以使用description取得Symbol的描述內容 constbunny=Symbol('可愛的小兔子'); bunny.description//"可愛的小兔子" 不能用for迴圈、for..in等方法遍歷，需要使用Object.getOwnPropertySymbols()方法 定義屬性定義屬性鍵名的時候一定要將Symbol值放在中括號[]，不然會被當字串 不能用.取得屬性值，要使用中括號[] 使用實例 假如我們有個物件classMate，紀錄同學的資訊，一般會這樣寫： constclassMate={ '宜蓁':{score:70,sleep:'3:00',drink:true}, 'chita':{score:90,sleep:'20:00',drink:false}, '宜蓁':{score:100,sleep:'19:00',drink:false}, } 因為宜蓁這個菜市場名太容易撞名了，班上就剛好有兩位宜蓁同學，我們console.logclassMate物件看看長怎樣： 哇咧～發現第二個宜蓁資料覆蓋掉第一個宜蓁了QQ～直接被忽略，好可憐，如果去改名又很麻煩，但別擔心，在這時候其實我們就可以使用Symbol來解決這個窘境，皆大歡喜： constclassMate={ [Symbol('宜蓁')]:{score:70,sleep:'3:00',drink:true}, [Symbol('chita')]:{score:90,sleep:'20:00',drink:false}, [Symbol('宜蓁')]:{score:100,sleep:'19:00',drink:false}, } 我們看看console.log有啥： 成功囉！Symbol的值都是唯一的，所以兩位宜蓁的值並不會相等，也就不會有原本的覆蓋問題了，所以Symbol可以解決物件屬性中命名衝突的問題！另外在這裡要特別注意，定義屬性鍵名的時候一定要將Symbol值放在中括號[]裡面，否則屬性的鍵名會當做字串而不是Symbol值哦！ 如果我們要從物件classMate中取得屬性存到myFriends時，就需要這樣寫： constclassMate={ [Symbol('宜蓁')]:{score:70,sleep:'3:00',drink:true}, [Symbol('chita')]:{score:90,sleep:'20:00',drink:false}, [Symbol('宜蓁')]:{score:100,sleep:'19:00',drink:false}, } constmyFriends=Object.getOwnPropertySymbols(classMate).map(item=>classMate[item]); console.log(myFriends); 來console.log看一下： 成功取得囉！這邊要注意在取得Symbol屬性值的時候不能通過點運算子.去訪問，因為點運算子後面要是字串，不會讀取Symbol值作為識別符號所指代的值，所以這裡需要用中括號[]取得屬性的值。

了解完了Symbol的用法，我們來看看ESLintairbnb的規則怎麼說： 1.1Symbolscannotbefaithfullypolyfilled,sotheyshouldnotbeusedwhentargetingbrowsers/environmentsthatdon’tsupportthemnatively. 恩～英文不太好，求大神翻譯囉！ 參考文章 ESLintairbnb歸則 ECMAScript6入门 CodecastsJS：ES6Symbol理解 留言1 追蹤 檢舉 上一篇 Day23【ES6小筆記】箭頭函式this初步了解／使用時機 下一篇 Day25【ES6小筆記】有點規矩！讓你的程式碼整整齊齊～ 系列文 透過ESLint練習JavaScriptES6 共30篇 目錄 RSS系列文 訂閱系列文 81人訂閱 26 Day26【ES6小筆記】陣列好兄弟Set怎麼用？-以30天平民滷肉飯挑戰為例 27 Day27【ES6小筆記】物件好兄弟Map使用方式 28 Day28【ES6小筆記】建構式ㄉ語法糖-Class超基本使用範例 29 Day29【ES6小筆記】陣列搜尋新方法find()findIndex()-以工具人清單為例 30 【懶人包閱讀順序】ES6學習筆記 完整目錄 1則留言 1 山姆大叔 iT邦新手5級‧ 2019-10-0521:38:30 我不是前端工程師，但看了這個Polyfill的單字覺得挺有意思的，就去查了一下： Symbolscannotbefaithfullypolyfilled,sotheyshouldnotbeusedwhentargetingbrowsers/environmentsthatdon’tsupportthemnatively. 白話一點的意思我想大概是：Symbol這個功能不完全是一個Polyfill，因此在使用時需注意舊版瀏覽器/環境是否有支援。

Polyfill的解釋引用字這: Polyfill的準確意思為：用於實現瀏覽器並不支援的原生API的程式碼。

回應 檢舉 登入發表回應 我要留言 立即登入留言 iT邦幫忙鐵人賽 參賽組數 1087組 團體組數 52組 累計文章數 20466篇 完賽人數 572人 鐵人賽最新文章 [13th][Day23]httpresponseheader（下） [13th][Day22]httpresponseheader（上） [13th][Day21]golangcontext 股票怎麼選？掌握這原則，你也能找到強勢股 Gitpush 盤點清查與檢測掃描-安全性檢測 完賽心得 2021/11/28更新 C#入门之正则表达式匹配并替换 [Bonus系列]-來看看ReactRouterv6有什麼新功能?和v5有哪些地方不同? 前往鐵人賽 技術推廣專區 [Day2]抓取每日收盤價 [Day1]基本工具安裝 利用python取得永豐銀行API的Nonce [Day03]tinyML開發板介紹 永豐金融API測試員 [Day01]在享受tinyML這道美食之前 [Day3]使用ta-lib製作指標 [Day4]函數打包與買進持有報酬率試算 計算API所需要的參數:HashID 計算API所需要的參數:IV 前往鐵人賽 熱門問題 PoE交換機可以直接相連嗎？ 禁止員工連線使用Gmail與封鎖USBport的解法 python抓取cpu溫度 遠端重開當機電腦的方法 想問一下BAT問題 公司想要客製化一套ERP系統該選擇軟體開發?套裝系統?還是自行設立部門? SQL找出超過六個月的資料 SQLServer2019 關於防火牆FortGate60C連外網速度無法到300M的問題 巢狀結構json檔如何轉csv IT邦幫忙 站方公告 【2021iThome鐵人賽】登登登！究竟獎落誰家，2021iThome鐵人賽得獎名單正式揭曉 熱門tag 看更多 13th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 windows php python windowsserver linux c# 程式設計 資訊安全 css vue.js sql 分享 熱門回答 想找PDF編輯工具,Adobe太貴了,請問還有其他推薦的替代方案嗎? SQL語法兩張表關聯其中一張表多筆重複資料取日期最大不用Groupby的方法 禁止員工連線使用Gmail與封鎖USBport的解法 請問前端Vue+後端Java，要用那個開發工具呢？另外測試及部署的步驟是那些呢(之前是用JQuery+Java，使用Eclipse開發) 公司想要客製化一套ERP系統該選擇軟體開發?套裝系統?還是自行設立部門? 請問EXCEL如何在抓取網頁外部資料後並設定好自動更新，寫的程式可以在資料更新時自己動作? 遠端重開當機電腦的方法 關於防火牆FortGate60C連外網速度無法到300M的問題 SQL找出超過六個月的資料 解新手任務... 熱門文章 股票怎麼選？掌握這原則，你也能找到強勢股 Python爬蟲,真的很簡單 強制存取控制環境中強制執行完整性 Gitpush [13th][Day23]httpresponseheader（下） [13th][Day21]golangcontext [13th][Day22]httpresponseheader（上） 第三隻狗勾 第四隻狗勾 Efficient&LatestECCouncil312-49v10Dumps"2021"|Real312-49v10ExamQuestions&Answers 一週點數排行 更多點數排行 海綿寶寶(antijava) ㊣浩瀚星空㊣(yoching) japhenchen(japhenchen) fillano(fillano) raytracy(raytracy) ccenjor(ccenjor) 純真的人(jer5173) 居然解出來了(partyyaya) 小山丘(a243318490) dscwferp(dscwferp) × At 輸入對方的帳號或暱稱 Loading 找不到結果。

標記 {{result.label}} {{result.account}} 關閉