小白前端别慌：搞懂JS内置可迭代对象，写代码不再手抖（附实战技巧）

友情提示：本文全程碎碎念，代码比字多，建议收藏后慢慢啃，别在地铁里看，容易坐过站。

为啥for…of一用就报错？——先别骂浏览器，它真没针对你

昨晚十一点，我刚把奶茶放到键盘旁边，准备用for...of循环秀一波优雅，结果控制台啪地甩我一句：

Uncaught TypeError: xxx is not iterable

我当时差点把奶茶喷屏幕上。冷静下来一看，原来我把一个普通对象扔进了for...of，浏览器表示：臣妾做不到啊！

这就好比你跟老板说“我要把公司股权for...of一下”，老板只能送你一句“出门右转劳动局”。

所以，先搞清楚谁才有资格被for...of宠幸，后面才不会天天踩坑。

其实你天天都在用可迭代对象，只是自己不知道

别不信，你现在打开控制台，随手写：

constarr=[1,2,3];for(constvofarr)console.log(v);

这段代码能跑，是因为数组天生自带Symbol.iterator。
换句话说，数组出生那天就拿到了“可被for...of”的绿卡，而你自己写的对象，大概率还是黑户。

啥是可迭代协议？说人话就是“能被for…of遍历的家伙”

官方文档写得像天书，我给你翻译成人话：

可迭代协议 = 一个对象，它身上有个**Symbol.iterator**的钥匙，浏览器拿这把钥匙就能打开for...of的大门。

钥匙长啥样？来，上代码：

// 最低配版“可迭代对象”constmyIterable={[Symbol.iterator](){leti=0;return{next(){if(i<3){return{value:i++,done:false};}return{value:undefined,done:true};}};}};// 试试能不能for...offor(constvofmyIterable){console.log(v);// 0 1 2}

看懂没？

• Symbol.iterator必须是个函数，调用后返回一个迭代器对象。
• 迭代器对象必须带next()方法，每次调用返回{value, done}。
• done: true表示“老板，没货了”。

Array、String、Map、Set这些老熟人，原来都偷偷实现了[Symbol.iterator]

你以为你在写业务，其实你在天天蹭内置迭代器。

// 1. 数组[...['a','b','c']];// ['a', 'b', 'c']// 2. 字符串[...'kimi'];// ['k', 'i', 'm', 'i']// 3. Mapconstmap=newMap([['key1','val1'],['key2','val2']]);for(const[k,v]ofmap)console.log(k,v);// 4. Setconstset=newSet([1,2,3,3,3]);console.log([...set]);// [1, 2, 3] 自动去重，爽不爽？

想看它们到底怎么实现的？把原型扒出来：

console.log(Array.prototype[Symbol.iterator]);// ƒ values()console.log(String.prototype[Symbol.iterator]);// ƒ [Symbol.iterator]()console.log(Map.prototype[Symbol.iterator]);// ƒ entries()console.log(Set.prototype[Symbol.iterator]);// ƒ values()

看到没，人家早就写好了，你只是调用方，别再把功劳归给自己“代码感”好。

arguments和NodeList：看着像数组，其实是个“伪君子”，但也能迭代！

arguments长得一副“我是数组”的脸，其实原型链上根本没Array.prototype，所以push、pop全都没有。
但好消息：它实现了迭代器，所以for...of照样能跑：

functiondemo(){for(constargofarguments)console.log(arg);}demo(1,2,3);// 1 2 3

NodeList也一样：

// 假设页面有仨<p>constps=document.querySelectorAll('p');for(constpofps)p.style.color='tomato';

如果你想“真数组”一把，请用Array.from或者[...]：

constrealArr=Array.from(arguments);// 真·数组，push pop随便玩

TypedArray、Generator这些高阶玩家也混在可迭代圈子里

TypedArray家族（Int8Array、Uint16Array…）也是内置迭代器：

constu8=newUint8Array([255,0,128]);for(constbyteofu8)console.log(byte);

Generator函数更骚，返回的生成器对象本身就是迭代器，所以也能for...of：

function*gen(){yield10;yield20;yield30;}for(constvofgen())console.log(v);// 10 20 30

可迭代 ≠ 可索引！别再拿length当万能钥匙了

很多后端转前端的小伙伴，习惯用for (let i = 0; i < obj.length; i++)走天下。
但可迭代和可索引是两码事：

• 可索引：有length、能用obj[i]，比如数组、字符串。
• 可迭代：有Symbol.iterator，比如Map、Set，它们压根没length。

所以，看到Map别傻乎乎写：

constmap=newMap([['a',1],['b',2]]);console.log(map.length);// undefined

正确姿势：

console.log(map.size);// 2for(const[k,v]ofmap){/* ... */}

想让自己的对象也能被for…of？三行代码搞定

来，给你一张“绿卡”模板，复制即用：

constmyCollection={data:['html','css','js'],*[Symbol.iterator](){for(constitemofthis.data)yielditem;}};// 试试for(consttechofmyCollection)console.log(tech);

三行：[Symbol.iterator]+ yield，完事。
如果你连yield*都没兴趣记，那就直接 delegating：

