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 }
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
