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>