用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素
迭代器的使用可以极大地简化数据操作,于是ES6也向JS中添加了这个迭代器特性。新的数组方法和新的集合类型(如Set集合与Map集合)都依赖迭代器的实现,这个新特性对于高效的数据处理而言是不可或缺的,在语言的其他特性中也都有迭代器的身影:新的for-of循环、展开运算符(...),甚至连异步编程都可以使用迭代器
例子:
下面是一段标准的for循环代码,通过变量i来跟踪colors数组的索引,循环每次执行时,如果i小于数组长度len则加1,并执行下一次循环
var colors = ["red", "green", "blue"];
for (var i = 0, len = colors.length; i < len; i++) {
console.log(colors[i]);
}
虽然循环语句语法简单,但如果将多个循环嵌套则需要追踪多个变量,代码复杂度会大大增加,一不小心就错误使用了其他for循环的跟踪变量,从而导致程序出错。迭代器的出现旨在消除这种复杂性并减少循环中的错误
迭代器Iterator
迭代器是一种特殊对象,它具有一些专门为迭代过程设计的专有接口,所有的迭代器对象都有一个next()方法,每次调用都返回一个结果对象。结果对象有两个属性:一个是value,表示下一个将要返回的值;另一个是done,它是一个布尔类型的值,当没有更多可返回数据时返回true。迭代器还会保存一个内部指针,用来指向当前集合中值的位置,每调用一次next()方法,都会返回下一个可用的值
如果在最后一个值返回后再调用next()方法,那么返回的对象中属性done的值为true,属性value则包含迭代器最终返回的值,这个返回值不是数据集的一部分,它与函数的返回值类似,是函数调用过程中最后一次给调用者传递信息的方法,如果没有相关数据则返回undefined
这个结果对象如下:
{
value: //值,
done: //布尔值,表示是否已经结束
}
封装一个迭代器。
function createIterfator(arr) {
// 闭包中的i
var i = 0;
return {
//next函数,可以使用闭包中的i
next() {
var done = ( i=> arr.length);
var value =!done ? arr[i++]:undefined;
return {
done,
value
}
}
}
}
var Iterator=createIterfator([1,2,3,4]);
console.log(Iterator.next()); // "{ value: 1, done: false }"
console.log(Iterator.next()); // "{ value: 2, done: false }"
console.log(Iterator.next()); // "{ value: 3, done: false }"
console.log(Iterator.next()); // "{ value: 4, done: false }"
// 之后的所有调用
console.log(Iterator.next()); // "{ value: undefined, done: true }"
生成器Generator
生成器是一种返回迭代器的函数,通过function关键字后的星号(*)来表示,函数中会用到新的关键字yield。星号可以紧挨着function关键字,也可以在中间添加一个空格。
// 生成器
function *createIterator() {
yield 1;
yield 2;
yield 3;
}
// 生成器能像正规函数那样被调用,但会返回一个迭代器
let iterator = createIterator();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3
在这个示例中,createlterator()前的星号表明它是一个生成器;yield关键字也是ES6的新特性,可以通过它来指定调用迭代器的next()方法时的返回值及返回顺序。生成迭代器后,连续3次调用它的next()方法返回3个不同的值,分别是1、2和3。生成器的调用过程与其他函数一样,最终返回的是创建好的迭代器
生成器函数最有趣的部分是,每当执行完一条yield语句后函数就会自动停止执行。举个例子,在上面这段代码中,执行完语句yield 1之后,函数便不再执行其他任何语句,直到再次调用迭代器的next()方法才会继续执行yield 2语句。生成器函数的这种中止函数执行的能力有很多有趣的应用
- 【使用限制】yield关键字只可在生成器内部使用,在其他地方使用会导致程序抛出错误
- 【生成器函数表达式】也可以通过函数表达式来创建生成器,只需在function关键字和小括号中间添加一个星号(*)即可,[注意]不能用箭头函数来创建生成器
- 【生成器对象的方法】由于生成器本身就是函数,因而可以将它们添加到对象中。例如,在ES5风格的对象字面量中,可以通过函数表达式来创建生成器
- 【状态机】生成器的一个常用功能是生成状态机
- 可迭代对象
- 【访问默认迭代器】可以通过Symbol.iterator来访问对象默认的迭代器
- 【创建可迭代对象】默认情况下,开发者定义的对象都是不可迭代对象,但如果给Symbol.iterator属性添加一个生成器,则可以将其变为可迭代对象
- 【展开运算符和非数组可迭代对象】通过展开运算符(...)可以把Set集合转换成一个数组
- 内建迭代器
- 【集合对象迭代器】 ①在ES6中有3种类型的集合对象:数组、Map集合与Set集合
为了更好地访问对象中的内容,这3种对象都内建了以下三种迭代器
entries() 返回一个迭代器,其值为多个键值对
values() 返回一个迭代器,其值为集合的值
keys() 返回一个迭代器,其值为集合中的所有键名
②不同集合类型的默认迭代器**
每个集合类型都有一个默认的迭代器,在for-of循环中,如果没有显式指定则使用默认的迭代器。数组和Set集合的默认迭代器是values()方法,Map集合的默认迭代器是entries()方法。有了这些默认的迭代器,可以更轻松地在for-of循环中使用集合对象
- 【字符串迭代器】ES5正式规定可以通过方括号访问字符串中的字符(也就是说,text[0]可以获取字符串text的第一个字符,并以此类推)。由于方括号操作的是编码单元而非字符,因此无法正确访问双字节字符
- 【NodeList迭代器】