说一说伪数组和数组的区别

小金子.

已于 2024-03-25 14:11:35 修改

阅读量434

点赞数 3

文章标签：算法

于 2024-03-25 14:11:00 首次发布

本文链接：https://blog.csdn.net/m0_74114605/article/details/136988485

版权

本文介绍了JavaScript中的伪数组，如arguments和DOM的children属性，它们虽类似数组但缺乏数组方法。讲述了伪数组与真数组的区别，包括原型、类型、length和方法等，并讲解了如何将伪数组转换为真数组的各种方法原理。

摘要由CSDN通过智能技术生成

伪数组：我们可以理解为类似数组的一个集合，我们常见的有俩个，一个是arguments还有一个是DOM的children属性，获取回来的子节点集合。他们与数组一样，具有索引(下标)和length属性。可以通过for循环写循环语句去循环遍历。

一、介绍伪数组

比如：通过css选择器来获取DOM元素，得到的是一个伪数组：

document.querySelectorAll('css选择器')

哪怕只有一个元素，通过 querySelectorAll()获取过来的也是一个伪数组，里面只有一个元素而已

伪数组特点：

有长度length和索引的数组
没有pop()、push() 等数组方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>div1</div>
  <div>div2</div>
  <div>div3</div>
  <script>
    //得到单个DOM元素
    let d1=document.querySelector('div')
    console.log(d1);

    //得到一个伪数组
    let d2=document.querySelectorAll('div')
    console.log(d2);
    
  </script>
</body>
</html>

二、伪数组和数组的区别

1、伪数组与数组的区别就是它们的_proto_区别

可以看到普通数组的Prototype有非常多的方法

根据上面css选择器的例子，可以看到伪数组的Prototype中只有几个方法

伪数组与数组的区别就是它们的_proto_区别，
普通数组有很多数组的方法，比如说push，shift，map等等
而伪数组却没有，所以我们称这类解构类似数组却没有数组方法的集合叫做伪数组。

2、伪数组它的类型不是Array，而是Object，而数组类型是Array。

3、拥有length属性，且`必须是number类型`,其它属性（索引）为`字符串`

`4、不具有数组所具有的方法`,forEach()等,不过有Object的方法

5、伪数组`长度不可变`,真数组长度可以变

6、可以通过`for in遍历`

三、常见的伪数组

参数数组：arguments
DOM对象列表HTMLCollection()：比如通document.getElementsByTagName得到的列表
jquery对象：比如$(“div”)

四、伪数组转换为真数组

使用Array.prototype.slice.call();
使用[].slice.call()
使用ES6中的Array.from方法
使用扩展运算符...,也是ES6的语法

五、伪数组转换为真数组原理

Array.prototype.slice = function (start, end) {
  start = start || 0
  end = start || this.length
  const arr = []
  for (var i = start; i < end; i++) {
    arr.push(this[i])
  }
  return arr
}