看，for..in和for..of在那里吵架！

看，for..in和for..of在那里吵架！

这篇文章发布于 2018年08月6日，星期一，23:57，归类于 JS API。 阅读 45014 次, 今日 59 次 71 条评论

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=7908
本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。

本故事纯属虚构，如有雷同，恭喜你，人品不错。本文6000多字，阅读约15分钟。

今天可是个好日子！

你问我为什么？

你这都不知道，ChinaJoy啊！可是身为瘦宅的我的大日子啊，不说了，我赶时间，我可是偷偷瞒着我老婆出来的，只能出来2小时。

哇塞，好热闹啊！琳琅满目的展位，熙熙攘攘的人群，喔哦哦，一排排的showgirl都长得都好好看，虽然和我老婆比还差点。

突然，旁边一个戴眼镜的小胖子一声大叫：“看，for..in和for..of在那里吵架！”

我顺着望去，只见2点钟方向有一群穿着格子衫背着电脑包的人在围观什么，直觉告诉我，此事不简单，于是就走过去一看究竟。

一打听，原来是两个人在争论谁给“天上地下，唯我独萌”的血小板拍照效果好。

不过这两人长得好像啊，是亲兄弟吧，一时间分不清谁是谁，等下，两人头上帽子上的文字好像不一样，一个是“淫”，一个是“污”。我摸了摸我性感的下巴沉思了下，哦，立马豁然开朗。“淫”指的是for..in，in读音和“淫”近似；“污”指的是for..of，of读音和“污”近似。哈哈哈，我可真是个“淫才”，不过听起来好像不太和谐，我还是用IN和OF代替他们吧。

IN说：“我第一届ChinaJoy就过来拍照了，整个圈子谁不认识我！”众人点头。

OF说：“大叔，现在都什么年代了，细胞都谈恋爱了，拍照这种事不是越老就越厉害的！”

IN说：“我可以360度无死角拍美照！”

OF说：“好巧啊，我也可以360度无死角拍美照！”

就这样，IN和OF你一句我一句，吵得不可开交，完全没有个头，我实在看不下去了，直接走上前，大手一摆，劝架道：“内个，你们二位，先冷静下！”

“你是哪根葱啊？”

“我……张思聪！”说完，两人脸色缓和了些，我立即继续说道：“你们这样争论是没有什么结论的，要不这样，你们直接就把你们那个360度技术当场展示下，我们这一圈观众给你们评判，放心，你瞧我们打扮，一看就是程序员，程序员是出了门的老实，一定会评判公正的。”

IN和OF一脸不可信的表情。

我没办法，直接抓住旁边人就问：“你是程序员吗？”

“我是，我是腾讯的，我做前端的。”

“哎呀，好巧啊，我也是做前端的，我是阅文的。”

“我是阿里的……我从北京来的……我做区块链的，我做金融的……”大家纷纷表明了自己的身份。

“你看现在围观的全部都是程序员，技术男，绝对靠谱，不知你们意下如何？”

IN和OF面面相觑了一下，说道：“好吧，我们同意了，接下来我们依次展示我们技能，你们可都要看仔细了。”

//zxx: 双方接下来使出的技能我都加粗了

---

“IN前辈，你是前辈，遵老爱幼，你先来！”OF说道。

“好，恭敬不如从命！”IN回道，然后开始展示自己才艺，只见一个跃起，360度大回环，口中喊道：“我可以枚举对象。”然后一顿咔咔咔咔闪光灯，然后照出了下面的画面：

var obj = {
  a: 1,
  b: [],
  c: function () {}
};
for (var key in obj) {
   console.log(key);
}
// 结果是：
// a
// b
// c

“怎么样，厉不厉害？”围观众人啧啧称赞。

“呵呵！”OF冷笑了下，“这有啥，看我的！”听这口气，OF要鸟起了，众人投来期盼目光。

只见OF从背后抽出一个40米的相机，也是一顿咔咔咔咔，然后一个跃起，360度大回环，只听见哎呀一声，OF摔了个大跟头，画面如下：

var obj = {
  a: 1,
  b: [],
  c: function () {}
};
for (var key of obj) {
   console.log(key);
}
// 出错：
// Uncaught TypeError: obj is not iterable

众人纷纷摇头，嘘声四起。

IN在那里哈哈仰头大笑：“OF你胆儿还真肥，连个简单的对象枚举都搞不定，也敢和我争高下！实话告诉你，我不仅可以枚举纯对象，我还可以枚举数组。”

只见一顿操作后浮现出下面的画面：

var arr = [3, 5, 7];
for (var i in arr) {
   console.log(i);
}
// 结果是：
// 0
// 1
// 2

众人纷纷点头表示get到了点。

“呵呵！”OF冷笑了下，“这有啥，看我的！我可以迭代数组。”同样的口气，不过这次众人已经提前开始摇头了。只见从左往右一顿拍，然后出现了下面的画面：

var arr = [3, 5, 7];
for (var i of arr) {
   console.log(i);
}
// 结果是：
// 3
// 5
// 7

