zoukankan      html  css  js  c++  java
  • xxx.forEach is not a function(DOM集合--类数组对象转化为数组)

    1,错误:Uncaught TypeError: hdList.forEach is not a function

    2,错误的原因

    原生js获取的DOM集合是一个类数组对象,所以不能直接利用数组的方法(例如:forEach,map等),需要进行转换为数组后,才能用数组的方法!

    3,6种解决办法(假如hdList是一个DOM集合)

    (1),Array.from()方法

    //将hdList用Array.from()方法转换为数组,并用list变量接收
    let list = Array.from(hdList);

    (2),用Array.prototype.slice.call(elems)方法转化为数组

    //hdList转化为数组并用list变量接收
    let list = Array.prototype.slice.call(hdList);
    //添加点击事件
    list.forEach((current,index) => {
    	current.addEventListener('click',() => {
    		animationFn(index);
    	},false);
    });

    (3),用[ ...elems ]方法转化为数组

    let list = [...hdList];//用[ ...elems ]方法转化为数组并用list接收
    //添加点击事件
    list.forEach((current,index) => {
    	current.addEventListener('click',() => {
    		animationFn(index);
    	},false);
    });

    (4),用Array.prototype.forEach.call(elem,callback)方法

    //直接对hdList集合进行循环或者map等
    Array.prototype.forEach.call(hdList,function(){
    //...
    })
    Array.prototype.map.call(hdList,function(){
    //...
    })

    (5),用Array.prototype.forEach.apply(elem,[callback])方法

    //添加点击事件
    Array.prototype.forEach.apply(hdList,[(current,index) => {
    	current.addEventListener('click',() => {
    		animationFn(index);
    	},false);
    }]);

    (6),用bind方法

    //添加点击事件
    Array.prototype.forEach.bind(hdList)((current,index) => {
    	current.addEventListener('click',() => {
    		animationFn(index);
    	},false);
    });


    参考:

    JavaScript中的apply()方法和call()方法使用介绍

    http://www.jb51.net/article/30883.htm
     

    1-DOM中-类数组对象遍历(转换)为数组

    http://blog.csdn.net/bug_money/article/details/53148678

    其他

    [我的博客,欢迎交流!](http://rattenking.gitee.io/stone/index.html)

    [我的CSDN博客,欢迎交流!](https://blog.csdn.net/m0_38082783)

    [微信小程序专栏](https://blog.csdn.net/column/details/18335.html)

    [前端笔记专栏](https://blog.csdn.net/column/details/18321.html)

    [微信小程序实现部分高德地图功能的DEMO下载](http://download.csdn.net/download/m0_38082783/10244082)

    [微信小程序实现MUI的部分效果的DEMO下载](http://download.csdn.net/download/m0_38082783/10196944)

    [微信小程序实现MUI的GIT项目地址](https://github.com/Rattenking/WXTUI-DEMO)

    [微信小程序实例列表](http://blog.csdn.net/m0_38082783/article/details/78853722)

    [前端笔记列表](http://blog.csdn.net/m0_38082783/article/details/79208205)

    [游戏列表](http://blog.csdn.net/m0_38082783/article/details/79035621)

  • 相关阅读:
    《游戏引擎构架Game Engine Architecture》略读笔记
    Visual Studio快速入门(大纲)
    Linux课程学习 第四课
    Linux课程学习 第三课
    Linux课程学习 第二课
    vmware虚拟机安装centos7.3
    Win7 Linux双系统,恢复Linux启动项
    Java中Collection、Map常用实现类研究分析
    数据库计算每个表所占空间和记录数
    tomcat中部署多个项目,webAppRootKey 参数配置
  • 原文地址:https://www.cnblogs.com/linewman/p/9918537.html
Copyright © 2011-2022 走看看