xxx.forEach is not a function(DOM集合--类数组对象转化为数组)

来源:互联网 发布:如何删掉mac上的软件 编辑:程序博客网 时间:2024/06/07 11:01

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






原创粉丝点击