类数组对象转换为数组的六种方法
xxx.forEach is not a function(DOM集合--类数组对象转化为数组)
原生js获取的DOM集合是一个类数组对象,所以不能直接利用数组的方法(例如:forEach,map等),需要转换为数组后,才能用数组的方法。
6种解决办法(假如hdList是一个DOM集合)
(1)ES6语法 Array.from(arr)
//将hdList用Array.from()方法转换为数组,并用list变量接收 let list = Array.from(hdList);
(2)用Array.prototype.slice.call(elems)方法转化为数组 或 [].slice.call(elems)
Array.prototype.slice.call()方法详解
//hdList转化为数组并用list变量接收 let list = Array.prototype.slice.call(hdList); //添加点击事件 list.forEach((current,index) => { current.addEventListener('click',() => { animationFn(index); },false); });
(3)用[ ...elems ]方法转化为数组
Rest 参数(...)
let list = [...hdList];//用[ ...elems ]方法转化为数组并用list接收
(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); });