一个bug的收获-数组、对象的遍历、数组的筛选、react调试工具

向来对bug有虔诚的尊重。因为自己迂回向前的过程中，bug是黑暗中的灯塔。

就在昨天，一个bug引发了连锁反应。

场景

功能测试完毕之后，到了PO那里进行验收，发现某个条件下的查询结果给出了异常提示。

前天晚上在家码的这部分功能，过程中确实有一个问题，是在条件判断里没有将数组中的多余元素删除，所以会出现异常提示，已经修改过了。现在又出现了，可能哪块又有问题了。

然后就有了如下的学习

react调试工具–VSCode中的Debugger for Chrome

对于写代码来说调试很重要，不然就和瞎子摸象一样。

接触react时间很长，实际开发深度却很浅，抛异常居然手足无措。日常在这种战场，用关键代码地方加入调试语句，然后或看控制台、或看alert提示框这种小米加步枪的形式，基本可以解决大部分调试需要。

此时的现在却明显感觉到束手束脚，在浏览器中直接调试js代码直接打断点，很方便。可是现在这个打包了之后的东西要怎么弄？

果然实践才能证明真理的重要性，这中时候才会去想我要怎么做才可以方便的调试react。

学东西不求太完美，够用就好，一轮查询后vscode中下载Debugger for Chrome插件，就可满足。

数组中筛选元素–filter

死脑筋的我对过滤数组使用for循环情有独钟中，下图是导致出现异常的原因

然后我的做法是不再删除，而是搞一个新数组，把符合的元素存到这个新数组里。然后去群里本着炫耀的态度去说教了一番，没多久一个英勇少年出现了，说可以使用filter或者map。首先内心响起一个尴尬的声音，这。。。。。

不过我向来都是不耻下问，承认不会并不可耻，谦虚学习就好了。顶着自己老旧的光环和标签对他人的能力嫉妒且嗤之以鼻可就危险了。

不以物喜不以己悲，允许自己有不懂，不懂之后虚心求教，无关乎对方是80后、90后、00后、甚至2020后，学习面前人人平等，记得要摘掉有色眼镜，带时间长了会头晕的。

所以对于别人说是不是觉得被后浪推前浪了，觉得年龄太大没人家年龄小有优势呀这种说辞，会一概略过。为什么年龄小的就必须比我懂得少，为什么我就必须不能有不懂得，为什么我必须要为这种情况感到羞愧、难过、嫉妒。自己给自己贴标签真的很傻气，无论之前怎么样，你只是现在的你，和别人眼里的你无关。

数组遍历–map方法、for…of

昨天的bug学到了filter的好处，三行代码直接覆盖了原来六行还有bug的代码。今天功能中又有了对象套数组，数组套对象的遍历场景。举一反三这种能力其实是很可怕的，好吧。

既然新的方法这里好用，那就用map遍历呗。N旧之前的记忆告诉我数组和对象可能都能用map方法，正好数据第一层是对象，一试报异常，obj.map is not a function，傻了。搞可以，不能上来就瞎搞，我就是在瞎搞。赶紧查大犀牛，map方法明确是数组的方法。

ES6中记得还见过for…of，拿来继续用来遍历对象，依然报错，obj is not iterable，对象不是可迭代的。继续查阮一峰教主的ES6，上边赫然写着适用：数组、Set、Map，我又在乱搞。

对象的遍历–for…in

通过数组的试错，对象的遍历方法也明白了，感情之前一个for循环走遍天下，此时确实不怎么灵光了。

奖励

学到这么多值了，得隆重感谢一下PO小姐姐，群里千言万语表白了一下，她说要糖，今天中午去便利蜂七块九买了一袋，给了她一块，给孩子高兴坏了。一袋糖放到抽屉里，下次收到有意义的bug就给一块糖奖励。

最后

尊重bug，更要感谢提出它们的人，撸代码的路上不可或缺。