一道題開始認識Symbol

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

最近每天學習的時候，發現了一道很有趣的面試題

1.const [a, b] = { a: 100, b: 200 }
2.console.log(a)
3.console.log(b)
如何在不改變1的情況下，讓代碼不報錯

這個時候，我突然想起來，之前看紅寶書的時候，有過這么一篇內容

 最后我的解題代碼為

Object.prototype[Symbol.iterator] = function(){
    return Object.values(this)[Symbol.iterator]
}
const [a, b] = { a: 100, b: 200 }
console.log(a)
console.log(b)

試了下，果然ok

 接下來給大家分享下我在紅寶書的基礎上，在網上找到的幾個基礎資料，方便大家理解代碼

1.什么是symbol

首先symbol是es6新增的型別，它是一個基本型別，symbol英文翻譯是符號的意思，

在敘述symbol之前，推出一個概念，“以操作目標為程式本身的行為特性的編程，我們稱為元編程，”

我們已知symbol是es6新增型別，按照邏輯推演：作為新增的型別，symbol一定是為了彌補了之前的不足，所以才出現的，是這樣的嗎？

首先我們說說它的特別之處：

symbol屬性值對應的值是唯一的，這解決了命名沖突的問題，類似于id的作用，
symbol值不能與其他資料進行計算，包括與字串拼接，
for/in ，for/of遍歷時不會遍布symbol屬性
這樣看是不是覺得沒什么特別的？最多也就彌補了命名沖突的問題，

 下面推出第二個問題：

2.Iterotor是什么？

Iterator是一個遍歷器的介面，是部署在資料結構上的，很多資料結構原生具備Iterator介面，這就意味著，我們不需要任何處理就可以使用for/of了，擁有symbol.Iterator屬性回傳的物件，都會在使用for/of時被當作Iterator介面當這個物件符合Iterator介面的標準時，for/of就可以完成任務，不符合就會報錯！

刨除這個問題，我們知道symbol可以作為屬性值存在，并且它具有唯一的特性，舉個栗子：

直接let s = Symbol();測驗s就是Symbol型別了，怎么說他是唯一的呢？
let s = Symbol(); let ss = Symbol(); s == ss ; 結果是false；或者
let s = Symbol('a'); let ss = Symbol('a'); s == ss ; 結果是false

有人會好奇Symbol('a')里面的引數a又是怎么回事呢？字串a表示一種修飾，對你當前創建的Symbol型別的一種修飾，作為區分使用，否則當你創建多個Symbol資料時，容易混淆，

現在我們回過頭說Iterotor是symbol的內置符號，而字串a是自定義的符號，

3.symbol的內置符號symbol.Iterator，有什么用？

這個符號可以是任意物件上的一個專門屬性，語言機制會自動的在這個屬性上尋找一個方法，這個方法會構造一個迭代器來迭代這個物件的值，這個方法就是next方法，...展開和for/of回圈會自動使用它，我們可以自定義symbol.iterator屬性為任意物件值定義自己的迭代器邏輯，他將覆寫默認的迭代器，相當于是定義了一種元編程行為，提供給Javascript其他部分（也就是運算子和回圈結構）在處理定義的物件時使用，

在Js中迭代器物件實作了可迭代協議，迭代器物件由Symbol.iterator屬性的值回傳，
Symbol.iterator屬性的值是一個函式，它回傳一個迭代器物件，
迭代器指的是擁有next方法的物件，
該next方法必須回傳一個帶有value和done的物件，

4.為什么會出現for..of?

為了理解條件陳述句，我們曾想象JavaScript解釋器在源代碼中會經過不同路徑，而回圈陳述句則是把這些路徑彎曲又折回起點，以重復執行代碼中的某部分，

es6定義了一個新回圈陳述句：for/of，這種新回圈雖然使用for關鍵字，但它們是完全不一同的兩種回圈，你說和for/in像不像？為什么？

for/of回圈是專門用于可迭代物件的，什么是可迭代物件呢？

我們前文提到具有symbol.iterator屬性的物件就是可以迭代的，而這個物件就是可迭代物件，

物件本身默認是不可迭代的，運行時嘗試對常規物件使用for/of會拋出TypeError:

let o={x:1,y:2,z:3};
for(let element of o){//拋出TypeError,因為o不是迭代的物件
    console.log(element);
}

如果你想迭代物件，可以使用for/in回圈，或者基于Object.keys()方法的結果使用for/of：

