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

Nokia 发表于 2016/12/21 20:45 | 显示全部楼层 |阅读模式
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>
复制代码

手机版|轻松E站

E-mail: OHCC@163.COM

快速回复 返回顶部 返回列表