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)
相关文章
- vue的$attrs_vue获取list集合中的对象
- Map集合转换成实体类对象,实体类对象转换为map集合,互转工具类「建议收藏」
- Java map集合深入学习
- MongoDB :第四章:集合的创建与删除
- 集合转数组的方法_数组与集合的区别
- c++迭代器遍历list集合_list迭代器遍历删除对象
- 【Java基础】Java8集合[ArrayList 常用方法讲解](源码分析+底层原理)
- mp对象集合in查询
- 基因集合的数据框,列表和对象形式
- Adobe Creative Cloud for mac(acc多媒体制作工具集合)
- 【Groovy】map 集合 ( 根据 Key 获取 map 集合中对应的值 | map.Key 方式 | map.‘Key’ 方式 | map[‘Key’] 方式 | 代码示例 )
- Redis基本数据类型Zset有序集合常用操作
- Redis如何存储对象与集合示例详解
- Json字符串转对象和转List集合操作详解编程语言
- [javaSE] 集合框架(TreeSet)详解编程语言
- 常用对象API、附加:集合补充详解编程语言
- Java集合框架详解编程语言
- Java Map.isEmpty()方法:判断Map集合对象是否包含内容
- Java Set.remove()方法:移除Set集合中的指定对象
- Java Set.toArray()方法:用Set集合中的所有对象创建一个数组
- 使用Redis集合存储对象信息(用redis集合存对象)
- 揭秘Redis中的集合查询技巧(如何查询redis的集合)
- Redis中存储JSON的集合方式(redis集合存json)
- 使用Redis改变集合大小的奇妙之处(redis 集合大小)
- Redis中集合求并集的应用(redis集合取并集)
- javascript表单规则集合对象
- javascriptoptions属性集合操作代码
- JavaScript内置对象属性及方法集合
- php调用MySQL存储过程的方法集合(推荐)
- jQuery遍历对象、数组、集合实例
- html的DOM中document对象forms集合用法实例