let o={x:1;y:2,z:3};
let keys="";
for(let k of Object .keys(o)){
    keys+=k;
}
console.log(keys) //x y z
/*這是因為Object.keys()回傳一個物件屬性名的陣列，而陣列是通過for/of來迭代的，也要注意，這種物件的鍵的迭代并不是實時的，在回圈體內修改o不會影響迭代，如果你不在乎物件的屬性，也可以像下面這樣迭代每個鍵對應的值：
*/
let o={x:1;y:2,z:3};
let sum=0;
for(let v of Object .values(0)){
    sum+=v;
}
console.log(sum)
//6
如果你即想要物件的屬性還想要屬性的值，可以基于Object.entries()和解構賦值來使用for/of：
let pairs="";
for(let [k , v] of Object .entries(o)){
    pairs+=k + v;
}
console.log(pairs)//x 1 y 2 z 3
Object .entries()回傳一個陣列的陣列，其中每個內部陣串列示物件的一個屬性的鍵值對，這里使用解構賦值把這些內部陣列分開并且分別把它們的元素賦值給兩個變數，

不知道你懂了沒有，如果沒有，那么接下來一篇，會加深你的印象

es6中有三類結構生來就具有Iterator介面：陣列、類陣列物件、Map和Set結構，

var arr = [1,2,3,4];
let iterator = arr[Symbol.iterator]();
 
console.log(iterator.next());  //{ value: 1, done: false }
console.log(iterator.next());  //{ value: 2, done: false }
console.log(iterator.next());  //{ value: 3, done: false }
console.log(iterator.next());  //{ value: 4, done: false }
console.log(iterator.next());  //{ value: undefined, done: true }

至于物件沒有布置iterator介面的原因，不知道最近大家有沒有看根據《你一生的故事》拍成的電影“降臨"，片中出現的外星語言是一門非線性的語言，而我們說的陣列，Map等結構中的成員都是有順序的，即都是線性的結構，而物件，各成員并沒有一個確定的順序，所以遍歷時先遍歷誰后遍歷誰并不確定，所以，給一個物件部署iterator介面，其實就是對該物件做一種線性轉換，如果你有這種需要，就需要手動給你的物件部署iterator介面咯~

　　如：

let obj = {
    data: [ 'hello', 'world' ],
    [Symbol.iterator]() {
        const self = this;
        let index = 0;
        return {
            next() {
                if (index < self.data.length) {
                    return {
                        value: self.data[index++],
                        done: false
                    };
                } else {
                    return { value: undefined, done: true };
                }
            }
        };
    }
};

可以看到，Symbol.iterator會回傳一個物件，這就是一個遍歷器物件，而作為遍歷器物件，其必須具備的特征就是必須具備next()方法，

我們還可以據此實作指標結構的資料結構，具體略~

　　至于可以使用Array.from轉換成陣列的類陣列物件，部署iterator有一種很簡單的方法，即直接使用陣列的[Symbol.iterator]介面，　

fakeArray.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

當然，不知道你們看到next是否想到了es6的一個新玩意兒，即Generator函式，用Generator函式來實作Symbol.iterator介面，事半功倍，

var yieldIterator = {};
yieldIterator[Symbol.iterator] = function* () {
    yield 1;
    yield 2;
    yield 3;
};
 
[...yieldIterator] // [1, 2, 3]
　　注意，yield* 后面跟的是一個可遍歷的結構，它會呼叫該結構的遍歷器介面，

注意，yield* 后面跟的是一個可遍歷的結構，它會呼叫該結構的遍歷器介面，
　　其次，其它呼叫到遍歷器的操作還有解構賦值、擴展運算子、其它任何接受陣列作為引數的場合，如：

for...of
Array.from()
Map(), Set(), WeakMap(), WeakSet()（比如）
Promise.all()
Promise.race()

一旦當你給你的結構部署了iterator介面，那么恭喜你，你可以使用for...of來遍歷你的結構了！

　　遍歷器物件除了必須布置next方法以外，還有2個可選方法，return()和throw()，當一個解構在遍歷的時候例外提前退出(比如break,continue或者出錯)的時候，就會呼叫return方法，其次，return方法必須回傳一個物件，

至于throw方法，則是用于拋出錯誤，Generator.prototype.throw這里不展開講了，感興趣的可以搜索一下，

　for of回圈有很多優點，比如不像for...in一樣只遍歷鍵名（甚至包括原型鏈上的鍵），而且不像foreach不能跳出回圈，并且for...of為各種資料結構提供了一個統一的遍歷方法，

foreach無法終止回圈，當通過break來終止回圈時會報錯 Illegal break statement，

好了，相信到這里你應該對整個Symbol有一定的理解了，如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

標籤：其他

上一篇：前端像素鳥小游戲

下一篇：Webpack與Vite熱更新差異對比