ES6中的新特性:Iterables和iterators

flydean發表於2021-06-17

簡介

為了方便集合資料的遍歷,在ES6中引入了一個iteration的概念。為我們提供了更加方便的資料遍歷的手段。

一起來學習一下吧。

什麼是iteration

iteration也稱為遍歷,就是像資料庫的遊標一樣,一步一步的遍歷集合或者物件的資料。

根據ES6的定義,iteration主要由三部分組成:

  1. Iterable

先看下Iterable的定義:

interface Iterable {
    [Symbol.iterator]() : Iterator;
}

Iterable表示這個物件裡面有可遍歷的資料,並且需要實現一個可以生成Iterator的工廠方法。

  1. Iterator
interface Iterator {
    next() : IteratorResult;
}

可以從Iterable中構建Iterator。Iterator是一個類似遊標的概念,可以通過next訪問到IteratorResult。

  1. IteratorResult

IteratorResult是每次呼叫next方法得到的資料。

interface IteratorResult {
    value: any;
    done: boolean;
}

IteratorResult中除了有一個value值表示要獲取到的資料之外,還有一個done,表示是否遍歷完成。

Iterable是一個介面,通過這個介面,我們可以連線資料提供者和資料消費者。

Iterable物件叫做資料提供者。對於資料消費者來說,除了可以呼叫next方法來獲取資料之外,還可以使用for-of 或者 ...擴充套件運算子來進行遍歷。

for-of的例子:

  for (const x of ['a', 'b', 'c']) {
      console.log(x);
  }

...擴充套件運算子的例子:

 const arr = [...new Set(['a', 'b', 'c'])];

Iterable物件

ES6中,可以被稱為Iterable物件的有下面幾種:

  • Arrays
  • Strings
  • Maps
  • Sets
  • DOM

先看一個Arrays的情況,假如我們有一個Arrays,可以通過Symbol.iterator這個key來獲取到Iterator:


> const arr = ['a', 'b', 'c'];
> const iter = arr[Symbol.iterator]();
> iter.next()
{ value: 'a', done: false }
> iter.next()
{ value: 'b', done: false }
> iter.next()
{ value: 'c', done: false }
> iter.next()
{ value: undefined, done: true }

更加簡單的辦法就是使用for-of:

for (const x of ['a', 'b']) {
    console.log(x);
}
// Output:
// 'a'
// 'b'

看一個遍歷String的情況,String的遍歷是通過Unicode code points來區分的:

for (const x of 'a\uD83D\uDC0A') {
    console.log(x);
}
// Output:
// 'a'
// '\uD83D\uDC0A' (crocodile emoji)

上面的例子中,基礎型別的String在遍歷的時候,會自動轉換成為String物件。

Maps是通過遍歷entries來實現的:

const map = new Map().set('a', 1).set('b', 2);
for (const pair of map) {
    console.log(pair);
}
// Output:
// ['a', 1]
// ['b', 2]

還記得之前提到的WeakMaps嗎?

WeakMap,WeakSet和Map於Set的區別在於,WeakMap的key只能是Object物件,不能是基本型別。

為什麼會有WeakMap呢?

對於JS中的Map來說,通常需要維護兩個陣列,第一個陣列中儲存key,第二個陣列中儲存value。每次新增和刪除item的時候,都需要同時操作兩個陣列。

這種實現有兩個缺點,第一個缺點是每次查詢的時候都需要遍歷key的陣列,然後找到對應的index,再通過index來從第二個陣列中查詢value。

第二個缺點就是key和value是強繫結的,即使key不再被使用了,也不會被垃圾回收。

所以引入了WeakMap的概念,在WeakMap中,key和value沒有這樣的強繫結關係,key如果不再被使用的話,可以被垃圾回收器回收。

因為引用關係是weak的,所以weakMap不支援key的遍歷,如果你想遍歷key的話,請使用Map。

看下Set的遍歷:

const set = new Set().add('a').add('b');
for (const x of set) {
    console.log(x);
}
// Output:
// 'a'
// 'b'

我們還可以遍歷arguments物件:

function printArgs() {
    for (const x of arguments) {
        console.log(x);
    }
}
printArgs('a', 'b');

// Output:
// 'a'
// 'b'

