目錄
basic
symbol for
symbol keyfor
symbol 不可強制轉換
obj中symbol key的取得
Symbol.hasInstance
Symbol.isConcatSpreadable
Symbol.toPrimitive
首頁 web前端 js教程 ES6中Symbol相關知識的介紹(程式碼範例)

ES6中Symbol相關知識的介紹(程式碼範例)

Nov 26, 2018 pm 03:59 PM
javascript typescript

這篇文章帶給大家的內容是關於ES6中Symbol相關知識的介紹(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

symbol是es6出的一種類型,他也是屬於原始類型的範疇(string, number, boolean, null, undefined, symbol)

basic

let name = Symbol('xiaohesong')
typeof name // 'symbol'
let obj = {}
obj[name] = 'xhs'
console.log(obj[name]) //xhs
登入後複製

symbol for

這個東西是可共享,在創建的時候會檢查全局是否尋在這個key的symbol.如果存在就直接返回這個symbol,如果不存在就會創建,並且在全局註冊。

let uid = Symbol.for("uid");
let object = {
    [uid]: "12345"
};

console.log(object[uid]);       // "12345"
console.log(uid);               // "Symbol(uid)"

let uid2 = Symbol.for("uid");

console.log(uid === uid2);      // true
console.log(object[uid2]);      // "12345"
console.log(uid2);              // "Symbol(uid)"
登入後複製
此處所說的共享是全局性的共享,類似於global scope,是整個大環境下的共享.

symbol keyfor

let uid = Symbol.for("uid");
console.log(Symbol.keyFor(uid));    // "uid"

let uid2 = Symbol.for("uid");
console.log(Symbol.keyFor(uid2));   // "uid"

let uid3 = Symbol("uid");
console.log(Symbol.keyFor(uid3));   // undefined
登入後複製

全局註冊表不存在uid3這個共享的symbol .所以取不出對應的key.由此可見,這個是獲取對應的key.

symbol 不可強制轉換

let uid = Symbol('uid')
uid + ''
登入後複製

這裡會報錯,根據規範,他會把uid轉換成字串進行相加。如果真的相加,可以先String(uid)之後再相加,不過目前看來,似乎沒什麼意義。

obj中symbol key的取得

let uid = Symbol('uid')
let obj = {
    [uid]: 'uid'
}

console.log(Object.keys(obj)) // []
console.log(Object.getOwnPropertyNames(obj)) // []
console.log(Object.getOwnPropertySymbols(obj)) // [Symbol(uid)]
登入後複製

es6針對這個,加入了Object.getOwnPropertySymbols方法。

是不是感覺很少用到Symbols.其實es6內部用的還是不少的。

Symbol.hasInstance

每個函數都有這個方法。或許你對這個方法不是很熟,他其實就是instanceof所做的事。沒錯,es6給你重寫了這個方法。

function Xiao(){}
const xiao = new Xiao
xiao instanceof Xiao // true
登入後複製

實際上es6幫你那麼乾了

Xiao[Symbol.hasInstance](xiao)
登入後複製

這個是內部的方法,不支援重寫,當然,我們可以在原型上改寫。

Object.definePrototype(Xiao, Symbol.hasInstance, {
   value: (v) : Boolean(v)
})
const x = new Xiao
x instanceof Xiao //true
0 instanceof Xiao //false
1 instanceof Xiao //true
登入後複製

可以發現,我們改寫他傳回對應的是否為boolean型別。

Symbol.isConcatSpreadable

這個和其他的一些屬性不同,他是預設不存在一些標準物件上。簡單的使用

let objs = {0: 'first', 1: 'second', length: 2, [Symbol.isConcatSpreadable]: true}
['arrs'].concat(objs) //["arrs", "first", "second"]
登入後複製

Symbol.toPrimitive

這個用的就多了,進行類型轉換的時候,物件會進行嘗試轉換成原始類型,就是透過toPrimitive .這個方法,標準類型的原型上都存在。
進行型別轉換的時候,toPrimitive會被強制的呼叫一個參數,在規範中這個參數被稱為hint. 這個參數是三個值('number ', 'string', 'default')其中的一個。
顧名思義,string傳回的是string, number傳回的是number,default是沒有特別指定,預設。
那麼什麼是預設的情況呢?大多數的情況下,預設情況就是數字模式。 (日期除外,他的預設視為字串模式)
其實在型別轉換時呼叫預設狀況的也不是很多。如(==, )或將參數傳遞給Date的建構參數的時候。

  • number mode 在數字情況下的行為(優先權從高到低)

  • 首先呼叫valueOf,如果是原始型別,那就返回。

  • 如果前面不是原始值,那麼就嘗試呼叫toString,如果是原始值,那麼就回傳

  • 如果都不存在,那麼就報錯

  • string mode 在字串的情況下,行為略有不同(優先權從高到低)

  • 先呼叫toString ,如果是原始值,那麼就回傳

  • 如果前面不是原始值,那麼就嘗試呼叫valueOf,如果是原始值,那麼就回傳

  • 拋出錯誤

嗯,是不是感覺挺繞的,是啊,程式碼闡述下嘛。

let obj = {
    valueOf: function(){console.log('valueOf')},
    toString: function(){console.log('toString')}
}
// console.log value is
obj + 2 //valueOf
obj == 2 // valueOf
Number(obj) // valueOf
String(obj) // toString
登入後複製

透過上面的輸出,可以發現大多數的情況都是先呼叫valueOf.
包含預設的情況,他的預設是呼叫的數字模式,而且絕大數都是呼叫的數字模式,可以發現toString是呼叫了string的模式。所以你可以認為,基本上就是數字模式,除非很顯示的是字串模式。
對於這個呼叫的模式還不是很清楚?沒事,es6把這個內部的方法對外暴露出來了,我們可以改寫他,輸出這個hint的型別。來

function Temperature(degrees) {
    this.degrees = degrees;
}

Temperature.prototype[Symbol.toPrimitive] = function(hint) {
    console.log('hint is', hint)
};

let freezing = new Temperature(32);

freezing + 2 // ..
freezing / 2 // ..
...
登入後複製

上面的類型,你可以試試看。

以上是ES6中Symbol相關知識的介紹(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

JavaScript與WebSocket:打造高效率的即時影像處理系統 JavaScript與WebSocket:打造高效率的即時影像處理系統 Dec 17, 2023 am 08:41 AM

JavaScript是一種廣泛應用於Web開發的程式語言,而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能,我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統,並提供具體的程式碼範例。首先,我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備,可以擷取即時的影像數

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介:在進行前端開發中,我們常常需要處理與後端介面的交互,而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法,並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時,服務

See all articles