成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Introuction to JavaScript iterator

kviccn / 1227人閱讀

Symbol

ES6 introcues a new type called symbol. The Symbol function returns a value of type symbol.

const symbol1 = Symbol();
const symbol2 = Symbol("hi");

console.log(typeof symbol1); //symbol

console.log(symbol3.toString()); //Symbol(foo)

// each symbol value created by Symbol function is unique
console.log(Symbol("foo") === Symbol("foo"));  // false

// Symbol itself is a function
console.log(typeof Symbol); //function
Iterator

An iterator is an object that provides a next method which returns the next item in the sequence. This method returns an object with two properties: done and value. For an object to be iterable, it must have a function property with a Symbol.iterator key, which returns a new iterator for each call.

// Array has build-in iteration support
functioin forOf(arr) {
    for(let i of arr) {
        console.log(i);
    }
}

/**
 * for...of loops is based on iterator
 * so forOf implementation above is basically:
 */
function iterating(arr) {
    let iterator = arr[Symbol.iterator](); //get the iterator for the array
    let next = iterator.next();
    while(!next.done) {
        console.log(next.value);
        next = iterator.next();
    }
}
Make Object iterable

Object doesn"t have build-in iteration support.

let obj = {a: "b", c: "d"}
for(let i of obj) {
    //Uncaught TypeError: obj is not iterable
    console.log(i);
}

To make Object iterable, we have to add Symbol.iterator, either to the instance or the prototype.

Object.defineProperty(Object.prototype, Symbol.iterator, {
    value: function() {
        let keys = Object.keys(this);
        let index = 0;
        return {
            next: () => {
                let key = keys[index++];
                return {
                    value: `${key}-${this[key]}`,
                    done: index > keys.length
                }
            }
        };
    },
    enumerable: false
});

let obj = {a: "b", c: "d"}
for(let i of obj) {
    console.log(i); // a-b c-d
}
Generator

The function declaration defines a generator function, whose return value is generator object. The generator object conforms to the iterator protocol. Note generator function* itself is a function.

//generator function
function* generatorFn() {
    yield 1;
    return 2;
}

// generator object - iterator
let generatorObj = generatorFn();
let nextItem = generatorObj.next(); 

console.log(typeof generatorFn); //function
console.log(typeof generatorObj); //object
console.log(typeof generatorObj.next); //function
console.log(nextItem); //{value: 1, done: false}

Therefore, to make Object iterable, we can define its Symbol.iterator with generator function.

Object.defineProperty(Object.prototype, Symbol.iterator, {
    value: function*() {
        let keys = Object.keys(this);
        for(let key of keys) {
            yield `${key}-${this[key]}`;
        }
    },
    enumerable: false
});

let obj = {a: "b", c: "d"};
for(let kv of obj) {
    console.log(kv); // a-b c-d
}
In practice

With the technique in hand, we can make custom datatypes iterable.

class Group {
    constructor() {
        this._data = [];
    }

    add(it) {
        this._data.push(it);
    }

    delete(it) {
        let index = this._data.indexOf(it);
        if(index >= 0) {
            this._data.splice(index, 1);
        }
    }

    has(it) {
        return this._data.includes(it);
    }

    [Symbol.iterator]() {
        let index = 0;
        return {
            next: () => ({
                value: this._data[index++],
                done: index > this._data.length
            })
        };
    }

    static from(iterable) {
        let group = new Group();
        for(let item of iterable) {
            group.add(item);
        }
        return group;
    }
}

let group = Group.from(["a", "b", "c"]);
console.log(group)

for (let value of group) {
    console.log(value);
}

console.log([...group]);
Reference

Eloquent JavaScript

Notice

If you want to follow the latest news/articles for the series of reading notes, Please 「Watch」to Subscribe.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93769.html

相關(guān)文章

  • Javascript Generator - 函數(shù)式編程 - Javascript核心

    摘要：中的的引入，極大程度上改變了程序員對迭代器的看法，并為解決提供了新方法。被稱為，也有些人把的返回值稱為一個(gè)。其中屬性包含實(shí)際返回的數(shù)值，屬性為布爾值，標(biāo)記迭代器是否完成迭代。 原文： http://pij.robinqu.me/JavaScript_Core/Functional_JavaScript/JavaScript_Generator.html 源代碼： htt...

    yearsj 評論0 收藏0

  • ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解

    摘要：變量聲明與賦值值傳遞淺拷貝與深拷貝詳解歸納于筆者的現(xiàn)代開發(fā)語法基礎(chǔ)與實(shí)踐技巧系列文章。變量聲明在中，基本的變量聲明可以用方式允許省略，直接對未聲明的變量賦值。按值傳遞中函數(shù)的形參是被調(diào)用時(shí)所傳實(shí)參的副本。 ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解歸納于筆者的現(xiàn)代 JavaScript 開發(fā)：語法基礎(chǔ)與實(shí)踐技巧系列文章。本文首先介紹 ES6 中常用的三種變量聲明方式，然后討論了...

    snowLu 評論0 收藏0

  • 用 JavaScript 實(shí)現(xiàn)鏈表

    摘要：相反，雙向鏈表具有指向其前后元素的節(jié)點(diǎn)。另外，可以對鏈表進(jìn)行排序。這個(gè)實(shí)用程序方法用于打印鏈表中的節(jié)點(diǎn)，僅用于調(diào)試目的。第行將更新為，這是從鏈表中彈出最后一個(gè)元素的行為。如果鏈表為空，則返回。 showImg(https://segmentfault.com/img/bVbsaI7?w=1600&h=228); 什么是鏈表 單鏈表是表示一系列節(jié)點(diǎn)的數(shù)據(jù)結(jié)構(gòu)，其中每個(gè)節(jié)點(diǎn)指向鏈表中的下一...

    appetizerio 評論0 收藏0

  • Javascript數(shù)組的“字符串”索引 & for…in 和 for…of的區(qū)別

    摘要：中的數(shù)組是沒有字符串索引的，形如只是在對象上添加了屬性。本來有幾個(gè)例子，然而搜到了的文檔，所以摘一點(diǎn)下面摘自循環(huán)會遍歷一個(gè)對象上面的所有屬性。語法是針對集合的，而不是所有的對象。它會遍歷定義了屬性的集合的所有元素。 TL;DR：js中的數(shù)組是沒有字符串索引的，形如array[b] = someValue只是在array對象上添加了屬性。 本來有幾個(gè)例子，然而搜到了MDN的文檔，所以摘一...

    mo0n1andin 評論0 收藏0

  • [譯]JavaScript ES6迭代器指南

    摘要：前言又稱提供一個(gè)全新的迭代器的概念，它允許我們在語言層面上定義一個(gè)有限或無限的序列。后者可以被用來幫助我們理解迭代器。但是當(dāng)我們使用迭代器時(shí)，這個(gè)問題就迎刃而解了。是中的新語法，用來配合迭代器。這是因?yàn)閿?shù)組的迭代器只返回其中預(yù)期的元素。 前言 EcmaScript 2015 （又稱ES6）提供一個(gè)全新的迭代器的概念，它允許我們在語言層面上定義一個(gè)（有限或無限的）序列。 暫時(shí)先拋開它...

    daryl 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<