围观众人似乎之前没见过这样的场景，纷纷交头接耳。

也不禁激起了我自己的兴趣：“有意思！for..of原来是直接输出了数组的值。只是……”

“哈哈！”IN又得意地笑了起来，“OF啊OF，你走的是哪一出啊，你只能‘枚举’出数组的值，数组的索引你就这样放弃了？你看我，能输出索引，也能输出值。”

var arr = [3, 5, 7];
for (var i in arr) {
   console.log(i, arr[i]);
}
// 结果是：
// 0 3
// 1 5
// 2 7

众人再次啧啧称赞，看来for..in胜出的概率较大啊。

IN似乎有些得意过头，继续得瑟道：“我不仅可以枚举数组自身。数组的原型对象，以及数组对象本身属性值，我都可以枚举出来！OF，你可以吗？”

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

var arr = [3, 5, 7];
arr.foo = 'hello';

for (var i in arr) {
   console.log(i);
}
// 结果是：
// 0
// 1
// 2
// foo
// arrCustom
// objCustom

这不得瑟还好，这一得瑟反而让OF抓住了小把柄：“哟哟哟，连原型对象都出来了，这实际工作开发，这些对象很可能是不需要的，你不管三七二十一全部枚举出来，你就不担心出问题吗？”

这一问一瞬间让IN语塞，好在还算机灵，立马想到一个东西，假装淡定回复道：“这个不用担心，我有另外一件利器，名为hasOwnProperty，可以避免出现你说的问题，大家请看~”

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

var arr = [3, 5, 7];
arr.foo = 'hello';

for (var i in arr) {
   if (arr.hasOwnProperty(i)) {
    console.log(i);
  }
}
// 结果是：
// 0
// 1
// 2
// foo

OF先是一惊，IN这老家伙还有这一手，可定睛一看，哈哈大笑了起来，“哟哟哟，你看看你，数组本身的属性看来你是怎么也摆脱不掉了哦！”

IN一瞅，哇擦，怎么还有个foo，顿时尴尬不已，冷汗四起，支支吾吾，蹦了一句：“这种情况，我……我可以让我的好朋友forEach过来帮忙，他的表现是这样的~”

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

var arr = [3, 5, 7];
arr.foo = 'hello';

arr.forEach(function (value, i) {
  console.log(i);
});
// 结果是：
// 0
// 1
// 2

说完IN立马脸色好转，面露微笑，暗自庆幸自己人脉广，人机灵。谁知OF不断哈哈大笑，笑得IN心里毛毛的，难道又要搞出什么幺蛾子。

只见OF慢悠悠向前踱了两步，一脸轻蔑地说道：“forEach，我知道的，呵呵呵，前段时间我们刚笔试过，我的手下败将，不值一提。”然后对着围观的群众大声说道：“这个forEach啊，只能遍历数组，怎么能跟我比；就算比试‘遍历’数组，forEach跟我比也是逊色几分的。你们可能不知道吧，forEach遍历数组的时候是无法break或者return false中断的。比方说~”

var arr = [3, 5, 7];

arr.forEach(function (value) {
  console.log(value);
  if (value == 5) {
    return false;
  }
});
// 结果是：
// 3
// 5
// 7

“大家看到没，return false根本就没作用，一直循环到底。”众人纷纷点头表示认同，OF继续说道：“那我就不一样了，我直接一个break就能中断循环，可谓能进能出，我给大家表演下。”

只见OF腰间抽出一把40CM长刀，对着自己腰部直接就砍啊，眼睛都不眨一下，众人纷纷侧目不忍直视，胆大的人瞄了瞄，看到了下面的画面：

var arr = [3, 5, 7];

for (let value of arr) {
  console.log(value);
  if (value == 5) {
    break;
  }
}
// 结果是：
// 3
// 5

大家一看，果然数组最后一项7没有输出，果然循环中断了，而且……大家仔细看了看，OF虽然砍了自己一刀，不过看上去并没有任何伤害！众人不禁纷纷喝彩鼓掌起来。

IN在一旁看傻眼了，OF则得意洋洋，开始乘胜追击：“哎呀，有些人啊，没见过世面，不知道动漫的世界里先手都是输嘛，哈哈哈。现在，是时候展现真正的技术了！”只见OF口中念念有词，突然，手中白光一闪，出现了几件宝物，众人眼睛都看直了。

只见OF不紧不慢地说道：“洒家我的技能叫做‘迭代’，跟IN那种‘枚举’不是一个level的。我呢不仅可以迭代数组，我还可以直接迭代字符串，大家可以围过来看一看啊……”

我凑上前一看，果然可以啊！

let str = 'boo';

for (let value of str) {
  console.log(value);
}
// 结果是：
// "b"
// "o"
// "o"

IN支支吾吾说不出话来了，因为这个自己真的不支持，强行执行也没反应（更新：这是是因为IN的记忆还停留到过去，曾经的自己是不支持字符串遍历，IE9+之后才支持）。

