数组与伪数组的区别

大家都知道,在js中使用 document.querySelectorAll(选择器)获取到的为该选择器能选择到的所有元素组成的伪数组,所谓伪数组,就是外表和数组一样,能够使用索引遍历,但本质是对象。

数组与伪数组之间的区别:

数组是继承自Array的方法,因此可以使用push(),sort(),pop(),shift()等方法;

而伪数组没有继承自Array的方法,因此没有数组的部分方法和属性。

伪数组拥有的数组属性有:

length:表示伪数组的长度

伪数组拥有的数组属性:

索引访问:可以通过索引来访问为数组中的元素;

toString():将伪数组转换为字符串,并返回该字符串;

join():将伪数组中所有元素组合成一个字符串,并使用指定的分隔符来分割各个元素;

slice():从伪数组中提取一个子数组,并返回一个新数组,不会对原数组造成破坏。

forEach():遍历伪数组中的元素。注意:这个方法在我做蓝桥杯web应用开发题的过程中不可使用,报错信息为:arr.forEach()不是一个方法。但是使用for循环是没有问题的,因此遍历伪数组我更推荐使用for循环。

也还有其他一些方法,就不一一概述了。接下来提一下没有的方法,没有的方法大多是对数组中元素个数进行操作的属性,比如:push()、shift()、pop()等,当然也有一些其他方法,比如map()。因此在使用伪数组的过程中要格外注意不要随意使用数组的方法,以免出现错误。

js中获取伪数组的方法:

1.DOM操作返回的结果:比如使用document.getElementByClassName()、document.querySelectorAll()等,得到的结果是符合类名或选择器的所有元素组成的伪数组。

2.获取节点的所有子元素:node.children------该方法获取到的是节点node中所有子元素组成的伪数组。

js中伪数组如何转化为数组:

let arr=Array.from(伪数组) //将伪数组转换为数组,并使用变量arr接收;

let arr=[...伪数组] //使用展开运算符将伪数组转成数组,并用arr接收;

最后再提一下我在题目中遇到的问题:

我使用let one = document.querySelectoryAll('select option')获取到select标签下所有option元素,记作变量one;

使用let two = document.querySelectory('select').children获取到select标签下所有子节点元素记作变量two;

大家都知道select中子元素只有option,因此使用这两种方法获取到的伪数组都是只包含select中的option。

但是当select中option数量发生改变时,就体现出这两种方法的区别了。直接说结果------使用第一种方法获取到的变量one不会随着option数量变化发生变化。而第二种方法会随着option的数量变化而发生变化,因此更推荐使用第二种方法获取子元素节点组成的伪数组。具体如下图:

图一:子元素改变前

图二:子元素改变后

相关推荐
Highcharts.js2 小时前
缺失数据可视化图表开发实战|Highcharts创建人员出生统计面积图表示例
开发语言·前端·javascript·信息可视化·highcharts·图表开发
LaughingZhu9 小时前
Product Hunt 每日热榜 | 2026-05-21
前端·人工智能·经验分享·chatgpt·html
怕浪猫9 小时前
Electron 开发实战(一):从零入门核心基础与环境搭建
前端·electron·ai编程
小鹏linux10 小时前
Ubuntu 22.04 部署开源免费具有精美现代web页面的Casdoor账号管理系统
linux·前端·ubuntu·开源·堡垒机
前端若水10 小时前
会话管理:创建、切换、删除对话历史
前端·人工智能·python·react.js
Bigger11 小时前
mini-cc:一个轻量级 AI 编程助手的诞生
前端·ai编程·claude
涵涵(互关)11 小时前
Naive-ui树型选择器只显示根节点
前端·ui·vue
BY组态11 小时前
Ricon组态系统最佳实践:从零开始构建物联网监控平台
前端·物联网·iot·web组态·组态
BY组态11 小时前
Ricon组态系统vs传统组态软件:为什么选择新一代Web组态平台
前端·物联网·iot·web组态·组态
SoaringHeart11 小时前
Flutter进阶:OverlayEntry 插入图层管理器 NOverlayZIndexManager
前端·flutter