1.什么是symbol

1.什么Symbol?

Symbol是ES6中新增的一種數(shù)據(jù)類型, 被劃分到了基本數(shù)據(jù)類型中

基本數(shù)據(jù)類型: 字符串、數(shù)值、布爾、undefined、null、Symbol

引用數(shù)據(jù)類型: Object

2.Symbol的作用

用來(lái)表示一個(gè)獨(dú)一無(wú)二的值

3.格式

let xxx=Symbol(‘標(biāo)識(shí)字符串’);

4.為什么需要Symbol?

為了避免第三方框架的同名屬性被覆蓋

在企業(yè)開發(fā)中如果需要對(duì)一些第三方的插件、框架進(jìn)行自定義的時(shí)候
可能會(huì)因?yàn)樘砑恿送膶傩曰蛘叻椒? 將框架中原有的屬性或者方法覆蓋掉
為了避免這種情況的發(fā)生, 框架的作者或者我們就可以使用Symbol作為屬性或者方法的名稱

5.如何區(qū)分Symbol?

在通過(guò)Symbol生成獨(dú)一無(wú)二的值時(shí)可以設(shè)置一個(gè)標(biāo)記

這個(gè)標(biāo)記僅僅用于區(qū)分, 沒(méi)有其它任何含義

6.如果特殊情況需要讀取這個(gè)標(biāo)記的話

symbol類型可以轉(zhuǎn)化為boolean或者字符串，轉(zhuǎn)化為字符串時(shí)前面會(huì)加上symbol（wyx），不方便

可以直接通過(guò)description屬性獲得symbol函數(shù)的字符串標(biāo)識(shí)參數(shù)

7.使用Symbol類型作為屬性名

對(duì)象的屬性要么是字符串，要么是symbol類型

默認(rèn)是字符串，所以不加‘’也可以，如果需要類型為symbol，需要使用[]

不可以用.來(lái)訪問(wèn),因?yàn)辄c(diǎn)運(yùn)算符后面總是字符串

Symbol 值作為屬性名時(shí)，該屬性還是公開屬性，不是私有屬性。

8.舉個(gè)栗子

//后面的括號(hào)可以給symbol做上標(biāo)記便于識(shí)別
let name=Symbol('name');
let say=Symbol('say');
let obj= {
  //如果想 使用變量作為對(duì)象屬性的名稱，必須加上中括號(hào)，.運(yùn)算符后面跟著的都是字符串
  [name]: 'lnj',
  [say]: function () {
    console.log('say')
  }
}
obj.name='it666';
obj[Symbol('name')]='it666'
console.log(obj)

我們假設(shè)obj是一個(gè)外部框架里面的對(duì)象，原始狀態(tài)是這樣的

執(zhí)行obj.name='it666'; obj[Symbol('name')]='it666'

都沒(méi)有覆蓋原來(lái)的it666，因?yàn)槎际仟?dú)一無(wú)二的，那么就默認(rèn)新創(chuàng)建一個(gè)name屬性

2.注意點(diǎn)

• Symbol是基本數(shù)據(jù)類型?。。。〔灰觧ew哦
• 后面括號(hào)可以傳入一個(gè)字符串，只是一個(gè)標(biāo)記，方便我們閱讀，沒(méi)有任何意義
• 類型轉(zhuǎn)化的時(shí)候不可轉(zhuǎn)化為數(shù)值

//只能轉(zhuǎn)化為字符串和布爾值
console.log(String(name));
console.log(Boolean(name));
console.log(Number(name))

• 不能做任何運(yùn)算

let name=Symbol('name');
console.log(name+111)
console.log(name+'ccc')
//全部報(bào)錯(cuò)

• symbol生成的值作為屬性或者方法的時(shí)候，一定要保存下來(lái)，否則后續(xù)無(wú)法使用

let name=Symbol('name');
let obj={
  // name:'lnj',
    [Symbol('name')]:'lbj'
}
console.log(obj.name);  //訪問(wèn)不到，因?yàn)? [Symbol('name')]又是一個(gè)新的值，和上面的name不是同一個(gè)

• for循環(huán)遍歷對(duì)象的時(shí)候是無(wú)法遍歷出symbol的屬性和方法的

Object.getOwnPropertySymbols()

let name=Symbol('name');
let obj={
  [name]:'lnj',
    age:12,
    teacher:'wyx'
}
for(let key in obj){
    console.log(key)   //只能打印出age和teacher
}
//這個(gè)方法可以單獨(dú)取出Symbol(name)
console.log(Object.getOwnPropertySymbols(obj))

