迭代器
定义:迭代器(lterator)是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署lterator接口,就可以完成遍历操作,ES6新增遍历方式for...of。原生具备lterator接口的数据有:Array,Arguments,Set,Map,String,NodeList。
原理:创建一个指针对象,指向数据结构的起始位置,第一次调用==next()==方法,指针自动指向数据结构第一个成员,接下来不断调用next(),指针一直往后移动,直到指向最后一个成员,没调用next()返回一个包含value和done属性的对象.
举例:
const person = ['张三','李四','王五'];
console.log(person);
let myiterator = person[Symbol.iterator]();
console.log(myiterator.next());//{value: "张三", done: false}
console.log(myiterator.next());//{value: "李四", done: false}
console.log(myiterator.next());//{value: "王五", done: false}
console.log(myiterator.next());//{value: undefined, done: true}
迭代器使用场景
定义:遵循面向对象思想,自定义遍历数据。
const Person={
title:"学生",
realname:["张三","李四","王五"],
[Symbol.iterator](){
let i=0;
return{
next:()=>{
if(i<this.realname.length){
let obj={value:this.realname[i],done:false}
i++;
return obj;
}
return{value:undefined,done:true}
}
}
}
}
for( v of Person){
console.log(v);
}
生成器
生成器定义
生成器本身是一个特殊的函数,生成器函数是ES6提供的一种异步编程解决方案,语法行为与传统函数不同。
代码:
代码:
function * cook(){
console.log('我被执行了');
yield '盛米';
yield '淘米';
yield '煮米';
}
let cook_step = cook();
cook_step;//这样不会被执行。
生成器调用
执行生成器函数,返回的是一个迭代器对象,通过iterator.next()调用执行函数内语句,用yield 的分隔符让语句分段执行。
代码1:next();
function * cook(){
let i=1;
console.log('我被执行了'+i+'次');
yield '盛米';
i++;
console.log('我被执行了'+i+'次');
yield '淘米';
i++;
console.log('我被执行了'+i+'次');
yield '煮米';
i++;
console.log('我被执行了'+i+'次');
}
let cook_step = cook();
console.log(cook_step.next());//{value: "盛米", done: false}
console.log(cook_step.next());//{value: "淘米", done: false}
console.log(cook_step.next());//{value: "煮米", done: false}
console.log(cook_step.next());//{value: undefined, done: true}
代码2:for...of
可以打印出yield返回的结果。
for(let v of cook_step){
console.log(v);
}
生成器传参
概念:next('BBB')传入的参数作为上一个next方法的返回值。
代码:
function * cook(person){
console.log(person);
let a1 = yield '盛米';
console.log(a1);
let a2 = yield '淘米';
console.log(a2);
let a3 = yield '煮米';
console.log(a3);
}
let cook_step = cook('张三');
cook_step.next();//张三
cook_step.next('a1');//a1
cook_step.next('a2');//a2
cook_step.next('a3');//a3