美文网首页
说说for..in和for..of那点事

说说for..in和for..of那点事

作者: 不忘初心_9a16 | 来源:发表于2018-08-20 16:51 被阅读79次

    今天可是个好日子!

    你问我为什么?

    你这都不知道,成都新会展车展啊!可是身为瘦宅的我的大日子啊,不说了,我赶时间,我可是偷偷瞒着我老婆出来的,只能出来2小时。

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

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

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

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

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

    IN说:“我第一届就过来拍照了,整个圈子谁不认识我!”众人点头。

    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支支吾吾说不出话来了,因为这个自己真的不支持,强行执行只会报错。

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

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

    // 1

    // 2

    // 3

    “喔噢,这个好!”围观的程序员们纷纷竖起了大拇指,而IN则蹲在一旁不说话了。

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

    let elements = document.querySelectorAll('body');for (let element of elements) {  console.log(element.tagName);}// 结果是:

    // "BODY"

    “喔哦哦喔,这个更好!”围观的程序员们已经开始激动地不能自已,而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..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分钟了!想到晚上爽脆的搓衣板,我也双手撑地归在冰冷的地面上,留下了悲伤的泪水。

    此刻,偌大的展馆中央,有两人悲伤的人儿,他们的泪水,显得格外得动人!

    相关文章

      网友评论

          本文标题:说说for..in和for..of那点事

          本文链接:https://www.haomeiwen.com/subject/vvyliftx.html