4.5　ECMAScript 6新特新 ——for of迭代循环

ECMAScript 6语法规范新增加了一个“for of”循环迭代语句，专门用来针对可迭代的JavaScript对象执行迭代操作。下面通过几个简单的代码实例，介绍一下“for of”循环迭代语句的使用方法。

4.5.1　迭代数组

使用“for of”循环迭代语句主要用于迭代数组。下面，我们就看一个使用“for of”循环迭代语句迭代操作数组的代码示例（详见源代码ch04目录中ch04-js-for-of-arr.html文件）。

【代码4-17】

   01  <script type="text/javascript">
   02       var arr = new Array();
   03       for (let i = 0; i <= 3; i++) {
   04           arr[i] = i;
   05       }
   06       for (let j of arr) {
   07           console.log("j = " + j);
   08       }
   09  </script>

关于【代码4-17】的分析如下：

第02行代码定义了一个数组变量（arr），并通过第03～05行代码中for语句进行了初始化赋值（数字0～3）；

第06～08行代码中通过for…of…循环迭代语句对数组变量（arr）进行了迭代操作，并将结果输出到浏览器控制台中。

页面效果如图4.19所示。从浏览器控制台中的输出结果来看，通过for…of…循环迭代语句对数组变量（arr）进行了迭代操作。

图4.19　for…of…循环迭代语句操作数组

4.5.2　迭代字符串

使用“for…of…”循环迭代语句另一个最常用的操作就是迭代字符串。下面，我们就看一个使用“for…of…”循环迭代语句操作字符串的代码示例（详见源代码ch04目录中ch04-js-for-of-string.html文件）。

【代码4-18】

   01  <script type="text/javascript">
   02       var str = new String("abcde");
   03       console.log("--- for of 'abcde' ---");
   04       for (let c of str) {
   05           console.log(c);
   06       }
   07  </script>

关于【代码4-18】的分析如下：

第02行代码定义了一个字符串变量（str），并初始化为“abcde”；

第04～06行代码中通过for…of…循环迭代语句对字符串变量（str）进行了迭代操作，并将结果输出到浏览器控制台中。

页面效果如图4.20所示。从浏览器控制台中的输出结果来看，通过for…of…循环迭代语句对字符串变量进行了迭代操作，返回的结果为单个字符的序列。

图4.20　for…of…循环迭代语句操作字符串

4.5.3　for of循环迭代原理

这里再补充介绍一下“for…of…”循环语句的循环迭代原理，其实ECMAScript 6语法规范中新提供的“for…of…”循环迭代语句是通过迭代器“Symbol.iterator”方法来实现的。迭代器“Symbol.iterator”中定义了一个“iterator.next()”方法用于依次遍历迭代对象中的每一个值，直到遍历完成才会退出，而“for…of…”循环迭代语句就是通过该机制实现了循环迭代操作。感兴趣的读者可以去阅读一下官方的ECMAScript 6语法规范文档。

那么，既然“for…of…”循环迭代语句是通过迭代器“Symbol.iterator”方法来实现的，那么被迭代的对象就是有要求的，并不是所有ECMAScript定义的对象均可以应用“for…of…”语句，主要对象有数组、字符串、Set对象和Map对象这几种，如果尝试对其他类型的对象应用for…of…语句则很可能会抛出异常。 wUz1xridtBp5SbM14/y75isGrqB5PpyeQKjpGVJ9X5I25w9uIKvPh/8k8hRF+IlX