一、可迭代对象和迭代器

1. 可迭代对象指的是，可通过 for/of 循环的对象，是es6的特性，包括（数组，字符串，set对象，map对象）

2. 扩展操作符...可以展开可迭代对象

let chars = [..."abcd"] // chars === ["a","b","c","d"]
let data = [1, 2, 3, 4]
Math.max(data) // 4

3. 迭代器可用于解构赋值

let purple = Uint8Array.of(255, 0, 255, 128)
let [r, g, b, a] = purple // a===128

4. 迭代map对象，返回值是[key,value]对，在for/of中可直接解构赋值

let m = new Map([["one", 1], ["two", 2]])
for (let [k, v] of m) console.log(k, v);

5. 值迭代键或值，可使用keys()或values()

[...m]; // [["one", 1], ["two", 2]]
[...m.entries()]; // [["one", 1], ["two", 2]]
[...m.keys()]; // ["one","two"]
[...m.values()]; // [1,2]

6. 可接收Array对象的内置函数和构造函数，可接收任意迭代器

new Set("abc"); new Set(["a", "b", "c"]); // 两者相同

7. 迭代器原理

// 可迭代对象：具有迭代器的方法，且该方法返回迭代器的对象
let list1 = [1, 2]
// 迭代器对象：具有next()方法，且该方法返回迭代结果的对象list
let iterator = list1[Symbol.iterator]() //有一个Symbol.iterator方法，返回自己
// 迭代结果：具有属性value和done的对象
for (let result = iterator.next(); !result.done; result = iterator.next()) {
    console.log(result.value);
}
// 例
let list2 = [1, 2, 3, 4, 5]
let iter = list2[Symbol.iterator]()
console.log(iter.next().value); // 1
console.log([...iter]); // [2, 3, 4, 5]

二、可迭代对象的实现

原则：只要数据类型表示某种可迭代的结构，就应该实现为可迭代对象
实现：为了让类可迭代，必须实现一个Symbol.iterator的方法，该方法必须返回一个迭代器对象，该对象有一个next()方法，next()方法必须返回一个有value和done属性的对象
操作：可迭代的数值Range类

1.Range对象表示一个数值范围{x: form<=x<=to}

/*
 Range定义了has()方法，
用于测试给定数值是不是该范围的成员 Range是可迭代的，迭代其范围内的所有整数 
*/
class Range {
    constructor(from, to) {
        this.from = from
        this.to = to
    }
    has(x) {
        return typeof x === 'number' &&
            x >= this.from &&
            x <= this.to
    }
    toString() { return `{x: ${this.from}<=x <=${this.to}}` }
    [Symbol.iterator]() {
        let next = Math.ceil(this.from);
        let last = this.to
        return {
            next() {
                return {
                    done: next > last,
                    value: next++,
                }
            }
        }
    }
}


console.log(new Range(1, 3).toString());
console.log(new Range(1, 3).has(4));

for (const i of new Range(1, 3)) {
    console.log(i);
}

console.log([...new Range(-1, 3)]);

2.定义返回可迭代值的函数

// 替代数组的map方法
function map(iterable, fn) {
    let iterator = iterable[Symbol.iterator]()
    // 返回一个可迭代对象，也是迭代器对象
    return {
        [Symbol.iterator]() { return this },
        next() {
            let obj = iterator.next()
            if (obj.done) {
                return obj
            } else {
                return { value: fn(obj.value) }
            }
        }
    }
}
console.log([...map([1, 2, 3], x => x * x)]);
// 替代数组的filter方法
function filter(iterable, fn) {
    let iterator = iterable[Symbol.iterator]()
    // 返回一个可迭代对象，也是迭代器对象
    return {
        [Symbol.iterator]() { return this },
        next() {
            while (true) {
                let obj = iterator.next()
                if (fn(obj.value) || obj.done) {
                    return obj
                }
            }
        }
    }
}
console.log([...filter([1, 2, 3, 4, 5, 6, 12, 56], x => x > 3)]);

3.懒惰迭代

// 假设一个非常长的字符串想要以空格为分隔,如果使用字符串split方法,那么要处理整个字符串,
// 会占用很多内存来保存返回的数组和其中的字符串.
// 使用懒惰迭代,则不必全部保存在内存
function words(s) {
    let r = /\s+|$/g
    r.lastIndex = s.match(/[^ ]/).index
    return {
        [Symbol.iterator]() { return this },
        next() {
            let start = r.lastIndex
            if (start < s.length) { let match = r.exec(s) if (match) { return { value: s.substring(start, match.index) } } }
            return { done: true }
        }
    }
} 
console.log([...words(" abc def ghi ")]);

三、生成器概念和实例

原则：生成器是es6语法定义的迭代器，适合要迭代的值不是某个数据结构的元素，而是计算结果的场景
实现：创建生成器需要先定义一个生成器函数，使用关键字function*，调用生成器函数不会执行函数体，而是返回一个迭代器。
操作：调用迭代器的next方法，会导致生成器函数的函数体从头开始执行，知道遇见一个yield语句。yield语句的值，会成为返回值。 yield 和yield*只能在生成器函数中使用，常规函数不能出现！

1.例子

// 例1
function* oneDigitPrimes() {
    yield 2;
    yield 3;
    yield 5;
    yield 7;
}
let primes = oneDigitPrimes()
primes.next().value // 2
primes.next().value // 3
console.log(primes.next().value); // 5
console.log(primes.next().done); // false
console.log(primes.next().done); // true

let primesIterator = primes[Symbol.iterator]()// 可迭代对象
console.log(primesIterator.next()); // {value: undefined, done: true}

