Iterable object of JavaScript

從前有匹馬叫程式碼發表於2021-02-21
ObjectJavaScript

陣列是可迭代的，所以陣列可以用於for of，字串也是可迭代的，所以字串也可以用作for of,那麼,物件呢?

試一試：

var somebody = {
    start:0,
    end:100
}

for (const iterator of somebody) {
    console.log(iterator);
}

//somebody is not iterable

如你所見，not iterable!,但是我們可以把一個物件定製成可迭代的，接下來：

 Symbol.iterator 是一個物件的內建方法，可以使我們定製物件的迭代過程，需要注意的是，該方法必須返回一個迭代器(帶有next方法的物件)

程式碼如下：

const range = {
    from: 1,
    to: 5,
    [Symbol.iterator]() {
        this.current = this.from;
        return this;//返回自己,
    },
    next() { // 必須有next方法，next方法必須返回一個具有done和value屬性的物件,當done為true,value可以省略
        if (this.current <= this.to) {
            return { done: false, value: this.current++ };
        }
        return { done: true };
    }
}

for (const iterator of range) {
    console.log('iterator-',iterator);
}
/**
iterator- 1
iterator- 2
iterator- 3
iterator- 4
iterator- 5
*/

this.current屬性是我為了控制迭代流程而自定義的；

Array.from可以將一個可迭代物件轉換為陣列，陣列的值就是可迭代物件的迭代器執行返回的值

console.log(Array.from(range));
//[ 1, 2, 3, 4, 5 ]

Array.from 完整語法是這樣的，Array.from(obj,mapFn,thisArg);

我們可以通過mapFn對映函式來處理陣列的值，並且可以給該函式指定this;

const thisArg = {sign:'SNS-'}
let results = Array.from(range,function(num){
    return `${this.sign}${num}`;
},thisArg)
console.log(results);
// [ 'SNS-1', 'SNS-2', 'SNS-3', 'SNS-4', 'SNS-5' ]

 

相關文章