太原网站建设鸣蝉,国外服务器地址,装修网上接单,南宁做网站培训Iterator
Iterator是最简单最好理解的。
简单的说#xff0c;我们常用的 for of 循环#xff0c;都是通过调用被循环对象的一个特殊函数 Iterator 来实现的#xff0c;但是以前这个函数是隐藏的我们无法访问#xff0c; 从 Symbol 引入之后#xff0c;我们就可以通过 Sy…Iterator
Iterator是最简单最好理解的。
简单的说我们常用的 for of 循环都是通过调用被循环对象的一个特殊函数 Iterator 来实现的但是以前这个函数是隐藏的我们无法访问 从 Symbol 引入之后我们就可以通过 Symbol.iterator 来直接读写这个特殊函数。
对于循环语句来说他并不关心被循环的对象到底是什么他只负责调用 data[Symbol.iterator] 函数然后根据返回值来进行循环。所以任何对象只要提供了标准的 Iterator 接口即可被循环比如我们现在来创造一个自定义的数据
var students {}
students[Symbol.iterator] function() {let index 1;return { next() {return {done: index100, value: index} }}
}for(var i of students) { console.log(i); }除了这种方式外我们也可以通过 Generator 来实现一个 Iterator 接口。
Generator 基本语法
Generator 是ES6引入的新语法Generator是一个可以暂停和继续执行的函数。简单的用法可以当做一个Iterator来用进行一些遍历操作。复杂一些的用法他可以在内部保存一些状态成为一个状态机。
Generator 基本语法包含两部分
函数名前要加一个星号 函数内部用 yield 关键字返回值 下面是一个简单的示例
function * count() {yield 1yield 2return 3
}
var c count()
console.log(c.next()) // { value: 1, done: false }
console.log(c.next()) // { value: 2, done: false }
console.log(c.next()) // { value: 3, done: true }
console.log(c.next()) // { value: undefined, done: true }由于Generator也存在 Symbol.iterator 接口所以他也可以被 for 循环调用
function * count() {yield 1yield 2return 3
}
var c count()
for (i of c) console.log(i) // 1, 2不过这里要注意一个不同点调用 next 的时候能得到 3 但是用 for 则会忽略最后的 return 语句。 也就是 for 循环会忽略 generator 中的 return 语句.
另外 yeild* 语法可以用来在 Generator 中调用另一个 Generator参见 yield* MDN
Generator VS Iterator
Generator 可以看做是一个更加灵活的 Iterator 他们之间是可以互相替代的但是 Generator 由于可以通过 yield 随时暂停因此可以很方便进行流程控制和状态管理而 Iterator 就可能需要你写更多的代码进行相同的操作
比如 Stack Overflow 上的这个中序遍历代码
function* traverseTree(node) {if (node null) return;yield* traverseTree(node.left);yield node.value;yield* traverseTree(node.right);
}同样的功能用 iterator 实现就会变得麻烦很多。
Generator 也是实现简单的状态机的最佳选择因为他是在函数内部进行 yield 操作因此不会丢失当前状态
function * clock () {yield tickyield tock
}同样的功能如果普通的函数因为每次都是调用这个函数所以函数内部并不能保存状态因此就需要在函数外面用一个变量来保存当前状态
let tick false
function clock() {tick !tickreturn tick ? tick : tock
}其实Babel编译 Generator 的时候也是用了一个 Context 来保存当前状态的可以看看Babel编译后的代码其中的 _context 就是当前状态这里通过 _context.next 的值来控制调用 next 的时候应该进入到哪一个流程 var _marked /*#__PURE__*/regeneratorRuntime.mark(clock);function clock() {return regeneratorRuntime.wrap(function clock$(_context) {while (1) {switch (_context.prev _context.next) {case 0:_context.next 2;return tick;case 2:_context.next 4;return tock;case 4:case end:return _context.stop();}}}, _marked, this);
}总结
Iterator 是一个循环接口任何实现了此接口的数据都可以被 for of 循环遍历Generator 是一个可以暂停和继续执行的函数他可以完全实现 Iterator 的功能并且由于可以保存上下文他非常适合实现简单的状态机。另外通过一些流程控制代码的配合可以比较容易进行异步操作。Async/Await 就是generator进行异步操作的语法糖。而这个语法糖反而是被使用最广泛的比如著名的 Koa
