【JavaScript】类数组 及其 转化为数组的方法 -Uncaught TypeError: oBtnArr.forEach is not a function

demo里遇到的错误:Uncaught TypeError: hdList.forEach is not a function。
错误原因因为:原生js获取的DOM集合是一个类数组对象,所以不能直接利用数组的方法(例如:forEach,map等),需要进行转换为数组后,才能用数组的方法!

在这里插入图片描述
所以总结下这里遇到的知识点:类数组 和类数组转为数组的方法

类数组

JavaScript 类数组对象的定义:

  1. 可以通过索引访问元素,并且拥有 length 属性

  2. 没有数组的其他方法,例如 push , forEach , indexOf 等。

类数组示例:

//是个对象,有索引,有length,没有数组方法
var foo = {
    0: 'Java',
    1: 'Python',
    2: 'Scala',
    length: 3
}

非类数组示例:

var c = {'1':2};

3,解决办法

将类数组(DOM集合)转化为数组

1. Array.from()方法 - Array.from(oBtnArr)
2. 用[ …elems ]方法转化为数组 - [...oBtnArr]

在这里插入图片描述
3. Array.prototype.slice.call(oBtnArr,0)
Array.prototype.slice.call(arguments)能将具有length属性的对象 转成数组

1、Array是构造函数
2、arguments是类数组对象(缺少很多数组的方法)
3、call让一个对象调用另一个对象的方法。你可以使用call()来实现继承:写一个方法,然后让另外一个新的对象来继承它(而不是在新对象中再写一次这个方法)
4、 slice从一个数组中切割,返回新的数组,不修改切割的数组
so,其实本质就是arguments这个对象使用了数组的slice这个方法,得到了参数构成的数组(也可以用apply)。
Array.prototype.slice.call(arguments, [0, arguments.length])

使用prototype只是因为Array是构造函数 ,slice方法在Array的原型prototype上,[]空数组是Array的实例,继承了其原型上的方法slice,所以写[].slice也可以找到方法

Array.prototype.slice.call([1,2,3,4,5],0)//  [1, 2, 3, 4, 5]
[].slice.call([1,2,3,4,5],1)// [2, 3, 4, 5]

参考添加链接描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值