电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Javascript Symbol原理及使用方法解析

瀏覽:92日期:2023-10-10 13:48:32

Symbol是ES6中新引入的一種基本數據類型,在此之前JavaScript中已有幾種基本數據類型:

Numberg String Boolean Null Undefined Object

不同于其他基本類型的通俗易懂,Symbol 是什么和有什么用一直有些讓人困惑。

什么是Symbol

JavaScript標準中規定對象的key只能是 String 或 Symbol 類型,區別在于 String 類型的key可以重復而 Symbol 類型的key是唯一的。Symbol 的本質是表示一個唯一標識。每次創建一個Symbol,它所代表的值都不可能重復,該值的內部實現可以視為一段數字(類似:3423498431987719455..)。所以理論上 Symbol 的存在只有一個意義:用于必須使用唯一值的場景。

創建Symbol

創建 Number、String等基本類型的實例有兩種方法:通過構造函數(或者叫工廠函數)和文字語法糖。比如:

// 構造函數const num = Number(3);const str = String(’hi’);

// 語法糖const num = 3;const str = ’hi’;

顯然使用語法糖更加簡潔。但是 Symbol 只能通過構造函數 Symbol() 進行創建:

const sym = Symbol();

或者,我們可以傳入一個字符串參數(descriptor)用于描述該Symbol:

const sym = Symbol(’cat’);

注意:傳入的參數對 Symbol 值的產生并無影響,因為就算每次傳入的參數都一樣,生成的Symbol值也是不等的。該參數的作用僅用于描述被創建的Symbol,以便debug時可以識別出Symbol的含義。 所以,下列等式結果為 false:

Symbol(’cat’) === Symbol(’cat’) // falseSymbol.for(key)

和 Symbol() 類似,Symbol.for(key) 也可以創建一個Symbol,不一樣的是:創建的 Symbol 是全局的(在全局Symbol表中注冊),而如果全局已經存在相同 key 的Symbol,則直接返回該Symbol。所以,下列等式結果為 true:

Symbol.for(’cat’) === Symbol.for(’cat’) // true

如何使用Symbol

其實 Symbol 本身很簡單,但是如何把它用好、且用的恰到好處卻使人困惑,因為在平常工作中并沒有多少非Symbol不用的場景。但是用對了Symbol會對你的代碼質量有不少提升。來看下面幾種案例:

1. 用作對象的key,防止命名沖突

使用Symbol作為Object的key,可以保證和其他key都不重復。因此,Symbol非常適合用于對對象的屬性進行拓展。

比如,當使用 String 作為對象的key時,一旦出現重復的key則后面的屬性會覆蓋前面的:

const persons = { ’bruce’: ’wayne’, ’bruce’: ’banner’}console.log(persons.bruce); // ’wayne’使用Symbol作為Key可以避免這種情況:const bruce1 = Symbol(’bruce’);const bruce2 = Symbol(’bruce’);const persons = { [bruce1]: ’wayne’, [bruce2]: ’banner’}console.log(persons[bruce1]); // ’wayne’console.log(persons[bruce2]); // ’banner’

js很多內建的方法都是通過 Symbol 進行指定的,比如:Symobol.iterator 指定了一個iterable對象的迭代器方法;Symbol.replace 指定了對象字符串替換的方法,這類 Symbol 被稱為 Well-know Symbols,代表了js語言的內部行為。

2. 使用Symbol定義枚舉

由于Javascript并不自帶枚舉類型,通常情況下我們會使用一個freezed的Object來模擬枚舉類型,比如定義一個日期的枚舉:

const DAYS = Object.freeze({monday: 1,tuesday: 2,wednesday: 3});

此時有一個方法,接收 DAYS 的枚舉值來返回當天要做的事:

function getTodo(day) { switch (day) { case DAYS.monday: return '看電影'; case DAYS.tuesday: return '購物'; case DAYS.wednesday: return '健身'; default: return '日期錯誤'; }}

我們希望代碼邏輯足夠嚴謹,傳入的參數嚴格按照 DAYS.monday 的形式,否則就返回日期錯誤,但是該枚舉類型的實現卻做不到。比如:getTodo(1) 依然能得到 “看電影” 這個結果。

但是使用Symbol卻可以解決這一問題,DAYS 枚舉類型可以重新定義為:

const DAYS = Object.freeze({monday: Symbol(’monday’),tuesday: Symbol(’tuesday’),wednesday: Symbol(’wednesday’)});

此時 getTodo 方法必須接收 DAYS.monday 這樣的枚舉值作為參數,否則就返回 “日期錯誤”,因為世界上再沒有任何一個值和 DAYS.monday 相等了。

這樣定義枚舉顯然更嚴謹了。

3. 使用Symbol存儲元數據

Key為Symbol類型的屬性是不能被枚舉的,這是 Symbol 除了唯一性外的第二大特性,因此使用for...in,Object.keys()、Object.hasOwnProperty()等方法不能識別Symbol屬性,簡而言之Symbol屬性對用戶是“隱藏”的(但并不是private的,因為有其他途徑可以獲取Symbol屬性),例如:

Javascript Symbol原理及使用方法解析

因此Symbol作為“隱藏”屬性可以用來存儲對象的元數據。比如,有一個 TodoList:

class TodoList { constructor() { // todo數量 this.count = 0; } // 增加todo add(id, content) { this[id] = content; this.count++; }}const list = new TodoList();

我們使用 add() 方法向其中增加幾個todo:

list.add(’a’, ’看電影’);list.add(’b’, ’購物’);list.add(’c’, ’健身’);

當我們想使用 for...in 查看里面所有的todo時,會把 count 屬性也帶出來:

Javascript Symbol原理及使用方法解析

為了隱藏count屬性,更方便的對todo進行操作,我們可以使用Symbol來存儲它,TodoList 類修改為:

const count = Symbol(’count’);class TodoList {constructor() {this[count] = 0;}

add(id, content) {this[id] = content;this[count]++;}}

當我們再遍歷 TodoList 的時候,count就隱藏了:

Javascript Symbol原理及使用方法解析

當我們想獲取存儲在Symbol中的原數據時,可以使用 Object.getOwnPropertySymbols() 方法:

Javascript Symbol原理及使用方法解析

以上是我能想到的 Symbol 的用途,如果大家有其他心得體會歡迎補充。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 乳化沥青设备_改性沥青设备_沥青加温罐_德州市昊通路桥工程有限公司 | 400电话_400电话申请_888元包年_400电话办理服务中心_400VIP网 | 短信营销平台_短信群发平台_106短信发送平台-河南路尚 | 智慧消防-消防物联网系统云平台| 阿米巴企业经营-阿米巴咨询管理-阿米巴企业培训-广东键锋企业管理咨询有限公司 | 沙盘模型公司_沙盘模型制作公司_建筑模型公司_工业机械模型制作厂家 | 交通信号灯生产厂家_红绿灯厂家_电子警察监控杆_标志杆厂家-沃霖电子科技 | 东莞市海宝机械有限公司-不锈钢分选机-硅胶橡胶-生活垃圾-涡电流-静电-金属-矿石分选机 | 山东螺杆空压机,烟台空压机,烟台开山空压机-烟台开山机电设备有限公司 | 美能达分光测色仪_爱色丽分光测色仪-苏州方特电子科技有限公司 | 高铝砖-高铝耐火球-高铝耐火砖生产厂家-价格【荣盛耐材】 | 爱佩恒温恒湿测试箱|高低温实验箱|高低温冲击试验箱|冷热冲击试验箱-您身边的模拟环境试验设备技术专家-合作热线:400-6727-800-广东爱佩试验设备有限公司 | 萃取箱-萃取槽-PVC萃取箱厂家-混合澄清槽- 杭州南方化工设备 | 合肥抖音SEO网站优化-网站建设-网络推广营销公司-百度爱采购-安徽企匠科技 | 厚壁钢管-厚壁无缝钢管-小口径厚壁钢管-大口径厚壁钢管 - 聊城宽达钢管有限公司 | 采暖炉_取暖炉_生物质颗粒锅炉_颗粒壁炉_厂家加盟批发_烟台蓝澳采暖设备有限公司 | 劳动法网-专业的劳动法和劳动争议仲裁服务网 | 不锈钢酒柜|恒温酒柜|酒柜定制|酒窖定制-上海啸瑞实业有限公司 | 蓝莓施肥机,智能施肥机,自动施肥机,水肥一体化项目,水肥一体机厂家,小型施肥机,圣大节水,滴灌施工方案,山东圣大节水科技有限公司官网17864474793 | 宁夏活性炭_防护活性炭_催化剂载体炭-宁夏恒辉活性炭有限公司 | 武汉天安盾电子设备有限公司 - 安盾安检,武汉安检门,武汉安检机,武汉金属探测器,武汉测温安检门,武汉X光行李安检机,武汉防爆罐,武汉车底安全检查,武汉液体探测仪,武汉安检防爆设备 | 河南道路标志牌_交通路标牌_交通标志牌厂家-郑州路畅交通 | 粉末包装机-给袋式包装机-全自动包装机-颗粒-液体-食品-酱腌菜包装机生产线【润立机械】 | 九州网址_专注于提供网址大全分享推广中文网站导航服务 | 聚丙烯酰胺PAM-聚合氯化铝PAC-絮凝剂-河南博旭环保科技有限公司 巨野电机维修-水泵维修-巨野县飞宇机电维修有限公司 | 罐体电伴热工程-消防管道电伴热带厂家-山东沃安电气 | 六自由度平台_六自由度运动平台_三自由度摇摆台—南京全控科技 | 成都竞价托管_抖音代运营_网站建设_成都SEM外包-成都智网创联网络科技有限公司 | 大米加工设备|大米加工机械|碾米成套设备|大米加工成套设备-河南成立粮油机械有限公司 | 棉柔巾代加工_洗脸巾oem_一次性毛巾_浴巾生产厂家-杭州禾壹卫品科技有限公司 | 轻型地埋电缆故障测试仪,频响法绕组变形测试仪,静荷式卧式拉力试验机-扬州苏电 | 油漆辅料厂家_阴阳脚线_艺术漆厂家_内外墙涂料施工_乳胶漆专用防霉腻子粉_轻质粉刷石膏-魔法涂涂 | 长沙中央空调维修,中央空调清洗维保,空气能热水工程,价格,公司就找维小保-湖南维小保环保科技有限公司 | 重庆波纹管|重庆钢带管|重庆塑钢管|重庆联进管道有限公司 | 骨密度仪-骨密度测定仪-超声骨密度仪-骨龄测定仪-天津开发区圣鸿医疗器械有限公司 | 康明斯发电机,上柴柴油发电机,玉柴柴油发电机组_海南重康电力官网 | 耐磨焊丝,堆焊焊丝,耐磨药芯焊丝,碳化钨焊丝-北京耐默公司 | 专业生物有机肥造粒机,粉状有机肥生产线,槽式翻堆机厂家-郑州华之强重工科技有限公司 | 郑州宣传片拍摄-TVC广告片拍摄-微电影短视频制作-河南优柿文化传媒有限公司 | 塑料熔指仪-塑料熔融指数仪-熔体流动速率试验机-广东宏拓仪器科技有限公司 | 小型玉石雕刻机_家用玉雕机_小型万能雕刻机_凡刻雕刻机官网 |