ES6新特性

2023-05-30 04:40| 来源: 网络整理| 查看: 265

迭代器1.1创建迭代器

是一种新的遍历机制，两个核心， 1.迭代器是一个接口，能快捷访问数据，通过Symbol.iterator来创建迭代器 2.迭代器是用于遍历数据结构的指针

const items = ['one', 'two', 'thr'] const ite = items[Symbol.iterator()] console.log(ite.next()) //{value:'one', done:false}done如果为false, 遍历继续，如果为true,表示遍历完成生成器2.1创建生成器

Generator 区分于普通函数的部分：

一是在 function 后面，函数名之前有个*；函数内部有 yield 表达式。function* func(){ console.log("one"); yield '1'; console.log("two"); yield '2'; console.log("three"); return '3'; }

调用 Generator 函数和调用普通函数一样，在函数名后面加上()即可，但是 Generator 函数不会像普通函数一样立即执行，而是返回一个指向内部状态对象的指针，所以要调用遍历器对象Iterator 的 next 方法，指针就会从函数头部或者上一次停下来的地方开始执行。

输出： f.next(); // one // {value: "1", done: false} f.next(); // two // {value: "2", done: false} f.next(); // three // {value: "3", done: true} f.next(); // {value: undefined, done: true}第一次调用 next 方法时，从 Generator 函数的头部开始执行，先是打印了 one ,执行到 yield 就停下来，并将yield 后边表达式的值 ‘1’，作为返回对象的 value 属性值，此时函数还没有执行完，返回对象的 done 属性值是 false。第二次调用 next 方法时，同上步。第三次调用 next方法时，先是打印了 three ，然后执行了函数的返回操作，并将 return 后面的表达式的值，作为返回对象的 value 属性值，此时函数已经结束，多以 done 属性值为true 。第四次调用 next 方法时，此时函数已经执行完了，所以返回 value 属性值是 undefined ，done 属性值是 true 。如果执行第三步时，没有 return 语句的话，就直接返回 {value: undefined, done: true}。2.2next方法

一般情况下，next 方法不传入参数的时候，yield 表达式的返回值是 undefined。当 next传入参数的时候，该参数会作为上一步yield的返回值。

function* sendParameter(){ console.log("start"); var x = yield '2'; console.log("one:" + x); var y = yield '3'; console.log("two:" + y); console.log("total:" + (x + y)); }2.2.1next不传参

除了使用next，还可以使用for... of循环遍历 Generator函数生产的Iterator 对象。

return 方法返回给定值，并结束遍历 Generator 函数。

return 方法提供参数时，返回该参数；不提供参数时，返回 undefined 。

function* foo(){ yield 1; yield 2; yield 3; } var f = foo(); f.next(); // {value: 1, done: false} f.return("foo"); // {value: "foo", done: true} f.next(); // {value: undefined, done: true} throw 方法 throw 方法可以再 Generator 函数体外面抛出异常，再函数体内部捕获。 var g = function* () { try { yield; } catch (e) { console.log('catch inner', e); } }; var i = g(); i.next(); try { i.throw('a'); i.throw('b'); } catch (e) { console.log('catch outside', e); } // catch inner a // catch outside b

遍历器对象抛出了两个错误，第一个被Generator 函数内部捕获，第二个因为函数体内部的catch 函数已经执行过了，不会再捕获这个错误，所以这个错误就抛出 Generator函数体，被函数体外的catch捕获。

2.2.3yield* 表达式

yield*表达式表示 yield返回一个遍历器对象，用于在 Generator函数内部，调用另一个 Generator函数。

function* callee() { console.log('callee: ' + (yield)); } function* caller() { while (true) { yield* callee(); } } const callerObj = caller(); callerObj.next(); // {value: undefined, done: false} callerObj.next("a"); // callee: a // {value: undefined, done: false} callerObj.next("b"); // callee: b // {value: undefined, done: false} // 等同于 function* caller() { while (true) { for (var value of callee) { yield value; } } }2.3使用场景

实现Iterator

为不具备Iterator接口的对象提供遍历方法。为异步编程提供了方案

Reflect.ownKeys() 返回对象所有的属性，不管属性是否可枚举，包括 Symbol。

function* objectEntries(obj) { const propKeys = Reflect.ownKeys(obj); //Reflect.ownKeys() 返回对象所有的属性，不管属性是否可枚举，包括 Symbol。 for (const propKey of propKeys) { yield [propKey, obj[propKey]]; } } const jane = { first: 'Jane', last: 'Doe' }; for (const [key,value] of objectEntries(jane)) { console.log(`${key}: ${value}`); } // first: Jane // last: Doe2.3.1.1异步代码同步化：function* main(){ console.log('main') let res = yield request(url) console.log('数据请求完成，') ----- ------ } const ite = main(); ite.next(); function request(url){ alert(url); $.ajax({ url, method: 'get', success(res){ ite.next(res); } }) }2.3.1.2加载ui function* load(){ loadui(); yield showData(); hideUi(); } let itLoad(); itload.next(); function loadUi(){ console.log('加载loading******') } function showData(){ //模拟异步操作 setTimeout(()=>{ console.log('数据加载完成') itload.next() }) }

【本文地址】

ES6新特性

ES6新特性

今日新闻

推荐新闻