一个表格看懂可迭代,迭代器,生成器,不再被不熟悉所迷糊

	可迭代协议	迭代器协议
迭代器		√
可迭代对象	√
生成器	√	√

 

我这篇不是菜鸟篇,但是,你看了迭代生成,可迭代迷糊的,看了就懂了.

目录

第一类 迭代器+next()​​​​​

第一种

第二种

第二类 自定义可迭代对象(可迭代协议+迭代的方法) 

第一种:myIterable[Symbol.iterator]+生成器yield

第二种 

第三种 :*[Symbol.iterator]+yield

第四种

第五种

第三类 继承内置可迭代对象

第一种:直接继承

第二种:间接继承

第三种 可迭代和迭代器

第四类 生成器

第一种:生成器+yield*

---

 

---

 

---

 

---

第一类 迭代器+next()
​​​​​

第一种

function makeIterator(array){
    let nextIndex = 0;

    return {
        next: function(){
            return nextIndex < array.length ?
                {value: array[nextIndex++], done: false} :
                {done: true};
        }
    };
}

let it = makeIterator(['yo', 'ya']);
// 这里不能进行迭代
// for (let variable of  someString){
//     console.log(variable)
// }
console.log(it.next().value); // 'yo'
console.log(it.next().value); // 'ya'
console.log(it.next().done);  // true

这里提醒,迭代器,没有实现可迭代,就算你用生成器的方法去使用迭代器,也是失败的.

这是我的代码测试.

var itad = function(){
    let nextIndex = 0;
    let array = ['yo', 'ya'];
    return {
        next: function(){
            return nextIndex < array.length ?
                {value: array[nextIndex++], done: false} :
                {done: true};
        }
    };
}();



for (let variable of  itad){
    console.log(variable)
}
console.log(itad.next().value); // 'yo'
console.log(itad.next().value); // 'ya'
console.log(itad.next().done);  // true*/

这个会报错.  因为他不是可以迭代的.

第二种

function makeRangeIterator(start = 0, end = Infinity, step = 1) {
    let nextIndex = start;
    let iterationCount = 0;

    const rangeIterator = {
        next: function() {
            let result;
            if (nextIndex < end) {
                result = { value: nextIndex, done: false };
                nextIndex += step;
                iterationCount++;
                return result;
            }
            return { value: iterationCount, done: true }
        }
    };
    return rangeIterator;
}
//为什么可以获得next,因为在makeRangeIterator中返回了rangeIterator
let it = makeRangeIterator (1, 10, 2);

let result = it.next();
while (!result.done) {
    console.log(result.value); // 1 3 5 7 9
    console.log(result);
    result = it.next();
}
console.log(result);
console.log("Iterated over sequence of size: ", result.value); // 5

第二类 自定义可迭代对象(可迭代协议+迭代的方法) 

第一种:myIterable[Symbol.iterator]+生成器yield

var myIterable = {};
myIterable[Symbol.iterator] = function* () {
    yield 1;
    yield 2;
    yield 3;
};
console.log([...myIterable]); // [1, 2, 3]

第二种 

var iterable = {
    [Symbol.iterator]() {
        return {
            i: 0,
            next() {
                if (this.i < 3) {
                    return { value: this.i++, done: false };
                }
                return { value: undefined, done: true };
            }
        };
    }
};

for (var value of iterable) {
    console.log(value);

第三种 :*[Symbol.iterator]+yield

let myIterable = {
    *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
    }
};
for (let value of myIterable) {
    console.log(value);
}
console.log([...myIterable]);

第四种

var someString = new String("hi");          // need to construct a String object explicsomeStringly to avoid auto-boxing

someString[Symbol.someStringerator] = function() {
    return { // this is the someStringerator object, returning a single element, the string "bye"
        next: function() {
            if (this._first) {
                this._first = false;
                return { value: "bye", done: false };
            } else {
                return { done: true };
            }
        },
        _first: true
    };
};
for (let variable of  someString){
    console.log(variable)
}
// 不能使用next()
// console.log(someString.next());
// console.log(someString.next());
// console.log(someString.next());

第五种

 

var myObj = {};
new Map([[1,"a"],[2,"b"],[3,"c"]]).get(2);               // "b"
new WeakMap([[{},"a"],[myObj,"b"],[{},"c"]]).get(myObj); // "b"
new Set([1, 2, 3]).has(3);                               // true
new Set("123").has("2");                                 // true
new WeakSet(function*() {
    yield {};
    yield myObj;
    yield {};
}()).has(myObj);                                         // true

第三类 继承内置可迭代对象

 

第一种:直接继承

for (let value of ['a', 'b', 'c']) {
    console.log(value);
}
console.log([...'abc']);

第二种:间接继承

[a, b, c] = new Set(['a', 'b', 'c']);
console.log(a);

第三种 可迭代和迭代器

var someArray = [1, 5, 7];
var someArrayEntries = someArray.entries();

for (let variable of someArrayEntries){
    console.log(variable);
}
// someArrayEntries.toString();           // "[object Array Iterator]"
// someArrayEntries === someArrayEntries[Symbol.iterator]();    // true

第四类 生成器

 

第一种:生成器+yield*

function* gen() {
    yield* ['a', 'b', 'c'];
}

let aGeneratorObject = function*(){
    yield 1;
    yield 2;
    yield 3;
}();

gen().next(); // { value: "a", done: false }
gen().next();
gen().next();

for  (let n of gen()){
    console.log(n)
}

for (let num of aGeneratorObject){
    console.log(num)
}

以上两种方法都是可以实现可迭代协议.