给类数组加上forEach

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

复制代码

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

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

复制代码

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

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

复制代码

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

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

复制代码