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

摘要:
1.错误:未捕获类型错误:hdList。forEachisnotfunction2.错误的原因是原生js获取的DOM集合是一个类似数组的对象,因此不能直接使用数组方法(例如,forEach、map等)。在使用数组方法之前,需要将其转换为数组!3,6个解决方案(如果hdList是DOM集)(1),Array。from()方法//使用Array转换hdList。from()方法

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)

免责声明:文章转载自《xxx.forEach is not a function(DOM集合--类数组对象转化为数组)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Linux 设备驱动IO操作MySQL 创建函数(Function)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

fs.readdirSync

fs.readdirSync 该方法将返回一个包含“指定目录下所有文件名称”的数组对象。 fs.readdirSync(path) arr.forEach 遍历数组 forEach只能遍历数组,原数组是不会变的,要创建新数组,就得用arr.map,通过下面的例子可知map方法好像是万能的 var arr=['apple','pear','banan',...

ExtJS初接触 —— 了解 Ext Core

ExtJS初接触 —— 了解 Ext Core Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可。对于Dom的操作,我个人还是比较喜欢用jQuery。当然如果项目中用的是ExtJS框架,也就没必要多引用一个jQuery,Ext Core是ExtJS框架的一个小子集。如果仅仅使用Ext Core的功能,则只需引入builds文件夹下的一个...

C#中ArrayList 与 string、string[]数组 的转换

1、ArrarList 转换为 string[] :ArrayList list = new ArrayList();list.Add("aaa");list.Add("bbb");//转换成数组string[] arrString = (string[])list.ToArray(typeof( string)) ;2、string[] 转换为 Arra...

vue数组赋值变量不影响原数组

在使用vue开发移动端项目过程中,统一数组在对多个变量赋值时;希望一个数组的改变不影响另外一个数组,此时可以使用如下方式实现: let arr = [] let a1 = JSON.parse(JSON.stringify(arr)) let a2 = JSON.parse(JSON.stringify(arr)) a1.push('1') a1.leng...

vue项目搜索历史功能的实现

播放器项目中歌曲搜素页面的 首先需要在state定义搜索历史,在其中保存搜索历史 state.js:// 搜索历史: searchHistory: []  mutations中新增改变搜索历史的方法 mutations.js:SET_SEARCH_HISTORY(state, history) { state.searchHistory = hi...

awk双文件互相匹配查找

awk双文件互相匹配查找 要求: 文件a:  10/05766798607,11/20050325191329,29/0.1,14/05766798607  10/05767158557,11/20050325191329,29/0.08,14/05767158557  文件b:  05766798607  05766798608  05766798...