百宝箱系列之10篇：前端JS数组遍历方式

距离上一次冒泡已经过去了25天了，最近真的很忙，瞎忙。很久没学习了，今天有点时间，聊一聊前端中非常普遍的遍历操作。

一、写在前面

在遥远的时代里，当我在17年刚接触计算机时，我只会一个for循环，那时候还是var的天下，虽然此时此刻我才突然领悟到最原始的才是最强大的，但丝毫不影响我在毕业来公司后，第一次接触学习ES6时，又学会了一个map函数，我的天哪，那时候所有的循环都是用map来实现，好用的不得了，对for循环一顿唾弃，感叹太落后，后来随着技术水平的有点小提高，发现map函数被严重滥用了，很多不适合的场景也都用map去遍历，从来没有考虑过适合与否。

后来啊，从心底上摒弃了map函数，只要不是需要对数组元素进行遍历处理，然后返回新数组的场景，一律不用来无返回值的数组遍历。此时，把目光转到了forEach函数上，我靠，又学会了一个新函数，那还不得一直用，其实到现在为止，我又发现了forEach函数又被我严重滥用了，因为用的多了，就越来越明显的感觉到其是有设计场景的：forEach中不能使用break和return进行中断和返回，这一点会造成很严重的性能浪费和代码不简洁。举个例子吧，遍历判断是否负荷条件，符合的话就跳出了，可如果用forEach找到了也无法break，必须使用if()将整个代码块包裹起来，层次又深了一层。

我们总是会重复地犯同一个错误，学会了吃快餐，而不去考虑底层的原理。以前的程序员谈论的向来是很纯粹的，现在的程序员尤其是刚从业的同学，嘴里大谈特谈框架、工具，却可能连数据结构都没搞清楚，连一个int占几个字节都模糊不清，这个事，我觉得在座的各位都有责任。

二、正文——数组遍历方式

1.普通for循环，永远滴神

	let arr = [1, 2, 3, 4, 5, 6];
    for (let i = 0; i < arr.length; i++) {
      console.log(arr[i])
    }

2.forEach函数

	let arr = [1, 2, 3, 4, 5, 6];
    arr.forEach((value, index) => {
      console.log(index + "-" + value);
    })

3.for…in循环——严格禁止对数组使用for…in，坑太多了

	let arr = [1, 2, 3, 4, 5, 6];
    for (let value in arr) {
      console.log(value);
    }

4.for…of循环，可以使用break哦

	let arr = [1, 2, 3, 4, 5, 6];
    for (let value of arr) {
      console.log(value);
    }

5.map函数——不能使用break，return，不推荐

	let arr = [1, 2, 3, 4, 5, 6];
    arr.map(value => {
      console.log(value);
    })

6.其实还有很多方式，都可以实现数组遍历，只是强求实现而已，不再提及。

三、写在最后

选择什么样的遍历方式，首先需要判断是全部遍历还是条件遍历，如果全部遍历，那么forEach请求出战，for…of完全胜任。如果符合某个条件后就跳出循环，则首选for…of循环，随心所欲，如果还需要下标怎么办，别纠结了普通的for循环吧，普通for循环可代替一切。

四、思考

如果是单个对象遍历怎么办？采用什么方式呢？

如果是数组对象（数组的元素是对象），这个应该是非常非常普遍的接口返回数据格式了吧？这种情况又改如何处理数据呢？

可以由此查下资料学习下，只有自己强大，才能又更多的选择。加油。