for of

1. 遍历范围
for...of 循环可以使用的范围包括：
数组
Set
Map
类数组对象，如 arguments 对象、DOM NodeList 对象
Generator 对象
字符串

2. 优势
ES2015 引入了 for..of 循环，它结合了 forEach 的简洁性和中断循环的能力：

        <script type="text/javascript">
            for (const v of ['a', 'b', 'c']) {
              console.log(v);
            }
            // a b c

            // entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)
            for (const [i, v] of ['a', 'b', 'c'].entries()) {
              console.log(i, v);
            }
            // 0 "a"
            // 1 "b"
            // 2 "c"
        </script>    

        3. 遍历 Map
        <script type="text/javascript">
            let arr = [[ 1, 'one' ],[ 2, 'two' ]]
            let map = new Map(arr);

            // 遍历 key 值
            for (let key of map.keys()) {
              console.log(key);
            }

            // 遍历 value 值
            for (let value of map.values()) {
              console.log(value);
            }

            // 遍历 key 和 value 值(一)
            for (let item of map.entries()) {
              console.log(item[0], item[1]);
            }

            // 遍历 key 和 value 值(二)
            for (let [key, value] of map) {
              console.log(key, value)
            }
        </script>

4.for...of与for...in的区别
无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式
for...in 语句以原始插入顺序迭代对象的可枚举属性。（包括原型上的属性）
for...of 语句遍历可迭代对象定义要迭代的数据。

        <script type="text/javascript">
            Object.prototype.objCustom = function() {};
            Array.prototype.arrCustom = function() {};

            let iterable = [3, 5, 7];
            iterable.foo = 'hello';

            for (let i in iterable) {
              console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
            }

            for (let i in iterable) {
              if (iterable.hasOwnProperty(i)) {
                console.log(i); // logs 0, 1, 2, "foo"
              }
            }

            for (let i of iterable) {
              console.log(i); // logs 3, 5, 7
            }
        </script>