Javascript学习笔记之汇总类数组对象转换为数组的几种方式

最新推荐文章于 2024-09-16 13:07:58 发布

JavaYao1

最新推荐文章于 2024-09-16 13:07:58 发布

阅读量269

点赞数 1

分类专栏： JavaScript笔记文章标签： javascript

本文链接：https://blog.csdn.net/JavaYao1/article/details/108140270

版权

JavaScript笔记专栏收录该内容

12 篇文章

订阅专栏

本文介绍了JavaScript中将类数组对象转换为数组的6种方法，特别强调了Array.prototype.slice.call()的使用，该方法适用于有length属性的对象。文章通过示例展示了如何使用querySelectorAll获取的DOM元素集合进行转换，以便能够使用数组的方法进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者:姚一豪
时间:2020-8-20

类数组对象

在页面html中用js获取DOM集合是一个类数组对象:
我们先在body中写三个button

  <button>1</button>
  <button>2</button>
  <button>3</button>

document.querySelectorAll('button')

控制台输出内容`

NodeList(3)

0: <button>
1: <button>
2: <button>

length: 3

<prototype>: NodeListPrototype { item: item(), keys: keys(), values: values(), … }

可以看出我们用querySelectorAll获取的元素是一个类数组集合,不能用数组方法forEach,map等方法,所以将其转换成数组对象是很方便之后的调用
这里我汇总了6个方法将其转换

方法一 Array.prototype.slice.call（arguments）

JavaScript中的Array.prototype.slice.call(arguments)能将有length属性的对象转换为数组(特别注意：这个对象一定要有length属性).
而document.querySelectorAll(‘button’)的length可以在控制台看出是3,所以让他作为方法参数

Array.prototype.slice.call(document.querySelectorAll('button')).forEach((item) => console.log(item))
```//控制台输出 
<button>
<button>
<button>