JavaScript循环控制与遍历

for循环，while循环和do...while循环作为编程语言的基础，在JS中用法也类似，这里主要说明几种不同的用法。

1、map和set

我们首先需要来认识一下map和set。二者在不同方向上帮助我们进行数据的管理，就map而言，它帮助我们建立了类似数学中序偶的概念，将两个值绑定起来，认定第一个为key值，第二个为value值，通过查询key值可以得到value值，删除操作也是根据key值对map进行操作。

图1.1 map的基础操作

而set则是帮我们去除输入的重复元素，帮助我们完成了去重的任务。

图1.2 set的功能和操作展示

 

2、循环控制

在了解了map和set这两个特殊的“数组”之后，我们可以开始接触一些JavaScript中的循环书写方法：

首先是for...in循环，书写方法为：for(x in m){循环体}。其中，x获得了每个下标，从0开始，而m则是被循环的数组。由于该循环是利用下标进行遍历，因此set和map不能使用该方法进行方便的遍历。

图2.1  for...in循环遍历数组

然后是for...of循环，书写方法与for...in循环相同，区别在于这里的x获得的是每个值，而不是下标。for...of循环的遍历对象是iterable类型，而我们的set和map都属于该类型，因此可以使用of循环进行遍历。

图2.2 for...of循环遍历三个数据结构

之后是foreach方法，这也是一种更高级并且更好的方法，他通过调用function函数，每次都回调该函数，数组，set和map的主要区别就在于该函数的之中，由于set没有索引，因此前两个值相同，都是该数的值，而map则分别返回两个值，key值和value值，之后再返回map本身。

图2.3 foreach循环的遍历

在调用数组循环的时候，其实我们可以发现数组有一个“bug”，我们可以向数组中添加属性和值，在使用for...in循环时则会将其输出，而其他循环方式则不会，如下图所示：

图2.4 小“bug”