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

最新推荐文章于 2025-10-19 21:18:41 发布

原创最新推荐文章于 2025-10-19 21:18:41 发布 · 3.2w 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#Array #dom

Rattenking 的前端笔记同时被 2 个专栏收录

114 篇文章

订阅专栏

【JavaScript】

42 篇文章

订阅专栏

本文介绍了JavaScript中处理类数组对象的六种方法，包括Array.from()、Array.prototype.slice.call()、扩展运算符[...]等，并提供了如何使用这些方法来遍历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.youkuaiyun.com/bug_money/article/details/53148678

其他

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

[我的优快云博客，欢迎交流！](https://blog.youkuaiyun.com/m0_38082783)

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

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

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

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

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

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

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

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