HTMLCollection NodeList forEach支持以及将类数组对象转换成数组

JS forEach()方法不能用于HTMLCollection NodeList等类似于数组但又不是真正的数组。JS遍历数组，通常是for循环实现，ECMASCRIPT 5为数组增加了forEach()方法，通过这个方法可以轻松遍历数组，需要传入一个回调函数，回调函数第一个参数代表每次读取到的数组元素，第二个参数为可选参数，代表当前元素的索引值。
HTMLCollection NodeList forEach支持实现方法
方法一：以HTMLCollection为例，人为增加一个将类数组对象转成数组的方法。将以下代码放到JS代码最前端。

1. <script>
   
2.         /*
   
3.          * JS实现类数组对象调用forEach()方法
   
4.          * @author 吴先成 www.wuxiancheng.cn
   
5.         */
   
6.         HTMLCollection.prototype.toArray=function(){
   
7.                 return [].slice.call(this);
   
8.         };
   
9.         document.getElementsByTagName('meta').toArray().forEach(function(e, i){
   
10.                 console.log(e + '->' + i);
    
11.         });
    
12. </script>

复制代码

方法二：直接为类数组对象原型增加一个forEach()方法

1. <script>
   
2.         /*
   
3.          * JS实现类数组对象调用forEach()方法
   
4.          * @author 吴先成 www.wuxiancheng.cn
   
5.         */
   
6.         HTMLCollection.prototype.forEach=function(callback){
   
7.                 [].slice.call(this).forEach(callback);
   
8.         };
   
9.         document.getElementsByTagName('meta').forEach(function(e, i){
   
10.                 console.log(e + '->' + i);
    
11.         });
    
12. </script>

复制代码

方法三：使用Array.from()方法将类数组转换成数组 ECMASCRIPT 6新增方法 Firefox, Chrome and Edge较新版本都能支持

1. <script>
   
2.         /*
   
3.          * JS实现类数组对象调用forEach()方法
   
4.          * @author 吴先成 www.wuxiancheng.cn
   
5.         */
   
6.         Array.from(document.getElementsByTagName('meta')).forEach(function(e, i){
   
7.                 console.log(e + '->' + i);
   
8.         });
   
9. </script>

复制代码

方法四：使用var of结构实现，和var in语法类似 Chrome 54+ Firefox 50+ 支持 不过这种方法已经跑题了 只能算是实现了类数组对象的数组遍历。

1. <script>
   
2.         /*
   
3.          * JS实现类数组对象数组遍历
   
4.          * @author 吴先成 www.wuxiancheng.cn
   
5.         */
   
6.         for(var element of document.getElementsByTagName('meta')){
   
7.                 console.log(element);
   
8.         }
   
9. </script>

复制代码