ECMAScript 6中for...of循环及Map解构[key,value]运行原理咨询

嘿，我来帮你拆解这两个问题——先搞明白for...of循环到底是什么，再看看那两段Map代码为啥输出不一样～

一、什么是ES6的for...of循环？ #

for...of是ES6新增的遍历语法，专门用来遍历可迭代对象（Iterable）——比如数组、Map、Set、字符串，甚至自定义的可迭代对象都能用它。

和老的for...in不同：

• for...in遍历的是对象的键名（还会包括原型链上的可枚举键）；
• for...of则是直接遍历可迭代对象的迭代器返回的每一个值，更聚焦于数据本身。

二、Map的迭代逻辑与[key, value]解构 #

首先要明确：Map本身就是一个可迭代对象，它的默认迭代器会按插入顺序返回每一个键值对，每个键值对都是一个长度为2的数组：[键名, 对应的值]。

而[key, value]这种写法就是ES6的数组解构赋值——把迭代出来的这个二元数组，第一个元素赋值给key变量，第二个元素赋值给value变量。这个逻辑在你给出的两段代码里是完全一样的！

三、为啥两段代码输出不同？ #

我们把两段代码拆开看就清楚了：

第一段代码 #

let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (let [key, value] of iterable) {
  console.log(value); // 这里只打印了解构出来的value
}

每次迭代解构出key（'a'、'b'、'c'）和value（1、2、3），但代码里只输出value，所以结果是：

1
2
3

第二段代码 #

var myMap = new Map();
myMap.set(0, 'zero');
myMap.set(1, 'one');
for (var [key, value] of myMap) {
  console.log(key + ' = ' + value); // 这里打印的是key和value的拼接字符串
}

同样的解构逻辑，每次迭代出key（0、1）和value（'zero'、'one'），但这次代码把key和value拼起来输出了，所以结果是：

0 = zero
1 = one

说白了，两段代码的解构运行逻辑完全一致，输出不同只是因为console.log的内容不一样而已～

内容的提问来源于stack exchange，提问作者Rhag