symbol數據類型以及應用場景

在js中,Symbol是一種基本數據類型,是在ECMAScript 6 (ES6) 中引入的新特性。表示獨一無二

Symbol的定義

Symbol是不完整的構造函數,創建symbol對象時不需要new操作符,原因是通過 new 實例化的結果是一個 object 對象,而不是原始類型的 symbol。

var s = Symbol()
typeof s // 'symbol'

Symbol 方法接收一個參數,表示對生成的 symbol 值的一種描述。

var a = Symbol('a')
var b = Symbol('b')
a==b //false

即使是傳入相同的參數,生成的 symbol 值也是不相等的,因為 Symbol 本來就是獨一無二的意思。

Symbol的應用

  1. 作為對象的屬性
    可以作為對象的屬性來解決屬性覆蓋問題,避免引發不必要的代碼沖突
var a = Symbol('a')let obj = {}obj[a] = 'test'obj // {Symbol(a): 'test'}

值得注意的是我們無法使用".“來調用對象的Symbol屬性,所以必須使用”[]"來訪問Symbol屬性

  1. 降低代碼耦合
    當代碼中充斥著大量的魔法字符時,縱使是原開發者在經過一段時間后再回頭看也會變得難以理解,更不必說是交由后來開發者維護。

假如現有一個 Tabs 切換的功能:

if (type === 'basic') {return <div>basic tab</div>
}if (type === 'super') {return <div>super tab</div>
}

上面代碼中字符串 basic、super 就是與業務代碼無關的魔法字符,接下來使用 Symbol 對這塊代碼進行改造。

const tabTypes = {basic: Symbol(),super: Symbol(),
}if (type === tabTypes.basic) {return <div>basic tab</div>
}if (type === tabTypes.super) {return <div>super tab</div>
}

全局共享Symbol

如果我們想創建一個可供全局使用的symbol,那么我們需要用Symbol.for(),可以傳遞一個參數作為描述,該方法可以遍歷全局注冊表中的的Symbol,當搜索到相同描述,那么會調用這個Symbol,如果沒有搜索到,就會創建一個新的Symbol。

const a = Symbol.for('a')
const b = Symbol.for('a')
a === b // true

過程解析

1、首先通過Symbol.for()在全局注冊表中尋找描述為a的Symbol,而目前沒有符合條件的Symbol,所以創建了一個描述為a的Symbol
2、當聲明b并使用Symbol.for()在全局注冊表中尋找描述為a的Symbol,找到并賦值
3、比較a與b結果為true反映了Symbol.for()的作用

再來看看下面一段代碼

const a = Symbol('a')
const b = Symbol.for('a')
a === b // false

結果是false,與上面的區別僅僅在于第一個Symbol的創建方式,我們來分析。

1、使用Symbol(‘a’)直接創建,所以該Symbol(‘a’)不在全局注冊表中
2、使用Symbol.for(‘a’)在全局注冊表中尋找描述為a的Symbol,并沒有找到,所以在全局注冊表中又創建了一個描述為a的新的Symbol
3、秉承Symbol創建的唯一特性,所以a與b創建的Symbol不同,結果為false

Symbol.keyFor()獲取全局注冊表變量的描述

const a = Symbol('a')
const b = Symbol.for('a')
Symbol.keyFor(a) // undefined
Symbol.keyFor(b) // a

symbol對象不能用于數據運算,包括+、-、*、/等

const a = Symbol('a')
a+0 //Uncaught TypeError: Cannot convert a Symbol value to a number

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/42685.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/42685.shtml
英文地址,請注明出處:http://en.pswp.cn/web/42685.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

STL--棧(stack)

stack 棧是一種只在一端(棧頂)進行數據插入(入棧)和刪除(出棧)的數據結構,它滿足后進先出(LIFO)的特性。 使用push(入棧)將數據放入stack,使用pop(出棧)將元素從容器中移除。 使用stack,必須包含頭文件: #include<stack>在頭文件中,class stack定義如下: namespace std…

Druid 連接池在很多方面表現出色,但在實際應用中也可能會遇到一些缺陷或問題。