console.log([...oneDigitPrimes()]); //[2, 3, 5, 7]
let sum = 0
for (const v of oneDigitPrimes()) {
    sum += v
}
console.log(sum); // 17

// 例2
const seq = function* (from, to) {
    for (let i = from; i <= to; i++) yield i
}
console.log([...seq(3, 5)]); // [3, 4,5]

// 例3 类和对象字面量, 不能使用箭头函数定义生成器函数
let o = {
    x: 1, y: 2, z: 3,
    *g() {
        for (const key of Object.keys(this)) {
            yield key
        }
    }
}
console.log([...o.g()]); //["x", "y", "z", "g"]

// 例4 无限回送斐波那契数 如果执行[...fibonacciSequence()]会一直循环直到内存耗尽
function* fibonacciSequence() {
    let x = 0, y = 1;
    while (1) {
        yield y;
        [x, y] = [y, x + y]
    }
}

//通过限制条件， 返回第20个斐波那契数
function fibonacci(n) {
    for (const f of fibonacciSequence()) {
        if (n-- <= 0) {
            return f
        }
    }
}
console.log(fibonacci(10)); //89

// 配合take生成器(用另一个生成器封装一下) 回送指定可迭代对象的前n个元素
function* take(n, iterable) {
    let it = iterable[Symbol.iterator]()
    while (n-- > 0) {
        let next = it.next()
        if (next.done) {
            return
        }
        yield next.value
    }
}
console.log([...take(5, fibonacciSequence())]); //[1, 1, 2, 3, 5]

// 拿到可迭代对象数组，交替回送元素
function* zip(...iterables) {
    // 取得每个可迭代对象的迭代器
    let iterators = iterables.map(i => i[Symbol.iterator]())
    let index = 0
    while (iterators.length > 0) {
        if (index >= iterators.length) {
            index = 0
        }
        let item = iterators[index].next()
        if (item.done) {
            iterators.splice(index, 1)
        }
        else {
            yield item.value
            index++
        }
    }
}
console.log([...zip(oneDigitPrimes(), 'ab', [0])]); //[2, "a", 0, 3, "b", 5, 7]

// yield*与递归生成器
// 顺序回送元素
function* sequence(...iterables) {
    for (const iterable of iterables) {
        for (const item of iterable) {
            yield item;
        }
    }
}
console.log([...sequence("abc", [1, 2, 3])]); // ["a", "b", "c", 1, 2, 3]
// 使用yield* 简化
function* sequence2(...iterables) {
    for (const item of iterables) {
        yield* item
    }
}
console.log([...sequence2('abc', 'def')]); // ["a", "b", "c", "d", "e", "f"]

2.生成器函数返回值

function* oneAndDone() {
    yield 1
    return "done"
}
// 正常迭代中不会出现返回值
console.log([...oneAndDone()]); // [1]
//在显式调用next可以得到
let generator = oneAndDone()
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 'done', done: true }
console.log(generator.next()); // { value: undefined, done: true }

作者：wangchao
链接：https://juejin.cn/post/6969842645417852964
来源：掘金

链接: https://www.fly63.com/article/detial/10394

es6 迭代器和生成器

一、可迭代对象和迭代器

1. 可迭代对象指的是，可通过 for/of 循环的对象，是es6的特性，包括（数组，字符串，set对象，map对象）

2. 扩展操作符...可以展开可迭代对象

3. 迭代器可用于解构赋值

4. 迭代map对象，返回值是[key,value]对，在for/of中可直接解构赋值

5. 值迭代键或值，可使用keys()或values()

6. 可接收Array对象的内置函数和构造函数，可接收任意迭代器

7. 迭代器原理

二、可迭代对象的实现

1.Range对象表示一个数值范围{x: form<=x<=to}

2.定义返回可迭代值的函数

3.懒惰迭代

三、生成器概念和实例

1.例子

2.生成器函数返回值

es6 箭头函数的使用总结，带你深入理解js中的箭头函数

详解JavaScript模块化开发require.js

js解构赋值,关于es6中的解构赋值的用途总结

ES6中let变量的特点，使用let声明总汇

ES6的7个实用技巧

ES6 Decorator_js中的装饰器函数

基于ES6的tinyJquery

ES6 中的一些技巧，使你的代码更清晰，更简短，更易读！

Rest/Spread 属性_探索 ES2018 和 ES2019

使用ES6让你的React代码提升到一个新档次

es6 迭代器和生成器

一、可迭代对象和迭代器

1. 可迭代对象指的是，可通过 for/of 循环的对象，是es6的特性，包括（数组，字符串，set对象，map对象）

2. 扩展操作符...可以展开可迭代对象

3. 迭代器可用于解构赋值

4. 迭代map对象，返回值是[key,value]对， 在for/of中可直接解构赋值

5. 值迭代键或值，可使用keys()或values()

6. 可接收Array对象的内置函数和构造函数，可接收任意迭代器

7. 迭代器原理

二、可迭代对象的实现

1.Range对象表示一个数值范围{x: form<=x<=to}

2.定义返回可迭代值的函数

3.懒惰迭代

三、生成器概念和实例

1.例子

2.生成器函数返回值

es6 箭头函数的使用总结，带你深入理解js中的箭头函数

详解JavaScript模块化开发require.js

js解构赋值,关于es6中的解构赋值的用途总结

ES6中let变量的特点，使用let声明总汇

ES6的7个实用技巧

ES6 Decorator_js中的装饰器函数

基于ES6的tinyJquery

ES6 中的一些技巧，使你的代码更清晰，更简短，更易读！

Rest/Spread 属性_探索 ES2018 和 ES2019

使用ES6让你的React代码提升到一个新档次

4. 迭代map对象，返回值是[key,value]对，在for/of中可直接解构赋值