TypeScript徹底解讀(26課時)_3.TypeScript徹底解讀-Symbol

ts中symbol的支持是按照es6的標準來的，只要咱們學會es6中的symbol，就能夠直接在ts中使用了

 

建立symbol

在example文件夾下新建symbol.ts

而後在根目錄的index.ts內引入咱們建立的symbol.ts

咱們這裏使用簡寫的形式：import './example/symbol' 後面的.ts是能夠省略掉的，這裏咱們就省略了

symbol是是es6中新增的一個數據基本類型和 String、Number、Boolean是相同的。是一種基本的數據類型，用來表示一個第一無二的值、它和任何值都不一樣。

 

這裏咱們建立還一個Symbol報錯。這是由於，使用es6的語法，須要引入項目的庫

在lib這裏引入

這裏的es2015就是es6是同樣的

這裏咱們使用簡寫es6

 

這裏直接使用Symbol()做爲函數來建立，而沒有使用New來建立。這裏是不須要使用New的

如今這個s上就是一個第一無二的Symbol的值

這裏我用console.log輸出這個s的，可是咱們是用console就報錯了。

 

這裏給咱們的提示，須要在lib的節點上配置上dom

加上dom的配置就能夠了；

npm start：又提示我找不到sybol的的文件

沒辦法我又把.ts的後綴加上了。這樣就能夠正常的訪問到了。

解決ts引用的問題：找到咱們的配置文件 我發現我漏了.ts .tsx前面的點了。加上去在試試。這樣就能夠省略掉.ts的後綴了。import './example/symbol'

頁面輸出的結果

兩個值的比較

輸出另外定義的一個值，看似這兩個值輸出的console的結果都是同樣的

既然兩個值都是獨一無二的 那麼咱們對兩個symbol

這裏直接就編譯不經過了

由於這裏永遠返回的是false，直接就報錯了

那麼咱們把這裏註釋掉。直接複製到瀏覽器的命令裏面去執行看看結果

瀏覽器裏面輸出的結果就是false。這樣就體現了symbol他是獨一無二的

在使用Symbol方法建立值的時候，能夠給他傳遞一個參數例如這裏咱們傳一個字符串。這個字符串是給Symbol作標識用的

再定義一個symbol而後也傳入了字符串wjw，把這段代碼複製到瀏覽器的命令行內

而後shitf+enter，另起一行，輸出這個兩個值的對比。仍是fasle，這是由於symbol的值就是第一無二的。

咱們傳入的字符串只是給它一個標識。只是爲了後期打印出來能看到是哪一個標識建立的值，但他們彼此之間是互不相等的

比如是兩我的能夠起同一個名字，可是他們是不一樣的兩我的

例如咱們這裏傳入一個數字123。它會在內部先調用toString而後再給他起123的字符串的這個名字

傳入一個對象也是錯的。在咱們的代碼裏裏面是不行的，

可是咱們能夠在瀏覽器裏試一下

symbol不能夠和其餘類型的值作運算

可是symbol能夠轉換成字符串和布爾類型的

symbol自身帶了toString的方法

symbol能夠做爲屬性名

先講一下es6中新的語法

es6中 把一個變量或者表達式做爲屬性名。輸出的結果和上面同樣

屬性名還能夠用一個拼接的字符串。es6的嵌套寫法

symbol做爲屬性名。symbol做爲屬性名有一個好處，stmbol是獨一無二的，就會保證這個屬性名不會被別的變量或者屬性名給覆蓋。

 

只能夠經過s5這個屬性名去修改屬性的值

不能經過這種形式去修改。symbol做爲屬性值 只能經過info2.[s5]這種形式

通常的使用 info.name或者是info['name']這兩種方式

屬性名的遍歷

symbol做爲屬性名有幾種方式是遍歷不到屬性名的

Object.keys()這個方法接收一個對象，返回這個對象全部屬性名構成的數組

依然沒有symbol的屬性名

Object.getOwnPropertyNames 一樣也不行

 

JSON.stringify()會把傳入的對象轉換成一個字符串

返回一個對象裏面全部使用symbol的屬性名

還有一種使用es6新提供的：Reflect.ownKeys方法

返回這個對象裏面全部的屬性值

 

symbol的靜態方法

Symbol.for()：在建立重複的傳入的值的symbol時候，在全局範圍（當前頁面，包含的iframe頁面和ServiceWorker）內搜索並判斷是否建立過更名稱的，若是建立過就返回原來的值

Symbol.keyFor()

返回Symbol的for方法註冊的全局的值，建立的值的標識

若是咱們打印用Symbol直接去建立的值的 是沒有返回結果的

11個內置的symbol值

平時不多用，也能夠了解一下

es6提供了內置的symbol值

第二個內置：可讀寫的布爾值，

若是咱們把 Symbol.isConcatSpreadable 設置爲fasle 就不會扁平化輸出

arr1[Symbol.isConcatSpreadable]默認是undefined

修改以後的值是false

第三個內置：

複製到瀏覽器裏面去去執行，由於咱們的這個C這個類繼承了Array，因此它的效果和Array構造函數是差很少的，支不過多了一各getName方法

 

a是經過c這個實例建立的。咱們把a叫作c的衍生對象

 

它會認爲a這個衍生對象，既是a的實例也是Array的實例

這個方法做用是創造衍生對象的構造函數

 static get [Symbol.species] () {
        return Array
    }

 

Symbol.match

能夠利用這個特性在console那裏作計算再返回值

和math方法相同的還有三個方法

//Symbol.replace
//Symbol.search
//Symbol.split

 

 

 

 

iterator：

指向改數組的默認遍歷器方法，done表示是否便利完

能夠還寫，能夠自定義這個遍歷器方法

Symbol.toPrimitive

對象的這個值指向一個方法

咱們在作自增運算的時候，須要把這個對象轉換成數值類型，因此這裏的的type是number類型

模板字符串，字符串的拼接

複製到conole中打印出來的是string類型。ts和js是寫區別的

 

 

Symbol.toStringTag

這裏咱們用屬性值的形式，它的值能夠是一個字符串，也能夠是一個函數(函數就是方法)

正常對象調用toString應該輸出object，這裏由於定義了Symbol.toStringTag方法 因此輸出了後面的定義的字符串

 

這裏咱們做爲一個方法，返回的也是一樣的結果

 

Symbol.unscopables

with是廢棄的方法，這裏如今瀏覽器中測試，定義一個數組裏面有a和b兩個屬性值，用with分別打印出這兩個屬性值

咱們在with裏面並不須要 obj6.a這種形式去打印，只須要把這個對象傳入with就能夠了，全部的屬性都是能夠這麼去訪問的

 

 

經過Symbol.unscopables輸出的這些方法，例如這個findIndex是沒有辦法調用到的。

Symbol.unscopables輸出的這個屬性值在with裏面被過濾掉了

filter是js自帶的方法

 

ES6推薦看阮一峯的ES6入門指南