Druid 連接池是阿里巴巴開源的一個功能強大的數據庫連接池&#xff0c;它具有高性能、可靠性、可管理性、安全性和擴展性等特點。然而&#xff0c;盡管 Druid 連接池在很多方面表現出色&#xff0c;但在實際應用中也可能會遇到一些缺陷或問題。 1. **連接耗盡問題**&#xff1…

13 - matlab m_map地學繪圖工具基礎函數 - 介紹創建管理顏色映射的函數m_colmap和輪廓圖繪制顏色條的函數m_contfbar

13 - matlab m_map地學繪圖工具基礎函數 - 介紹創建管理顏色映射的函數m_colmap和輪廓圖繪制顏色條的函數m_contfbar 0. 引言1. 關于m_colmap2. 關于m_contfbar3. 結語 0. 引言 本篇介紹下m_map中用于創建和管理顏色映射函數&#xff08;m_colmap&#xff09;和 為輪廓圖繪制顏…

基于深度學習的電影推薦系統

1 項目介紹 1.1 研究目的和意義 在電子商務日益繁榮的今天&#xff0c;精準預測商品銷售數據成為商家提升運營效率、優化庫存管理以及制定營銷策略的關鍵。為此&#xff0c;開發了一個基于深度學習的商品銷售數據預測系統&#xff0c;該系統利用Python編程語言與Django框架&a…

SQLite 命令行客戶端 + Windows 批處理應用

SQLite 命令行客戶端 Windows 批處理應用 下載 SQLite 客戶端1. Bat 輔助腳本1. 執行SQL.bat執行 2. 導出Excel.bat執行效果 3. 導出HTML.bat執行效果 4. 清空-訂單表.bat5. 訂單表.bat 2. 測試 SQL1. 創建訂單表.sql2. 插入訂單表.sql3. 查詢訂單表.sql4. 清空訂單表.sql5. 刪…

Qt Qwt 圖表庫詳解及使用

文章目錄 Qt Qwt 圖表庫詳解及使用一、Qwt 概述二、安裝 Qwt1. 下載和編譯 Qwt2. 在項目中使用 Qwt三、Qwt 的基本使用1. 創建一個簡單的折線圖2. 添加圖例和自定義樣式四、Qwt 的交互功能1. 啟用縮放和平移2. 啟用數據點選擇五、Qwt 的高級特性1. 實時數據更新2. 多軸繪圖六、…

nvm 管理多版本 node

1、下載 先不安裝node 下載 nvm 1.1.10-setup.zip 解壓&#xff1a;nvm&#xff1a;https://nvm.uihtm.com/ 新建nodejs/node、nodejs/nvm文件夾用于存放node版本和nvm安裝路徑 安裝nvm&#xff1a;上述鏈接有安裝教程 查看是否安裝成功&#xff1a;重新打開cmd 輸入 nvm nv…

Hyper-V克隆虛擬機教程分享!

方法1. 使用導出導入功能克隆Hyper-V虛擬機 導出和導入是Hyper-V服務器備份和克隆的一種比較有效的方法。使用此功能&#xff0c;您可以創建Hyper-V虛擬機模板&#xff0c;其中包括軟件、VM CPU、RAM和其他設備的配置&#xff0c;這有助于在Hyper-V中快速部署多個虛擬機。 在…

深入理解基本數據結構:數組詳解

引言 在計算機科學中&#xff0c;數據結構是存儲、組織和管理數據的方式。數組作為最基礎的數據結構之一&#xff0c;廣泛應用于各種編程場景。在這篇博客中&#xff0c;我們將詳細探討數組的定義、特點、操作及其在不同編程語言中的實現。 什么是數組&#xff1f; 數組是一種…

原生android的內存性能提升方面的方案大致設計

一 測試目標&#xff1a; 以滿足用戶設備的內存性能和不殺后臺為目標。 1&#xff1a;滿足用戶設備的內存性能是指不出現因為內存原因導致的安卓設備死機&#xff0c;卡頓等問題。 2&#xff1a;滿足不殺后臺是指整個設備使用時&#xff0c;不出現后臺app被殺。 通常是估算如果…