對於大部分DOM來說,也是可以遍歷的:

for (const node of document.querySelectorAll('div')) {
    ···
}

普通物件不是可遍歷的

簡單物件就是通過字面量建立出來的物件,這些物件雖然也有key-value的內容,但是是不可遍歷的。

為什麼呢?

因為可遍歷物件比如Array,Map,Set也是普通物件的一種特例。如果普通物件可以遍歷了,那麼會導致可以遍歷物件的一些遍歷中的衝突。

for (const x of {}) { // TypeError
    console.log(x);
}

雖然不能直接遍歷普通物件,但是我們可以通過使用objectEntries方法來遍歷普通物件。

先看下objectEntries的實現:

function objectEntries(obj) {
    let iter = Reflect.ownKeys(obj)[Symbol.iterator]();

    return {
        [Symbol.iterator]() {
            return this;
        },
        next() {
            let { done, value: key } = iter.next();
            if (done) {
                return { done: true };
            }
            return { value: [key, obj[key]] };
        }
    };
}

我們通過Reflect.ownKeys()反射拿到物件中的iterator.然後通過這個iterator來進行普通物件的遍歷。

看下具體的使用:


const obj = { first: 'Jane', last: 'Doe' };

for (const [key,value] of objectEntries(obj)) {
    console.log(`${key}: ${value}`);
}

// Output:
// first: Jane
// last: Doe

自定義iterables

除了ES6中預設的iterables之外,我們還可以自定義iterables。

因為iterables是一個介面,我們只需要實現它就可以了。我們看一個iterables的例子:

function iterateOver(...args) {
    let index = 0;
    const iterable = {
        [Symbol.iterator]() {
            const iterator = {
                next() {
                    if (index < args.length) {
                        return { value: args[index++] };
                    } else {
                        return { done: true };
                    }
                }
            };
            return iterator;
        }
    }
    return iterable;
}

iterateOver方法會返回一個iterable物件。在這個物件中,我們實現了Symbol.iterator為key的方法。這個方法返回一個iterator,在iterator中,我們實現了next方法。

上面的方法使用起來是下面的效果:

// Using `iterateOver()`:
for (const x of iterateOver('fee', 'fi', 'fo', 'fum')) {
    console.log(x);
}

// Output:
// fee
// fi
// fo
// fum

上面的例子中,如果Symbol.iterator返回的物件是iterable本身,那麼iterable也是一個iterator。

function iterateOver(...args) {
    let index = 0;
    const iterable = {
        [Symbol.iterator]() {
            return this;
        },
        next() {
            if (index < args.length) {
                return { value: args[index++] };
            } else {
                return { done: true };
            }
        },
    };
    return iterable;
}

這樣做的好處就是,我們可以使用for-of同時遍歷iterables和iterators,如下所示:

const arr = ['a', 'b'];
const iterator = arr[Symbol.iterator]();

for (const x of iterator) {
    console.log(x); // a
    break;
}

// Continue with same iterator:
for (const x of iterator) {
    console.log(x); // b
}

關閉iterators

如果我們需要遍歷的過程中,從iterators中返回該怎麼處理呢?

通過實現return方法,我們可以在程式中斷的時候(break,return,throw)呼叫iterators的return。

function createIterable() {
    let done = false;
    const iterable = {
        [Symbol.iterator]() {
            return this;
        },
        next() {
            if (!done) {
                done = true;
                return { done: false, value: 'a' };
            } else {
                return { done: true, value: undefined };
            }
        },
        return() {
            console.log('return() was called!');
        },
    };
    return iterable;
}
for (const x of createIterable()) {
    console.log(x);
    break;
}
// Output:
// a
// return() was called!

上面例子中,我們通過break來中斷遍歷,最終導致return方法的呼叫。

注意,return方法必須要返回一個物件,{ done: true, value: x }

總結

上面就是ES6中引入的Iterables和iterators的一些概念。

本文作者:flydean程式那些事

本文連結:http://www.flydean.com/es6-iterables-iterator/

本文來源:flydean的部落格

歡迎關注我的公眾號:「程式那些事」最通俗的解讀,最深刻的乾貨,最簡潔的教程,眾多你不知道的小技巧等你來發現!

相關文章