ES6 新特性（三）

2023-10-28
江苏
本文字数：1851 字
阅读完需：约 6 分钟

1 迭代器

1.1 介绍

迭代器是一种接口，为各种不同的数据接口提供统一的访问机制。任何数据结构只要部署 iterator 接口（拥有并实现 Smbol.iterator 属性），就可以完成遍历操作。

ES6 创造了一种新的遍历命令 for...of 循环，iterator 接口主要提供 for...of 消费
原生具备 iterator 接口的数据（可用 for of 遍历）
Array
Arguments
Set
Map
String
TypedArray
NodeList
工作原理
创建一个指针对象，指向当前数据结构的起始位置
第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员
接下来不断调用 next 方法，指针一直往后移动过，直到指向最后一个成员

const mainCharacters = ['罗峰', '萧炎', '唐三'];// 使用for of遍历数组for (v of mainCharacters) {  console.log(v);}// 罗峰// 萧炎// 唐三
// 打印查看是否实现了Symbol.iterator属性console.log(mainCharacters[Symbol.iterator]); // ƒ values() { [native code] }
// 按照【原理】手动调用模拟for of遍历let iterator = mainCharacters[Symbol.iterator]();console.log(iterator.next()); // {value: '罗峰', done: false}console.log(iterator.next()); // {value: '萧炎', done: false}console.log(iterator.next()); // {value: '唐三', done: false}console.log(iterator.next()); // {value: undefined, done: true}

复制代码

1.2 应用

自定义遍历数据

// 声明一个对象实现Symbol.iterator属性const match = {  region: 'LOL',  player: [    'uzi',    'theshy',    'smlz',    'mlxg'  ],  [Symbol.iterator]() {    let idx = 0;    return {      next:()=> {        if (idx < this.player.length) {          return { value: this.player[idx++], done: false }        } else {          return { value: undefined, done: true }        }      }    }  }}
// 使用for of遍历该对象for(v of match){  console.log(v);}// uzi// theshy// smlz// mlxg

复制代码

2 生成器

2.1 介绍

生成器就是一种特殊的函数，用于异步编程。ES5 使用回调函数实现异步编程：node fs、ajax、mongodb

// 1.声明语法function * gen() {  console.log('hello generator');}
let iterator = gen();console.log(iterator);iterator.next();
// 2.生成器函数体内可以使用yield语法，yield可以算作函数代码的分割符，分割函数体代码function * gen() {  console.log(1);  yield '落花有意随流水';  console.log(2);  yield '流水无心恋落花';  console.log(3);  yield '流水东去不复回';  coonsole.log(4)}
let iterator = gen();iterator.next(); // 1 // 【注：】此时返回：{value: '落花有意随流水', done: false}iterator.next(); // 2 // 【注：】此时返回：{value: '流水无心恋落花', done: false}iterator.next(); // 3 // 【注：】此时返回：{value: '流水东去不复回', done: false}iterator.next(); // 4 // 【注：】此时返回：{value: undefined, done: true}
// 可以使用for of 遍历function * gen() {  yield '落花有意随流水';  yield '流水无心恋落花';  yield '流水东去不复回';}
// 调用生成器函数会产生一个生成器对象，且该对象的原型中实现了iterator接口（Symbol.iterator属性）【图1】for(v of gen()) {  console.log(v);}// 落花有意随流水// 流水无心恋落花// 流水东去不复回

复制代码

【图 1】

2.2 参数传递

// 1.调用生成器传参function * gen(arg) {  console.log(arg)  yield '奈何明月照沟渠'}let iterator = gen('我本将心向明月');console.log(iterator.next()); // 我本将心向明月															// {value: '奈何明月照沟渠', done: false}
// 2.调用next方法传参// yield语句本身没有返回值，next方法可以带一个参数，该参数会被当作上一条yield语句的返回值function * gen() {  const onePiece = yield '不重要';  console.log(onePiece);  const lovePiece = yield '也不重要';  console.log(lovePiece);}
// 调用结果见【图2】let iterator = gen();iterator.next();iterator.next('劝君莫作独醒人'); // 劝君莫作独醒人iterator.next('烂醉花间应有数'); // 烂醉花间应有数

复制代码

【图 2】

解释说明：

首次调用 next 方法不能传参，因为参数会作为上一次 yield 语句的返回值，没有意义 V8 引擎也会忽略
yield 语句的返回结果，与 next()返回结果是两码事。yield 语句的返回结果由下一次调用 next 方法的参数决定，而 next()返回结果，由 yield 后的值决定。

2.2 应用

复制代码

3 Promise

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/f2296146a68e3891b33a1c514】。文章转载请联系作者。

阡陌r

关注

还未添加个人签名 2018-03-26 加入

还未添加个人简介

发布

暂无评论

创作场景

ES6 新特性（三）

1 迭代器

1.1 介绍

1.2 应用

2 生成器

2.1 介绍

2.2 参数传递

2.2 应用

阡陌r

评论