構造函數注入@RequiredArgsConstructor

Api(tags "用戶管理接口") RequiredArgsConstructor RestController RequestMapping("users") public class UserController {private final IUserService userService;PostMappingApiOperation("新增用戶")public void saveUser(RequestBody U…

輸入框輸入值之后,檢索表格中是否存在輸入框中的值,存在就讓當前文字為紅色

this.searchValue為輸入框的值 createKeywordHtml_content(data) { if (data undefined) { return data; } if (typeof data ! string) { data String(data) } let value data.replace(this.searchValue, <span style"color:#FF5555">$&</span>…

來一組愛勝品1133DN PRO打印機的照片

剛拆箱的機器正面照片 打開前蓋正準備要安裝原裝耗材 下圖是原裝耗材&#xff0c;硒鼓型號是DR2833、碳粉盒型號是TN2833,鼓組件打印頁數12000頁&#xff0c;TN2833標準容量粉盒打印頁數1600頁/5%覆蓋率&#xff0c;TN2833H大容量粉盒打印頁數3000頁/5%覆蓋率、TN2833L超大容量…

Intel base instruction -- cvttsd2si

將截斷雙精度浮點數并轉換為有符號整數。 4958: 8b 05 82 49 00 00 mov 0x4982(%rip),%eax # 92e0 <age_to_colorBase> // eaxgvar_92e0 495e: 48 8d 15 7b 49 00 00 lea 0x497b(%rip),%rdx # 92e0 <age_to_colorBase&g…

慢性腎臟病-MR+轉錄組文獻

Identification of novel therapeutic targets for chronic kidney disease and kidney function by integrating multi-omics proteome with transcriptome - PMC (nih.gov) 數據和材料 Our pQTL summary data were acquired from previously published studies and can be f…

三. 根文件系統構建

根文件系統構建好以后就意味著我們已經擁有了一個完整的,可以運行的最小系統. 一. 根文件系統簡介 根文件系統一般也叫做 rootfs&#xff0c;那么什么叫根文件系統&#xff1f;Linux 中的根文件系統更像是一個文件夾或者叫做目錄,在這個目錄里面會有很多的子目錄,目錄下的文件…

《妃夢千年》第二十九章:朝中波瀾

第二十九章&#xff1a;朝中波瀾 自從被封為護國夫人后&#xff0c;林清婉在大周的地位愈發穩固&#xff0c;她的智慧和勇氣不僅贏得了皇上的信任&#xff0c;也獲得了朝中眾臣的敬佩。然而&#xff0c;這也引來了部分人的嫉妒和不滿&#xff0c;他們開始在暗中謀劃&#xff0…

AdaBoost集成學習算法理論解讀以及公式為什么這么設計?

本文致力于闡述AdaBoost基本步驟涉及的每一個公式和公式為什么這么設計。 AdaBoost集成學習算法基本上遵從Boosting集成學習思想&#xff0c;通過不斷迭代更新訓練樣本集的樣本權重分布獲得一組性能互補的弱學習器&#xff0c;然后通過加權投票等方式將這些弱學習器集成起來得到…

RightFont 8.7.0 Mac專業字體管理工具

RightFont 適用于 macOS 的終極字體管理器應用程序&#xff0c;提供無縫的字體管理體驗。它結合了速度、直觀的功能和專業的功能&#xff0c;使用戶能夠輕松預覽、安裝、組織和共享字體。 RightFont 8.7.0 Mac下載 RightFont 8.0的新增功能 RightFont 8.0 帶來了全新的智能選…

【電腦應用技巧】如何尋找電腦應用的安裝包華為電腦、平板和手機資源交換

電腦的初學者可能會直接用【百度】搜索電腦應用程序的安裝包&#xff0c;但是這樣找到的電腦應用程序安裝包經常會被加入木馬或者強制捆綁一些不需要的應用裝入電腦。 今天告訴大家一個得到干凈電腦應用程序安裝包的方法&#xff0c;就是用【聯想的應用商店】。聯想電腦我是一點…