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)

  • 相关阅读:
    HashMap按键排序和按值排序
    LeetCode 91. Decode Ways
    LeetCode 459. Repeated Substring Pattern
    JVM
    LeetCode 385. Mini Parse
    LeetCode 319. Bulb Switcher
    LeetCode 343. Integer Break
    LeetCode 397. Integer Replacement
    LeetCode 3. Longest Substring Without Repeating Characters
    linux-网络数据包抓取-tcpdump
  • 原文地址:https://www.cnblogs.com/linewman/p/9918537.html
Copyright © 2011-2022 走看看