迭代与扩展操作
理解迭代
在JavaScript 中，计数循环就是一种最简单的迭
for (let i = 1; i <= 10; ++i) {
console.log(i);
}
通过这种循环来执行例程并不理想
** 迭代之前需要事先知道如何使用数据结构。**数组中的每一项都只能先通过引用取得数组对象，
然后再通过[]操作符取得特定索引位置上的项。这种情况并不适用于所有数据结构。
遍历顺序并不是数据结构固有的。通过递增索引来访问数据是特定于数组类型的方式，并不适
用于其他具有隐式顺序的数据结构。
迭代器模式
迭代器模式：提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。
简单理解（白话理解）：统一 “集合” 型数据结构的遍历接口，实现可循环遍历获取集合中各数据项（不关心数据项中的数据结构）
生活小栗子：清单 TodoList。每日清单有学习类、生活类、工作类、运动类等项目，清单列表只管罗列，不管类别。
可迭代协议
实现Iterable 接口（可迭代协议）要求同时具备两种能力：
支持迭代的自我识别能力和创建实现
Iterator 接口的对象的能力。
在ECMAScript 中，这意味着必须暴露一个属性作为“默认迭代器”，而且这个属性必须使用特殊的Symbol.iterator 作为键。这个默认迭代器属性必须引用一个迭代器工厂函数，调用这个工厂函数必须返回一个新迭代器。
实现Iterable接口的内置类型：
- 字符串
- 数组
- 映射
- 集合
- arguments 对象
- NodeList 等DOM 集合类型
检查是否存在默认迭代器属性可以暴露这个工厂函数：
let num = 1;
let obj = {};
// 这两种类型没有实现迭代器工厂函数
console.log(num[Symbol.iterator]); // undefined
console.log(obj[Symbol.iterator]); // undefined
let str = 'abc';
let arr = ['a', 'b', 'c'];
let map = new Map().set('a', 1).set('b', 2).set('c', 3);
let set = new Set().add('a').add('b').add('c');
let els = document.querySelectorAll('div');
// 这些类型都实现了迭代器工厂函数
console.log(str[Symbol.iterator]); // f values() { [native code] }
console.log(arr[Symbol.iterator]); // f values() { [native code] }
console.log(map[Symbol.iterator]); // f values() { [native code] }
console.log(set[Symbol.iterator]); // f values() { [native code] }
console.log(els[Symbol.iterator]); // f values() { [native code] }
// 调用这个工厂函数会生成一个迭代器
console.log(str[Symbol.iterator]()); // StringIterator {}
console.log(arr[Symbol.iterator]()); // ArrayIterator {}
console.log(map[Symbol.iterator]()); // MapIterator {}
console.log(set[Symbol.iterator]()); // SetIterator {}
console.log(els[Symbol.iterator]()); // ArrayIterator {}
接收可迭代对象的原生语言特性包括：
- for-of 循环
- 数组解构
- 扩展操作符
- Array.from()
- 创建集合
- 创建映射
- Promise.all()接收由期约组成的可迭代对象
- Promise.race()接收由期约组成的可迭代对象
- yield*操作符，在生成器中使用
原生语言结构会在后台调用提供的可迭代对象的这个工厂函数，从而创建一个迭代器：
let arr = ['foo', 'bar', 'baz'];
// for-of 循环
for (let el of arr) {
console.log(el);
}
// foo
// bar
// baz
// 数组解构
let [a, b, c] = arr;
console.log(a, b, c); // foo, bar, baz
// 扩展操作符
let arr2 = [...arr];
console.log(arr2); // ['foo', 'bar', 'baz']
// Array.from()
let arr3 = Array.from(arr);
console.log(arr3); // ['foo', 'bar', 'baz']
// Set 构造函数
let set = new Set(arr);
console.log(set); // Set(3) {'foo', 'bar', 'baz'}
// Map 构造函数
let pairs = arr.map((x, i) => [x, i]);
console.log(pairs); // [['foo', 0], ['bar', 1], ['baz', 2]]
let map = new Map(pairs);
console.log(map); // Map(3) { 'foo'=>0, 'bar'=>1, 'baz'=>2 }
如果对象原型链上的父类实现了Iterable 接口，那这个对象也就实现了这个接口：
class FooArray extends Array {}
let fooArr = new FooArray('foo', 'bar', 'baz');
for (let el of fooArr) {
console.log(el);
}
// foo
// bar
// baz
迭代器协议
迭代器是一种一次性使用的对象，用于迭代与其关联的可迭代对象。
迭代器API 使用next()方法在可迭代对象中遍历数据。每次成功调用next()，都会返回一个IteratorResult 对象，其中包含迭代器返回的下一个值。若不调用next()，则无法知道迭代器的当前位置。
next()
方法返回的迭代器对象IteratorResult 包含两个属性：done 和value。
done 是一个布尔值，表示是否还可以再次调用next()取得下一个值(遍历是否结束)
value 包含可迭代对象的下一个值（done 为false），或者undefined（done 为true）。done: true 状态称为“耗尽”。
Iterator 的遍历过程是这样的。
（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。
// 可迭代对象
let arr = ['foo', 'bar'];
// 迭代器工厂函数
console.log(arr[Symbol.iterator]); // f values() { [native code] }
// 迭代器
let iter = arr[Symbol.iterator]();
console.log(iter); // ArrayIterator {}
// 执行迭代
console.log(iter.next()); // { done: false, value: 'foo' }
console.log(iter.next()); // { done: false, value: 'bar' }
console.log(iter.next()); // { done: true, value: undefined }
通过创建迭代器并调用next()方法按顺序迭代了数组，直至不再产生新值。
迭代器并不知道怎么从可迭代对象中取得下一个值，也不知道可迭代对象有多大。
只要迭代器到达done: true 状态，后续调用next()就一直返回同样的值了：
let arr = ['foo'];
let iter = arr[Symbol.iterator]();
console.log(iter.next()); // { done: false, value: 'foo' }
console.log(iter.next()); // { done: true, value: undefined }
console.log(iter.next()); // { done: true, value: undefined }
console.log(iter.next()); // { done: true, value: undefined }
自定义迭代器
与Iterable 接口类似，任何实现Iterator 接口的对象都可以作为迭代器使用
class Counter {
// Counter 的实例应该迭代limit 次
constructor(limit) {
this.count = 1;
this.limit = limit;
}
next() {
if (this.count <= this.limit) {
return {
done: false,
value: this.count++
};
} else {
return {
done: true,
value: undefined
};
}
}
[Symbol.iterator]() {
return this;
}
}
let counter = new Counter(3);
for (let i of counter) {
console.log(i);
}
// 1
// 2
// 3
class Counter {
constructor(limit) {
this.limit = limit;
}
[Symbol.iterator]() {
let count = 1,
limit = this.limit;
return {
next() {
if (count <= limit) {
return {
done: false,
value: count++
};
} else {
return {
done: true,
value: undefined
};
}
}
};
}
}
提前终止迭代器
执行迭代的结构在想让迭代器知道它不想遍历到可迭代对象耗尽时，就可以“关闭”迭代器。
class Counter {
constructor(limit) {
this.limit = limit;
}
[Symbol.iterator]() {
let count = 1,
limit = this.limit;
return {
next() {
if (count <= limit) {
return {
done: false,
value: count++
};
} else {
return {
done: true
};
}
},
return () {
console.log('Exiting early');
return {
done: true
};
}
};
}
}
let counter1 = new Counter(5);
for (let i of counter1) {
if (i > 2) {
break;
}
console.log(i);
}
// 1
// 2
// Exiting early
生成器
生成器(Generator )是ECMAScript 6 新增的一个极为灵活的结构，拥有在一个函数块内暂停和恢复代码执行的能力。
生成器基础
函数名称前面加一个星号（*）表示它是一个生成器
// 生成器函数声明
function* generatorFn() {}
// 生成器函数表达式
let generatorFn = function* () {}
// 作为对象字面量方法的生成器函数
let foo = {
* generatorFn() {}
}
// 作为类实例方法的生成器函数
class Foo {
* generatorFn() {}
}
// 作为类静态方法的生成器函数
class Bar {
static * generatorFn() {}
}
箭头函数不能用来定义生成器函数。
标识生成器函数的星号不受两侧空格的影响
// 等价的生成器函数：
function* generatorFnA() {}
function *generatorFnB() {}
function * generatorFnC() {}
// 等价的生成器方法：
class Foo {
*generatorFnD() {}
* generatorFnE() {}
}
调用生成器函数会产生一个生成器对象。
生成器对象一开始处于暂停执行（suspended）的状态
调用next()方法会让生成器开始或恢复执行。
function* generatorFn() {}
const g = generatorFn();
console.log(g); // generatorFn {<suspended>}
console.log(g.next); // f next() { [native code] }
next()方法的返回值类似于迭代器，有一个done 属性和一个value 属性。
function* generatorFn() {
return 'foo';
}
let generatorObject = generatorFn();
console.log(generatorObject); // generatorFn {<suspended>}
console.log(generatorObject.next()); // { done: true, value: 'foo' }
生成器函数只会在初次调用next()方法后开始执行
function* generatorFn() {
console.log('foobar');
}
// 初次调用生成器函数并不会打印日志
let generatorObject = generatorFn();
generatorObject.next(); // foobar
通过yield中断执行
yield 关键字可以让生成器停止和开始执行，也是生成器最有用的地方。
生成器函数在遇到yield关键字之前会正常执行。
遇到这个关键字后，执行会停止，函数作用域的状态会被保留。
停止执行的生成器函数只能通过在生成器对象上调用next()方法来恢复执行：
function* generatorFn() {
yield;
}
let generatorObject = generatorFn();
console.log(generatorObject.next()); // { done: false, value: undefined }
console.log(generatorObject.next()); // { done: true, value: undefined }
yield 关键字只能在生成器函数内部使用，用在其他地方会抛出错误,类似于函数return
// 有效
function* validGeneratorFn() {
yield
}
// 无效
function* invalidGeneratorFnA() {
function a() {
yield
}
}
// 无效
function* invalidGeneratorFnB() {
const b = () => {
yield
}
}
// 无效
function* invalidGeneratorFnC() {
;(() => {
yield
})()
}
生成器对象作为可迭代对象
function* generatorFn() {
yield 1
yield 2
yield 3
}
for (const x of generatorFn()) {
console.log(x)
}
// 1
// 2
// 3
function* nTimes(n) {
while (n--) {
yield
}
}
for (let _ of nTimes(3)) {
console.log("foo")
}
// foo
// foo
// foo
使用yield实现输入和输出
yield 关键字还可以作为函数的中间参数使用。
上一次让生成器函数暂停的yield 关键字会接收到传给next()方法的第一个值
第一次调用next()传入的值不会被使用，因为这一次调用是为了开始执行生成器函数：
function* generatorFn(initial) {
console.log(initial)
console.log(yield)
console.log(yield)
}
let generatorObject = generatorFn("foo")
generatorObject.next("bar") // foo 第一次调用next()传入的值不会被使用，因为这一次调用是为了开始执行生成器函数
generatorObject.next("baz") // baz
generatorObject.next("qux") // qux
yield 关键字可以同时用于输入和输出
function* generatorFn() {
return yield 'foo';
}
let generatorObject = generatorFn();
console.log(generatorObject.next()); // { done: false, value: 'foo' }
console.log(generatorObject.next('bar')); // { done: true, value: 'bar' }
因为函数必须对整个表达式求值才能确定要返回的值，所以它在遇到yield 关键字时暂停执行并计算出要产生的值：“foo”。下一次调用next()传入了"bar"，作为交给同一个yield 的值。然后这个值被确定为本次生成器函数要返回的值。
function* generatorFn() {
for (let i = 0;;++i) {
yield i;
}
}
let generatorObject = generatorFn();
console.log(generatorObject.next().value); // 0
console.log(generatorObject.next().value); // 1
console.log(generatorObject.next().value); // 2
console.log(generatorObject.next().value); // 3
console.log(generatorObject.next().value); // 4
console.log(generatorObject.next().value); // 5
...
function* nTimes(n) {
for (let i = 0; i < n; ++i) {
yield i
}
}
for (let x of nTimes(3)) {
console.log(x)
}
// 0
// 1
// 2
function* nTimes(n) {
let i = 0
while (n--) {
yield i++
}
}
for (let x of nTimes(3)) {
console.log(x)
}
// 0
// 1
// 2
实现范围和填充数组
function* range(start, end) {
while (end > start) {
yield start++
}
}
for (const x of range(4, 7)) {
console.log(x)
}
// 4
// 5
// 6
function* zeroes(n) {
while (n--) {
yield 0
}
}
console.log(Array.from(zeroes(8))) // [0, 0, 0, 0, 0, 0, 0, 0]
产生可迭代对象
使用星号增强yield 的行为，让它能够迭代一个可迭代对象，从而一次产出一个值：
// 等价的generatorFn：
// function* generatorFn() {
// for (const x of [1, 2, 3]) {
// yield x;
// }
// }
function* generatorFn() {
yield* [1, 2, 3]
}
let generatorObject = generatorFn()
for (const x of generatorFn()) {
console.log(x)
}
// 1
// 2
// 3
yield 星号两侧的空格不影响其行为
function* generatorFn() {
yield* [1, 2]
yield* [3, 4]
yield* [5, 6]
}
for (const x of generatorFn()) {
console.log(x)
}
// 1
// 2
// 3
// 4
// 5
// 6
yield*的值是关联迭代器返回done: true 时的value 属性
function* generatorFn() {
console.log("iter value:", yield* [1, 2, 3])
}
for (const x of generatorFn()) {
console.log("value:", x)
}
// value: 1
// value: 2
// value: 3
// iter value: undefined
使用yield*实现递归算法
function* nTimes(n) {
if (n > 0) {
yield* nTimes(n - 1)
yield n - 1
}
}
for (const x of nTimes(3)) {
console.log(x)
}
// 0
// 1
// 2
生成器作为默认迭代器
生成器对象实现了Iterable 接口，而且生成器函数和默认迭代器被调用之后都产生迭代器
class Foo {
constructor() {
this.values = [1, 2, 3]
}
*[Symbol.iterator]() {
yield* this.values
}
}
const f = new Foo()
for (const x of f) {
console.log(x)
}
// 1
// 2
// 3
提前终止生成器
return()
return()方法会强制生成器进入关闭状态
function* generatorFn() {
for (const x of [1, 2, 3]) {
yield x
}
}
const g = generatorFn()
console.log(g) // generatorFn {<suspended>}
console.log(g.return(4)) // { done: true, value: 4 }
console.log(g) // generatorFn {<closed>}
与迭代器不同，所有生成器对象都有return()方法，只要通过它进入关闭状态，就无法恢复了。
function* generatorFn() {
for (const x of [1, 2, 3]) {
yield x
}
}
const g = generatorFn()
console.log(g.next()) // { done: false, value: 1 }
console.log(g.return(4)) // { done: true, value: 4 }
console.log(g.next()) // { done: true, value: undefined }
console.log(g.next()) // { done: true, value: undefined }
console.log(g.next()) // { done: true, value: undefined }
throw()
throw()方法会在暂停的时候将一个提供的错误注入到生成器对象中。如果错误未被处理，生成器就会关闭：
function* generatorFn() {
for (const x of [1, 2, 3]) {
yield x
}
}
const g = generatorFn()
console.log(g) // generatorFn {<suspended>}
try {
g.throw("foo")
} catch (e) {
console.log(e) // foo
}
console.log(g) // generatorFn {<closed>}
假如生成器函数内部处理了这个错误，那么生成器就不会关闭，而且还可以恢复执行。错误处理会跳过对应的yield
function* generatorFn() {
for (const x of [1, 2, 3]) {
try {
yield x
} catch (e) {}
}
}
const g = generatorFn();
console.log(g.next()); // { done: false, value: 1}
g.throw('foo');
console.log(g.next()); // { done: false, value: 3}
扫一扫
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
