类数组对象转换为数组的六种方法

老牧童 • 2023-10-18 09:15 • 未分类 • 阅读 162

类数组对象转换为数组的六种方法xxx.forEachisnotafunction（DOM集合类数组对象转化为数组）原生js获取的DOM集合是一个类数组对象，所以不能直接利用数组的方法（例如：forEach，map等），需要转换为数组后，才能用数组的方法。6种解决办法(假如hdList是一个DOM集合)（1）ES

大家好，欢迎来到IT知识分享网。

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);
});

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/30338.html

赞 (0)

0

发表回复

关注微信