4个Javascript中的for循环

　　在 ECMAScript5（简称 ES5）中，有三个循环。在 2015 年 6 月发布的 ECMAScript6（简称 ES6）中，新增了一种循环类型。他们是： for for in for each for of
　　今天，就让我们一起来看看这4个 for 循环。 1、简单的for循环
　　我们来看看最常见的写法： const arr = [1, 2, 3]; for(let i = 0; i < arr.length; i++) {  console.log(arr[i]); }
　　当循环中数组的长度没有变化时，我们应该将数组的长度存储在一个变量中，这样效率会更高。下面是改进的写法： const arr = [1, 2, 3]; for(let i = 0, len = arr.length; i  {  console.log(data); });
　　操作结果： 1 2 3
　　forEach 方法对数组中包含有效值的每一项执行一次回调函数，那些已经被删除（使用delete 方法等）或从未赋值的项将被跳过（不包括那些未定义的项） 或空值）。回调函数会依次传入三个参数： 数组中当前项的值； 当前项在数组中的索引； 数组对象本身；
　　需要注意的是，forEach 遍历的范围会在第一次调用回调之前确定。调用 forEach 后添加到数组的项目不会被回调访问。
　　如果现有值发生变化，则传递给callback的值就是forEach遍历它们时的值。不会遍历已删除的项目。 const arr = []; arr[0] = ＂a＂; arr[3] = ＂b＂; arr[10] = ＂c＂; arr.name = ＂Hello world＂; arr.forEach((data, index, array) => {  console.log(data, index, array); });
　　操作结果： a 0 [＂a＂, 3: ＂b＂, 10: ＂c＂, name: ＂Hello world＂] b 3 [＂a＂, 3: ＂b＂, 10: ＂c＂, name: ＂Hello world＂] c 10 [＂a＂, 3: ＂b＂, 10: ＂c＂, name: ＂Hello world＂]
　　这里的索引是Number类型的，不会像for-in那样遍历原型链上的属性。
　　因此，在使用forEach时，我们不需要特别声明索引和要遍历的元素，因为这些都是作为回调函数的参数。
　　另外，forEach 会遍历数组中的所有元素，但是 ES5 定义了一些其他有用的方法，下面是一部分： every：循环在第一次返回false后返回 some：循环在第一次返回 true 后返回 filter：返回一个元素满足回调函数的新数组 map：在返回之前处理原始数组中的元素 reduce：依次处理数组中的元素，将上一次处理的结果作为下一次处理的输入，最终得到最终结果。
　　forEach 性能
　　您可以看看jsPerf。在不同浏览器下测试的结果是forEach没有for快。如果将测试代码放在控制台中，可能会得到不同的结果。主要原因是控制台的执行环境与真实的代码执行环境不同。 4、for-of
　　我们先来看一个例子： const arr = [‘a’, ‘b’, ‘c’]; for(let data of arr) {  console.log(data); }
　　运行的结果是： a b c
　　为什么要引入for-of？
　　要回答这个问题，我们先来看看 ES6 之前的 3 种 for 循环的缺陷：
　　forEach 不能中断和返回；
　　for-in 的劣势更加明显。它不仅遍历数组中的元素，还遍历自定义属性，甚至访问原型链上的属性。此外，遍历数组元素的顺序可以是随机的。
　　所以，针对以上缺点，我们需要对原来的for循环进行改进。但是 ES6 不会破坏您已经编写的 JS 代码。
　　目前，数以千计的网站依赖于 for-in 循环，其中一些甚至将其用于数组遍历。通过修复 for-in 循环来添加数组遍历支持会使这一切变得更加混乱，因此标准委员会在 ES6 中添加了一个新的循环语法来解决当前的问题 for-of 。
　　那么   for-of   能做什么呢？
　　与forEach相比，它可以正确响应break、continue、return。
　　for-of 循环不仅支持数组，还支持大多数类似数组的对象，例如 DOM 节点列表对象。
　　for-of 循环还支持字符串遍历，它将字符串作为 Unicode 字符序列进行迭代。
　　for-of 还支持 Map 和 Set（都是 ES6 中的新功能）对象遍历。
　　总结一下，for-of 循环具有以下特点：
　　这是迭代数组元素的最简洁直接的语法。
　　这种方法避免了 for-in 循环的所有陷阱。
　　与 forEach 不同，它正确响应 break、continue 和 return 语句。
　　它不仅可以遍历数组，还可以遍历类数组对象和其他可迭代对象。
　　然而，应该注意的是，for-of 循环不支持普通对象，但是如果您想遍历一个对象的属性，您可以使用 for-in 循环（它就是这样做的）。
　　最后，但并非最不重要的是，ES6 引入了另一种方法来迭代数组的值，那就是 Iterator。最后一个例子： const arr = [‘a’, ‘b’, ‘c’]; const iter = arr[Symbol.iterator](); iter.next() // { value: ‘a’, done: false } iter.next() // { value: ‘b’, done: false } iter.next() // { value: ‘c’, done: false } iter.next() // { value: undefined, done: true }
　　不过，这个内容超出了本文的范围，Iterator 有很多要讲的。
　　-   End   -