[Symbol.iterator](){returnthis.data[Symbol.iterator]();// 直接甩锅给数组}

浏览器控制台里随手试：Object.keys() 和 for…in 的坑你踩过没？

普通对象不能for...of，但你可以曲线救国：

constobj={foo:1,bar:2};// 1. 只想要值for(constvofObject.values(obj))console.log(v);// 2. 想要键值对for(const[k,v]ofObject.entries(obj))console.log(k,v);

注意，for...in会把原型链可枚举属性也拖出来：

Object.prototype.parent='oops';for(constkinobj)console.log(k);// foo bar parent

所以团队规范里，for...in必须配合hasOwnProperty，否则哪天谁给原型加了属性，你就等着加班吧。

性能党注意：展开运算符(…)背后其实是调用了迭代器

[...arr]看着很甜，复杂度O(n)，别在百万级数据上乱撒糖：

constbig=newArray(1e6).fill(0);constcopy=[...big];// 内存瞬间翻倍

真·大文件流式处理，请用generator+for...of逐条消费，而不是一口气展开。

遇到“xxx is not iterable”别懵，先看它有没有Symbol.iterator属性

调试口诀：

1. 控制台输入：yourObj[Symbol.iterator]
2. 如果输出undefined→ 黑户，赶紧给绿卡（上文的模板）。
3. 如果输出function→ 合法公民，再检查是不是调用方式错了。

自定义迭代器时别乱return，done和value要配对出现

手写迭代器最容易翻车的是：提前return却忘了done: true，for...of会以为你还有货，继续调用next()，结果value是undefined，逻辑直接崩。

// 错误示范next(){if(this.i<this.data.length){return{value:this.data[this.i++]};}// 漏了return { done: true }}

正确：

next(){if(this.i<this.data.length){return{value:this.data[this.i++],done:false};}return{done:true};// value可省略，默认undefined}

别把迭代器和生成器搞混了，一个负责“怎么走”，一个负责“边走边造”

• 迭代器：任何一个对象，只要有next()方法，返回{value, done}，就叫迭代器。
• 生成器：函数写个*，调用后返回的生成器对象既是迭代器，又能yield值。

一句话：生成器是迭代器的亲儿子，但迭代器不一定是生成器。

用解构赋值拆可迭代对象时，小心无限迭代把自己卡死

const[a,b,c]=infiniteGen();// 无限yield，直接卡死浏览器

真要对无限序列解构，请只拿前面几个：

const[first,second]=take(infiniteGen(),2);// take自己实现

实战场景：批量处理DOM节点、合并多个数据源、懒加载列表

1. 批量改DOM

function*walkDom(el){yieldel;for(constchildofel.children)yield*walkDom(child);}for(constnodeofwalkDom(document.body)){if(node.tagName==='IMG')node.loading='lazy';}

2. 合并多个接口数据

asyncfunction*mergeRequests(urls){for(consturlofurls){constdata=awaitfetch(url).then(r=>r.json());yield*data;// 把每条记录逐个吐出来}}// 使用forawait(constitemofmergeRequests(['/api/a','/api/b'])){console.log(item);}

3. 懒加载长列表（虚拟滚动）

function*chunkGen(list,size){for(leti=0;i<list.length;i+=size)yieldlist.slice(i,i+size);}constrows=newArray(10000).fill(0).map((_,i)=>`Row-${i}`);for(constchunkofchunkGen(rows,100)){render(chunk);// 每次只渲染100条awaitwaitScrollBottom();// 伪代码：等用户滑到底}

调试小妙招：console.log([…yourObj]) 快速看能不能展开

百试百灵：

console.log([...maybeIterable]);// 如果这里没报错，基本稳了

别信网上那些“所有对象都能迭代”的鬼话，普通对象就是不行！

再强调一次：
普通对象没有Symbol.iterator，不能for...of，不能[...obj]。
除非你自己给它盖绿卡，否则天王老子来了也不行。

想玩高级的？试试用yield*委托另一个可迭代对象

function*a(){yield1;yield2;}function*b(){yield0;yield*a();// 把a的货全部接过来yield3;}console.log([...b()]);// [0, 1, 2, 3]

这招在树形结构里递归贼好用，代码比你手写栈清爽一百倍。

团队协作时，别偷偷给Object.prototype加iterator，会炸的！

Object.prototype[Symbol.iterator]=function*(){for(constkofObject.keys(this))yieldthis[k];};

看似方便，全局污染，第三方库直接哭给你看。
真想公用，请封装工具函数，或者给单独的配置对象加，别动原型。

下次同事问“这玩意能for…of吗？”，你可以装作很懂地点点头

先默念三句：

1. 有没有Symbol.iterator？
2. 有？稳。
3. 没有？盖绿卡或者Object.keys()走曲线。

然后淡淡地回他：“先拿...展开试试，报错就补迭代器，五分钟的事。”
逼格瞬间+50，今晚的奶茶有人请了。

写到这儿，我键盘上的奶茶渍已经凝固了，但你看完要是还敢把普通对象塞进for...of，我就……继续给你写第二篇。

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！