Symbol能干什么！為什么要掌握它?

genedna 發布于2019-08-26 18:42 / 553人閱讀

摘要：說到就先來說下中的基礎數據類型，就是中的第六種基礎數據類型用一句話來描述那就是獨一無二的使用基本使用中的標識一般放聲明的變量不相等作為語法可以將的值作為屬性循環無法遍歷屬性方法可以拿到所有的屬性我們上面說是獨一無二的但是有的時候我希望可以復

說到Symbol就先來說下 js中的基礎數據類型 string、number、boolean、null、undefined，Symbol就是js中的第六種基礎數據類型

用一句話來描述Symbol,那就是獨一無二! Symbol的使用

基本使用

const s1 = Symbol("song");
const s2 = Symbol("song");
// Symbol中的標識一般放number、string
console.log(s1 === s2); // Symbol聲明的變量不相等

Symbol作為key

    const s1 = Symbol("song");
    let obj = {
        [s1]:"song", // es6語法[] 可以將symbol的值作為屬性
        age:18
    }
    for(let key in obj){ // for循環無法遍歷symbol屬性
        console.log(obj[key])
    }
    // Reflect.ownKeys方法可以拿到所有的key屬性
    Reflect.ownKeys(obj).forEach(key=>{
        console.log(obj[key]);
    })

Symbol.for

我們上面說symbol是獨一無二的,但是有的時候我希望可以復用聲明過的symbol，可以使用for語法，如果symbol不存在則聲明，如果存在則將創建過的symbol返回回來！

const s1 = Symbol.for("song");
const s2 = Symbol.for("song");

console.log(s1 === s2);
console.log(Symbol.keyFor(s2)); // 可以通過keyFor 獲取symbok的key

Symbol元編程

元編程：可以去對原生js的操作進行修改，說白了就是可以更改原生js的行為

ES6提供了11個內置的Symbol值

1.Symbol.hasInstance

重寫instanceof默認行為

const instance = {
    [Symbol.hasInstance](value){
        return "a" in value
    }
}
// 當調用 instanceof 方法，會默認調用instance上的hasInstance方法
console.log({a:1} instanceof instance)

2.Symbol.isConcatSpreadable

重寫數組的展開行為

const arr = [1,2,3];
arr[Symbol.isConcatSpreadable] = false;
console.log(arr.concat([1,2,3]));

3.Symbol.match / split / search / replace

重寫字符串的match,split,search方法

const obj = {
    [Symbol.match](value){
        return value.length === 3
    }
}
console.log("abc".match(obj));

4.Symbol.species

創建衍生對象時,指定構造函數

class MyArray extends Array{
    constructor(...args){
        super(...args);
    }
    static get [Symbol.species](){
        return Array; // 創建衍生對象會用Array作為構造函數
    }
}
const arr = new MyArray(1,2,3);
const newArr = arr.map(item=>item*2);
console.log(newArr instanceof MyArray); // 默認衍生對象也是MyArray的實例

5.Symbol.toPrimitive

重寫數據類型轉化

const obj = {
    [Symbol.toPrimitive](type){ // type number string default
        return 123;
    }
}
console.log(obj*123);

6.Symbol.toStringTag

重寫toString方法

const obj = {
  [Symbol.toStringTag]: "xxx"
};
console.log(Object.prototype.toString.call(obj)); // [object xxx]

7.Symbol.unscopables

重寫哪些屬性被with所排除

console.log(Array.prototype[Symbol.unscopables]); // 哪些方法不能再with中使用
with(Array.prototype){ // 直接調用數組原型上的方法
    forEach.call([1,2,3],element => {
        console.log(element)
    });
}

class MyClass {
  eat() {}
  get [Symbol.unscopables]() {
    return { eat: true }; // 不能在with下使用
  }
}
with (MyClass.prototype) {
  console.log(eat);
}

還差最后一個Symbol.iterator，留個小尾巴，大家自己踩一踩看看這個有什么用！！這個面試經常會被問哦~

到此我們將Symbol的用法整個過了一遍，當然一般元編程在開發的時候還是很少用到呢！不過我們已經具備改寫js語言本身的能力啦!

`歡迎持續關注公眾號：「前端優選」
技術持續更新，請持續關注......`

云服務器 GPU云服務器大數據要掌握什么學習深度學習要掌握什么前端需要掌握什么大數據需要掌握什么

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110313.html

云服務器能干什么

摘要：在阿里云服務器安裝好操作系統之后，安裝好軟件。所以，如果你家路由器自帶接口，且提供動態域名解析服務，可以將自家路由器打造成私有的網盤。于是很多公司想辦法搭建公司服務器，存放在公司內部服務器是啥？就是一個24小時不斷電的電腦，有linux系統，windows2003-2013，你可以用他來掛qq，掛軟件，掛一切你想掛的，除了游戲，因為他本身是用來為大家提供遠程信息處理服務的，那么話又說回來了，...

young.li 2019-04-24 19:27 評論0 收藏0
【JS進階】你真的掌握變量和類型了嗎

摘要：本文從底層原理到實際應用詳細介紹了中的變量和類型相關知識。內存空間又被分為兩種，棧內存與堆內存。一個值能作為對象屬性的標識符這是該數據類型僅有的目的。導讀變量和類型是學習JavaScript最先接觸到的東西，但是往往看起來最簡單的東西往往還隱藏著很多你不了解、或者容易犯錯的知識，比如下面幾個問題： JavaScript中的變量在內存中的具體存儲形式是什么？ 0.1+0.2為什...

fuyi501 2019-08-26 13:58 評論0 收藏0
快速掌握JavaScript面試基礎知識(一)

摘要：根據調查，自年一來，是最流行的編程語言。在一個函數體中聲明的變量和函數，周圍的作用域內無法訪問。也就是說被大括號包圍起來的區域聲明的變量外部將不可訪問。一個常見的誤解是使用聲明的變量，其值不可更改。譯者按：總結了大量JavaScript基本知識點，很有用！原文: The Definitive JavaScript Handbook for your next developer ...

acrazing 2019-08-22 13:57 評論0 收藏0
ES6 的 for..of 和 Generator，從偽數組 jQuery 對象說起

摘要：引用自可迭代對象和迭代器不以規矩，不成方圓為了使某個對象成為可迭代對象象，它必須實現方法，也就是說，它得有一個是的屬性。的遍歷，絕對應該用。 pseudo 英 [sju:d??] 美 [su:do?]adj.假的，虛偽的n.[口]假冒的人，偽君子 pseudo-array 英 [sju:d???re?] 美 [sju:d???re?][計] 偽數組 jQuery 對象是偽數組兩個...

Harriet666 2019-08-21 10:39 評論0 收藏0
手寫call、apply、bind及相關面試題解析

摘要：我是前端我的全名是我是一個前端指向接收多個參數，第一個是返回值返回值是一個函數上下文的，不會立即執行。柯里化相關講解請移步簡版的實現就算完成了歡迎吐槽點贊它們有什么不同？怎么用？ call 接收多個參數，第一個為函數上下文也就是this，后邊參數為函數本身的參數。 let obj = { name: 一個 } ...

TwIStOy 2019-08-23 14:48 評論0 收藏0