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


    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);
    });
  • 相关阅读:
    列表推导式和生成器表达式
    迭代器和生成器
    闭包和装饰器
    函数命名空间和作用域
    华为笔试题06
    华为笔试题05
    华为笔试题04
    华为笔试题03
    华为笔试题02
    华为笔试题01
  • 原文地址:https://www.cnblogs.com/yangai/p/11158693.html
Copyright © 2020-2023  润新知