1.什么是symbol

1.什么Symbol?

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

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

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

2.Symbol的作用

用來表示一個獨一無二的值

3.格式

let xxx=Symbol(‘標識字符串’);

4.為什么需要Symbol?

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

在企業(yè)開發(fā)中如果需要對一些第三方的插件、框架進行自定義的時候
可能會因為添加了同名的屬性或者方法, 將框架中原有的屬性或者方法覆蓋掉
為了避免這種情況的發(fā)生, 框架的作者或者我們就可以使用Symbol作為屬性或者方法的名稱

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

在通過Symbol生成獨一無二的值時可以設置一個標記

這個標記僅僅用于區(qū)分, 沒有其它任何含義

6.如果特殊情況需要讀取這個標記的話

symbol類型可以轉化為boolean或者字符串，轉化為字符串時前面會加上symbol（wyx），不方便

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

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

對象的屬性要么是字符串，要么是symbol類型

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

不可以用.來訪問,因為點運算符后面總是字符串

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

8.舉個栗子

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

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

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

都沒有覆蓋原來的it666，因為都是獨一無二的，那么就默認新創(chuàng)建一個name屬性

2.注意點

• Symbol是基本數(shù)據(jù)類型?。。?！不要加new哦
• 后面括號可以傳入一個字符串，只是一個標記，方便我們閱讀，沒有任何意義
• 類型轉化的時候不可轉化為數(shù)值

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

• 不能做任何運算

let name=Symbol('name');
console.log(name+111)
console.log(name+'ccc')
//全部報錯

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

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

• for循環(huán)遍歷對象的時候是無法遍歷出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
}
//這個方法可以單獨取出Symbol(name)
console.log(Object.getOwnPropertySymbols(obj))

3. symbol的應用

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

可能會因為添加了同名的屬性或者方法, 將框架中原有的屬性或者方法覆蓋掉

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

2.消除魔術字符串

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

const gender = {
   //這樣就說明man就是一個獨一無二的值，不用再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.為對象定義一些非私有的、但又希望只用于內部的方法。

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

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

再來復習一下對象的遍歷方法

• 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類型的（注意，是遍歷時取不到symbol，并不是說我們訪問不到對象的symbol類型）

可以遍歷到symbol的方法：

• Object.getOwnPropertySymbols() ：返回對象中只包含symbol類型key的數(shù)組
• Reflect.ownKeys() ：返回對象中所有類型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，所以還是可以直接訪問到symbol類型的屬性，所以symbol并不能真正實現(xiàn)私有變量的設定，所以一般只用于定義一些非私有的、但又希望只用于內部的方法
console.log(obj[_password]);

輸出如下：

4.symbol自帶的方法

1.symbol.for()

因為symbol類型的值都是獨一無二的，但有時，我們希望重新使用同一個 Symbol 值，Symbol.for()方法可以做到這一點。它接受一個字符串作為參數(shù)，然后搜索有沒有以該參數(shù)作為名稱的 Symbol 值。如果有，就返回這個 Symbol 值，否則就新建一個以該字符串為名稱的 Symbol 值，并將其注冊到全局。

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

s1 === s2 // true

2.symbole.keyFor()

由于Symbol()寫法沒有登記機制，所以每次調用都會返回一個不同的值。

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

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

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

總結

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

最新評論