ES6中的迭代器和生成器怎么使用

本篇内容主要讲解“ES6中的迭代器和生成器怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“ES6中的迭代器和生成器怎么使用”吧!

1.迭代器

Iterator是 ES6 引入的一种新的遍历机制。两个核心

• 迭代器是一个统一的接口，它的作用是使各种数据结构可以被便捷的访问，它是通过一个键为Symbol.iterator的方法来实现。

• 迭代器是用于遍历数据结构元素的指针(如数据库中的游标)。

// 使用迭代 // 1.使用Symbol.iterator创建一个迭代器 const items = ['one','a','b']; const it = items[Symbol.iterator](); console.log(it);// Array Iterator{} // 2.调用next()方法向下迭代,next()返回当前的位置 const nx = it.next(); // 3.当done为true的时候遍历结束。 console.log(nx); // {value: 'one', done: false}

可迭代的数据结构Array,String,Map,Set;

注意：对象不能使用迭代，跟迭代紧密相关的就是for..of循环。

对象转换为数组使用相关的for..of循环。

// 对象转换为数组 const arrlink = {"length":3,0:"zero","1":"one"};// 注意，第一项为声明数组的长度，如果没有第一项,则为空数组 console.log(Array.from(arrlink)); // (3) ['zero', 'one', undefined] 输入参数的长度应为去除第一项后,超出将默认值位undefined for (let item of Array.from(arrlink)){     console.log(item);// 遍历的结果为，对象的值 zero ,one ,undefined. }

2.生成器

ES6 新引入了Generator函数，可以通过关键字yield把函数流程挂起,(与 Python 中的生成器相似)。

为改变执行流程提供了可能，从而也为异步编程提供了解决方案(类似于Python中使用该函数实现协程的相似)。

与普通函数的区分：

• 在function后面，函数名之前有个*；

• 函数内部有yield(产出)表达式。

// 注意格式 函数关键字后面有 * function* func(a){     console.log("one");     yield a;     console.log("two");     yield 2;     console.log("three");     return 3; }   // 每一次执行函数都会返回一个遍历器对象 let fn = func(1); console.log(fn);// func{<suspended>} // 必须调用遍历器的next()方法使指针下移到下一个状态。 console.log(fn.next());// {value: 1, done: false} console.log(fn.next());// {value: 2, done: false} console.log(fn.next());// {value: 3, done: true} console.log(fn.next());// {value: undefined, done: true}

总结：Generator函数是分段执行的，yield语句是暂停执行，next方法可以恢复执行。

function* add() {     console.log('start');     let x = yield '2';     console.log('one:' + x);//20     let y = yield '3';     console.log('two:' + y);//30     console.log('total:' + (x + y));// 50     return x+y; } var a = add(); console.log(a.next(10)); console.log(a.next(20)); console.log(a.next(30)); // console.log(a.return(100));

return方法返回给定值，并结束遍历Generator函数。提供返回的参数，返回指定的值，不提供，返回undefined.

// 使用场景，为不具备Interator接口的对象提供了遍历操作 function* objectEntries(obj) {     // 获取对象的所有key 存储到数组中     const propKeys = Object.keys(obj);     // console.log(propKeys);     for (const propKey of propKeys) {         yield [propKey, obj[propKey]];     } }   const obj = {     name: 'Jane',     age: 18 }   obj[Symbol.iterator] = objectEntries; console.log(obj);   for (const [key, value] of objectEntries(obj)) {     console.log(`${key}: ${value}`); }

生成器的应用：

// ajax是典型的异步操作.通过Generator函数部署Ajax操作,可以用同步的方式表达 function* main() {     const res = yield request(         'https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976'     );     console.log(res);     console.log('1111'); } let it = main(); it.next()   // https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976 function request(url) {     // 假设     $.ajax({         url,         method: 'get',         success(res) {             // it.next(res);             it.next(res);           }     }) }   // Generator 函数用来处理异步操作 function* load() {     loadUI();     yield showData();     hideUI(); }   let itLoad = load(); // console.log(itLoad); //  第一次调用会显示加载UI界面,并且异步的加载数据 itLoad.next(); function loadUI() {     console.log('加载loading界面.....'); } function showData(){     setTimeout(() => {         console.log('数据加载完成.....');         //  第二调用,会调用hideUI(),隐藏Loading         itLoad.next();     }, 1000);   } function hideUI() {     console.log('隐藏loading....'); }   // 给任意对象部署Interator接口

到此，相信大家对“ES6中的迭代器和生成器怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！