持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第25天，点击查看活动详情

引入

对JavaScript有过一定了解的人都知道，array是可以用下标循环进行遍历的，因为每个array中的元素都具有其隐藏的索引（即我们上面理解的下标）。

但是经过前两天的学习，我们知道Map是一种高级的对象，相对于普通对象，map的键可以是任意值（比如数值Number）

那么有没有高级的array，可以允许我们对其进行遍历？

今天我们就来了解一下iterable这一类型

1.什么是iterable

先回答一下我们上面粗体的问题：

很遗憾，js没有设置一个单独的高级的array来满足我们遍历的要求

因为js有更好的解决办法：

ES6标准中，js引入了iterable这一类型，包括了array、map、set等看上去像是“一个数据序列”的类型

这些interable类型的数据都可以用for of来遍历：

2. for...of循环

我们以一个具体的例子来说明for of循环的用法：

var a = ['1', '2', '3'];
for (var x of a) { // 遍历Array
    console.log(x);
}

我们先声明一个变量a，a中包含了"1"，"2"，"3"三个字符串

紧接着我们用for var x of a 来定义一个x，这就是我们遍历的迭代变量，之后x便会从头一个个变为a中的值

也就是变成“1”、“2”、“3”并推动着进行第一次第二次第三次循环

每次循环执行代码块console.log（x）来把x的值用日志的方式打印出来。

同理用在map和set类型的数据上也是这样：

var s = new Set(['1', '2', '3']);
var m = new Map([[1, 'a'], [2, 'b'], [3, 'c']]);
for (var x of s) { // 遍历Set
    console.log(x);
}
for (var x of m) { // 遍历Map
    console.log(x[0] + '=' + x[1]);//输出键值对
}

3。探讨for of 和for in 的区别

除了上面所说的，map和set不能采用下标循环来迭代之外，for in和for of还有一个非常不一样的地方——

for in会遍历对象的每个属性名称

array本身也是一个对象，他除了有元素之外，还有本身自带的属性。就拿前面的a为例，a作为array包含了"1"、"2"、"3"三个元素。但是如果从更底层的方面来理解，把a看作一个普通的对象，给a增加一个属性，那么for in就会把这个属性也当作一个元素：

var a = ['1', '2', '3'];
a.name = 'juejin';
for (var x in a) {
    console.log(x); // '0', '1', '2', 'name'
}

如上，我们新加的name也被算进去了。

但是我们采用for of就不会出现这样的情况.并且返回的不是元素的下标（索引）而是元素本身

var a = ['1', '2', '3'];
a.name = 'juejin';
for (var x of a) {
    console.log(x); // '1', '2', '3'
}

概括来说，for in更符合计算机逻辑，而for of更符合我们人类的逻辑

新人上路，欢迎互相帮扶~Mr_darcy8的掘金主页

可以的话给咱点个赞呗💖