OF继续说道：“我还可以直接迭代arguments类数组对象，且看~”

(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);
// 结果是：
// 1
// 2
// 3

“喔噢，这个好！”围观的程序员们纷纷竖起了大拇指。

“还没完呢，嘻嘻……我还可以迭代NodeList这类DOM集合，无需[].slice.call()，也不需要Array.from()进行数组转化，我可以直接用起来~”

let elements = document.querySelectorAll('body');

for (let element of elements) {
  console.log(element.tagName);
}
// 结果是：
// "BODY"

“喔哦哦喔，这个更好！”围观的程序员开始欢呼，开始激动，人群涌动，已经把IN挤到了圈外。

IN在圈外，大声疾喊，“我……我也可以遍历类数组的……”，只是一个人的声音如何跟人群比，早已湮没在众人的喊叫声中。

我心想：看来，这场比试，如果没有奇迹的话，for..of应该就赢了！身为发起这场比试的我已经打算宣布for..of下半场翻盘获胜，结果for..of继续不依不饶秀自己技能。

“我还可以迭代类型数组~”

let typeArr = new Uint8Array([0x00, 0xff]);

for (let value of typeArr) {
  console.log(value);
}
// 结果是：
// 0
// 255

“我还可以迭代Map~”

let mapData = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (let [key, value] of mapData) {
  console.log(value);
}
// 结果是：
// 1
// 2
// 3

“我还可以迭代Set~”

let setData = new Set([1, 1, 2, 2, 3, 3]);

for (let value of setData) {
  console.log(value);
}
// 结果是：
// 1
// 2
// 3

“我还可以迭代generators……”

完了完了，已经完全成了for..of专场了，我看了看一旁灰头土脸，毫无生气的for..in，不禁担忧，这场比试会不会让for..in怀疑人生，从此从CJ圈消失啊，甚至直接从大悦城一跃而下……我越想越后怕，赶快打住：“够了够了！”

OF见我打断其表演有些不开心，我就说了这么一句：“少侠，得饶人处且饶人。我们在场所有人都认为你武艺高强，相比for..in要更胜一筹。”OF立马脸色好了很多，一脸趾高气昂。

我平生最看不惯那些拽拽的人，OF和IN都不知道谦逊，我都没什么好感。不过身为裁判，还是要公正，于是，我就说道：“在宣布比赛结果之前，我先对两位精彩的比试做个总结。对于纯对象的遍历，for..in要厉害一些，大家相信都看到了；对于数组遍历，如果不需要知道索引，for..of迭代更合适，因为还可以中断；如果需要知道索引，则forEach()更合适；对于其他字符串，类数组，类型数组的迭代，虽然for..in也有这方面能力，只是从今天的比赛场面来看，for..of更占上风，因此，我宣布，本次比赛的获胜者是……”

OF在舞台中央，洋洋得意，准备享受宣布胜利时候的荣光，就在此时，人群一阵哗然，什么情况，卧槽，一群血小板突然走了过来。“卡哇伊……”众人不禁齐呼，眼睛都放出了40瓦灯泡亮度的光，身子直接都软掉了！

“血小板，你来得正好，我们正在给for..in和for..of评判谁拍照技术好，有资格可以做你的御用摄影师。”

结果血小板用超萌的小奶音回复我：“帅气的小哥哥，可不可以我们自己选？”

“当然，当然可以！你选，我想IN和OF两位大人应该不会有任何意见的。”

“对的，没有异议。”自信的OF率先附和。

“我也没意见。”远处的IN随便举了个手无精打采回复道。

“那好！”只见血小板说完，走到了for..in那里，举起了for..in的双手，说道：“我要for..in做我的摄影师！”

“啊？？？？”众人下巴都惊得掉在了地上，“为啥？？”

“那个，那个……”血小板萌奶音回答道，“这次的照片要在微软名为IE的杂志和网站上展示，for..of大人虽然技能更广，但是毕竟是ES6新特性，IE浏览器不支持，因此，这次我选兼容性更好的for..in！”

然后，众人就眼睁睁看着for..in在众多萌萌的血小板的包围中离开了！而for..of双手撑地归在冰冷的地面上，留下了悲伤的泪水。

“唉……”众人纷纷叹息，“世事难料啊！”然后人群逐渐散开了。

我驻足了片刻，也无能为力，准备离开，突然想到一件事情，我一看手机，我拉个擦，出门到现在已经过去1个小时60分钟了！想到晚上爽脆的搓衣板，我也双手撑地归在冰冷的地面上，留下了悲伤的泪水。

此刻，偌大的展馆中央，有两人悲伤的人儿，他们的泪水，让今年的ChinaJoy显得格外得动人！

参考文章

• MDN for…of

感谢阅读，如果你觉得故事写得不错，欢迎分享给其他小伙伴一起来过来围观for..in和for..of吵架。

（本篇完） 是不是学到了很多？可以分享到微信！
有话要说？点击这里。