设备网站开发制作广告的软件

设备网站开发,制作广告的软件,北京网站备案代理,中国建筑信息查询平台目标#xff1a;不仅会“用”#xff0c;还能“设计、调试、扩展、优化”。文内包含从零手写、生成器、惰性管道、异步流、资源管理、常见坑、性能建议、练习清单等。1. 核心协议 可迭代协议 (Iterable)#xff1a;对象实现 obj[Symbol.iterator]()#xff0c;返回一个迭代…目标不仅会“用”还能“设计、调试、扩展、优化”。文内包含从零手写、生成器、惰性管道、异步流、资源管理、常见坑、性能建议、练习清单等。1. 核心协议可迭代协议 (Iterable)对象实现obj[Symbol.iterator]()返回一个迭代器。迭代器协议 (Iterator)返回值具备next()方法每次next()返回{ value, done }。消费方for...of、展开...、数组/对象解构、Promise.all、new Map(iterable)、new Set(iterable)、Array.from等。原生可迭代Array、String、Map、Set、TypedArray、arguments、NodeList等。constarr[10,20];constitarr[Symbol.iterator]();// 拿到迭代器console.log(it.next());// { value: 10, done: false }console.log(it.next());// { value: 20, done: false }console.log(it.next());// { value: undefined, done: true }2. for…of / for…in / for await…of 对比for...of遍历“值”依赖可迭代协议顺序稳定。for...in遍历“可枚举属性键”含原型链可枚举属性不需要可迭代。for await...of遍历“异步可迭代”或“值为 Promise 的可迭代”逐个await。constarr[3,6,9];for(constvofarr)console.log(of ,v);// 3 6 9for(constkinarr)console.log(in ,k);// 0 1 23. 从零手写同步迭代器含 return/throw场景为自定义对象提供可迭代能力并处理提前终止。constcounter{current:1,max:3,[Symbol.iterator](){constselfthis;return{next(){if(self.currentself.max){return{value:self.current,done:false};}return{value:undefined,done:true};},return(){console.log(迭代被提前终止执行清理逻辑);return{value:undefined,done:true};},throw(err){console.log(外部抛错被捕获,err.message);return{value:undefined,done:true};},};},};for(constnofcounter){console.log(n);if(n2)break;// 触发 return()}要点Symbol.iterator返回的对象必须实现next()。done: true视为终止value可省略。return()可用于break/return/throw时的清理throw()让外部异常传入迭代器。4. 生成器 (Generator) 深潜function* / yield / yield*生成器函数function*/async function*执行后返回一个“生成器对象”它同时是迭代器和可迭代对象。生成器以“暂停/恢复”的方式运行内部编译成状态机。4.1 生成器函数 vs 生成器对象生成器函数写法function* foo() { ... }或const foo function* () { ... }箭头函数不能写成生成器。生成器对象调用生成器函数得到如const it foo()它拥有next/return/throw并实现Symbol.iterator。function*range(start,end,step1){for(letistart;iend;istep)yieldi;// yield 产出并“暂停”}constitrange(1,3);console.log(it.next());// { value: 1, done: false }console.log(it.next());// { value: 2, done: false }console.log(it.next());// { value: 3, done: false }console.log(it.next());// { value: undefined, done: true }4.2 yield 的双向通信与状态机next(value)会把value作为“上一个 yield 表达式的结果”传回生成器内部。function*dialog(){constnameyield你是谁;constlangyield你好${name}你用什么语言;return${name}使用${lang};}constgdialog();console.log(g.next());// { value: 你是谁, done: false }console.log(g.next(Alice));// { value: 你好Alice你用什么语言, done: false }console.log(g.next(JavaScript));// { value: Alice 使用 JavaScript, done: true }4.3 return / throw主动收尾与异常注入iter.return(value)立即终止返回{ value, done: true }触发生成器内的finally。iter.throw(err)将错误注入生成器在内部可被try/catch捕获若未捕获则向外抛出。function*work(){try{yield1;yield2;}finally{console.log(清理资源);}}constit2work();console.log(it2.next());// { value:1, done:false }console.log(it2.return(99));// 清理资源 - { value:99, done:true }4.4 yield*委托/扁平化子迭代器并可接收子迭代器的 returnyield* otherIterable把“迭代控制权”交给子迭代器等价于逐个for...of产出其值。yield*的结果是子迭代器的return值。function*sub(){yield1;yield2;return9;// 会被 yield* 捕获}function*parent(){constretyield*sub();// 产出 1、2并获得 ret9yieldret;// 再产出 return 值}console.log([...parent()]);// [1, 2, 9]yield* 应用递归/扁平化/管道组合function*flatten(tree){for(constnodeoftree){if(Array.isArray(node))yield*flatten(node);// 递归委托elseyieldnode;}}console.log([...flatten([1,[2,[3,4]],5])]);// [1,2,3,4,5]4.5 生成器的执行特性与调试要点惰性直到调用next()才会继续运行适合大/无限序列。单次消费同一个生成器对象不可复位需重新创建。清理在生成器内部用try/finally外部可以return()触发。不可用箭头函数箭头语法不支持function*需常规函数写法。与 for…offor...of自动反复next()直到done:truebreak/throw/return会触发迭代器的return()。5. 可迭代工具箱与常见 API展开/解构[...iterable]、const [a, ...rest] iterable集合转换Array.from(iterable)、new Map(iterable)、new Set(iterable)Promise 组合Promise.all(iterable)、Promise.allSettled、Promise.race需可迭代constsetnewSet([1,2,3]);constarr[...set];// [1,2,3]const[first,...rest]set;// first1, rest[2,3]6. 自定义数据结构可迭代的 Deque类 私有字段classDeque{#data[];pushFront(x){this.#data.unshift(x);}pushBack(x){this.#data.push(x);}popFront(){returnthis.#data.shift();}popBack(){returnthis.#data.pop();}getsize(){returnthis.#data.length;}[Symbol.iterator](){letidx0;return{next:()idxthis.#data.length?{value:this.#data[idx],done:false}:{value:undefined,done:true},return(){return{done:true};},};}}constdqnewDeque();dq.pushBack(10);dq.pushFront(5);dq.pushBack(20);for(constvofdq)console.log(v);// 5 10 20设计建议迭代期间若会修改内部存储需明确顺序定义与终止条件如记录快照或用生成器惰性遍历。大数据/潜在无限序列优先用生成器避免一次性展开耗内存。7. 惰性管道map / filter / take / drop用生成器实现“按需取值”的流式组合。function*map(iterable,fn){for(constxofiterable)yieldfn(x);}function*filter(iterable,pred){for(constxofiterable)if(pred(x))yieldx;}function*take(iterable,n){if(n0)return;leti0;for(constxofiterable){yieldx;if(in)break;}}function*drop(iterable,n){leti0;for(constxofiterable)if(in)yieldx;}constsrc[1,2,3,4,5,6];constpipelinetake(filter(map(src,xx*3),xx%20),2);console.log([...pipeline]);// [6, 12]优势逐元素计算适合大数据、IO 流可轻松扩展更多算子zip、flatMap、chunk、uniq 等。8. 异步迭代器与 for await…of异步可迭代实现Symbol.asyncIteratornext()返回 Promise或用async function*。constasyncCounter{current:1,max:3,async*[Symbol.asyncIterator](){while(this.currentthis.max){awaitnewPromise(rsetTimeout(r,100));yieldthis.current;}},};(async(){forawait(constnofasyncCounter)console.log(n);})();典型场景分页 API、网络流ReadableStream、文件流、数据库游标、消息队列。同步可迭代 Promise 元素for await...of也能遍历“同步可迭代且元素为 Promise”的情况constxs[1,2,3].map(vPromise.resolve(v*10));(async(){forawait(constvofxs)console.log(v);// 10 20 30})();9. 资源管理与提前终止在生成器中用try/finallyreturn()保障资源释放。function*readChunks(reader){try{while(true){constchunkreader.read();if(!chunk)break;yieldchunk;}}finally{reader.close();// 即便 break/throw 也会执行}}在异步生成器中同理使用try/finallyasyncfunction*streamLines(stream){try{forawait(constlineofstream)yieldline;}finally{stream.destroy?.();}}10. 常见坑排查表含错误示例TypeError: object is not iterable缺少Symbol.iterator或拼写错误。迭代器复用多数迭代器是一次性的复用要重新获取obj[Symbol.iterator]()。在for...of中break/throw却未清理资源实现return()或在生成器用finally。for...of误用在异步迭代器应改for await...of。隐式耗尽[...iter]会一次性拉平若是大数据/无限序列会卡死或 OOM改用惰性消费。顺序期待Set/Map保持插入顺序普通对象属性遍历顺序有规则但不属“可迭代”。调试技巧constitsomeIterable[Symbol.iterator]();console.log(it.next(),it.next());// 手动探查序列11. 性能与工程化建议惰性优先未知大小或可能无限的来源用生成器/异步生成器。避免重复遍历对昂贵来源IO/计算避免多次消费可缓存结果或暴露toArray()。批量/背压异步流中可结合take、chunk、throttle控制节奏。类型提示在 TS 中为迭代器声明泛型避免any扩散。组合优先map/filter/take/drop/flatMap/zip 等算子小而精利于单测和重用。清理保证生成器里用try/finally显式实现return()以防资源泄漏。12. 典型模式示例12.1 管道式数据流function*flatMap(iterable,fn){for(constxofiterable){constresfn(x);if(Symbol.iteratorinObject(res))yield*res;elseyieldres;}}constwords[hi,js];constcharsflatMap(words,ww.split());console.log([...chars]);// [h,i,j,s]12.2 无限序列 take 限流function*naturals(){leti1;while(true)yieldi;}console.log([...take(naturals(),5)]);// [1,2,3,4,5]12.3 异步分页封装asyncfunction*fetchPages(fetchPage){letpage1;while(true){constdataawaitfetchPage(page);if(!data.length)break;yielddata;page1;}}(async(){forawait(constpageoffetchPages(papi.list({page:p}))){console.log(page size,page.length);}})();12.4 具备回收的文件读取Nodeconstfsrequire(fs);asyncfunction*readLines(path){conststreamfs.createReadStream(path,utf8);try{forawait(constchunkofstream)yieldchunk;}finally{stream.close();}}13. FAQ 精要何时用生成器 vs 普通函数需要“逐步产出/惰性/可中断/可组合”时用生成器。迭代器能重置吗原生多数不可若需可重复遍历应在Symbol.iterator中返回“新的迭代器实例”。如何判断对象可迭代obj ! null typeof obj[Symbol.iterator] function。async 迭代器如何并行迭代本身是串行消费并行可在内部批量启动 Promise再逐个yield结果注意背压。能否在生成器里用 await不能改用async function*或在外层for await...of。15. 结语迭代器与可迭代协议为 JS 提供统一、可组合的访问抽象生成器/异步生成器进一步让“惰性、流式、可中断”变得自然。工程落地时请同时关注资源释放、背压、可测试性与性能可观测性把迭代封装成可靠的基础设施。