3. symbol的應(yīng)用

1.在企業(yè)開發(fā)中如果需要對(duì)一些第三方的插件、框架進(jìn)行自定義的時(shí)候

可能會(huì)因?yàn)樘砑恿送膶傩曰蛘叻椒? 將框架中原有的屬性或者方法覆蓋掉

為了避免這種情況的發(fā)生, 框架的作者或者我們就可以使用Symbol作為屬性或者方法的名稱

2.消除魔術(shù)字符串

魔術(shù)字符串：在代碼之中多次出現(xiàn)、與代碼形成強(qiáng)耦合的某一個(gè)具體的字符串或者數(shù)值。風(fēng)格良好的代碼，應(yīng)該盡量消除魔術(shù)字符串，改由含義清晰的變量代替。

const gender = {
   //這樣就說(shuō)明man就是一個(gè)獨(dú)一無(wú)二的值，不用再man:'man'   
    man: Symbol(),
    woman: Symbol(),
}
function isMan(gender) {
    switch (gender) {
        case gender.man:
            console.log('男性');
            break;
        case gender.woman:
            console.log('女性');
            break
    }
}
isMan(gender.man)  //男性

3.為對(duì)象定義一些非私有的、但又希望只用于內(nèi)部的方法。

由于以 Symbol 值作為鍵名，不會(huì)被常規(guī)方法遍歷得到。我們可以利用這個(gè)特性，為對(duì)象定義一些非私有的、但又希望只用于內(nèi)部的方法。

注意：symbol并不能實(shí)現(xiàn)真正的私有變量的效果，只是不能通過(guò)常規(guī)的遍歷方法拿到symbol類型的屬性而已

再來(lái)復(fù)習(xí)一下對(duì)象的遍歷方法

• for (let xx in obj) :i代表key
• for (let xx of obj)：不是自帶的哈
• Object.keys(obj) :返回包含key的數(shù)組
• Object.values(obj) :返回包含value的數(shù)組
• Object.getOwnPropertyNames() ：返回包含key的數(shù)組

上述的所有方法都是遍歷不到symbol類型的（注意，是遍歷時(shí)取不到symbol，并不是說(shuō)我們?cè)L問(wèn)不到對(duì)象的symbol類型）

可以遍歷到symbol的方法：

• Object.getOwnPropertySymbols() ：返回對(duì)象中只包含symbol類型key的數(shù)組
• Reflect.ownKeys() ：返回對(duì)象中所有類型key的數(shù)組（包含symbol）

let _password = Symbol('password')
const obj = {
    name: '小明',
    gender: 'male',
    [_password]: '11038'
}
for (let item in obj) {
    console.log(item);
}
console.log(Object.keys(obj));
console.log(Object.values(obj));
console.log(Object.getOwnPropertyNames(obj));
console.log(Object.getOwnPropertySymbols(obj));
console.log(Reflect.ownKeys(obj))
// 輸出11038，所以還是可以直接訪問(wèn)到symbol類型的屬性，所以symbol并不能真正實(shí)現(xiàn)私有變量的設(shè)定，所以一般只用于定義一些非私有的、但又希望只用于內(nèi)部的方法
console.log(obj[_password]);

輸出如下：

4.symbol自帶的方法

1.symbol.for()

因?yàn)閟ymbol類型的值都是獨(dú)一無(wú)二的，但有時(shí)，我們希望重新使用同一個(gè) Symbol 值，Symbol.for()方法可以做到這一點(diǎn)。它接受一個(gè)字符串作為參數(shù)，然后搜索有沒(méi)有以該參數(shù)作為名稱的 Symbol 值。如果有，就返回這個(gè) Symbol 值，否則就新建一個(gè)以該字符串為名稱的 Symbol 值，并將其注冊(cè)到全局。

let s1 = Symbol.for('foo');
let s2 = Symbol.for('foo');

s1 === s2 // true

2.symbole.keyFor()

由于Symbol()寫法沒(méi)有登記機(jī)制，所以每次調(diào)用都會(huì)返回一個(gè)不同的值。

Symbol.keyFor()方法返回一個(gè)已登記的 Symbol 類型值的key。

let s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"

let s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined

總結(jié)

到此這篇關(guān)于js中symbol類型及symbol三大應(yīng)用場(chǎng)景詳解的文章就介紹到這了,更多相關(guān)js symbol類型及應(yīng)用場(chǎng)景內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論