数组与伪数组的区别

大家都知道,在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的数量变化而发生变化,因此更推荐使用第二种方法获取子元素节点组成的伪数组。具体如下图:

图一:子元素改变前

图二:子元素改变后

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/535592.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言面试题之合法二叉搜索树

合法二叉搜索树 实例要求 实现一个函数,检查一棵二叉树是否为二叉搜索树; 示例 1: 输入:2/ \1 3 输出: true 示例 2: 输入:5/ \1 4/ \3 6 输出: false 解释: 输入为: [5,1,4,null,null,3,6]。根节点的值为 5 ,但是其右子节点值为 4 …

测试开发是“懂测试的开发”还是“懂开发的测试”?

这是个很有意思的话题,我一开始画了这么一张图: 就我自身的工作而言,用着开发的技术,做着开发差不多的工作。归为开发一类并无不妥! 后来,我细细琢磨了一下,改为了下图。 其实答案也非常明显&a…

动态调整学习率方法(仅供自己学习)

目录 一、StepLR 二、MultiStepLR 三、ExponentialLR 四、CosineAnnealingLR 五、ReduceLRonPlateau 六、LambdaLR 小结:学习率调整​​​​​​​ 一、StepLR optimizer torch.optim.SGD(model.parameters(), lrlearn_rate) scheduler torch.optim.lr_sch…

Linux目录结构知识

一、认识Linux目录 1) Linux目录结构知识 1) win: 目录顶点是盘符 C/D/E 。所有的目录结构都在不同的盘符下面,不同的盘之间不能沟通的。 2) Linux: 目录顶点是 / ,称为根。所有的目录结构都在根下面,他的目录之间都…

Day37:LeedCode 738.单调递增的数字 968.监控二叉树 蓝桥杯 翻转

738. 单调递增的数字 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的最大数字&#xff0c;且数字呈 单调递增 。 示例 1: 输入: n 10 输出: 9 思路: 假设这个数是98,…

MuJoCo 入门教程(八)Model仓库

系列文章目录 前言 一、MuJoCo 动物园 一个物理仿真器的好坏取决于它所仿真的模型&#xff0c;而在像 MuJoCo 这样功能强大、建模选项众多的仿真器中&#xff0c;很容易创建出行为与预期不符的 "坏 "模型。MuJoCo Menagerie 的目标是为社区提供一个设计精良、开箱即用…

WinRAR再爆0 day漏洞,0 day漏洞该如何有效预防

WinRAR再爆0 day漏洞&#xff0c;已被利用超过4个月。 Winrar是一款免费的主流压缩文件解压软件&#xff0c;支持绝大部分压缩文件格式的解压&#xff0c;全球用户量超过5亿。Group-IB研究人员在分析DarkMe恶意软件时发现WinRAR在处理ZIP文件格式时的一个漏洞&#xff0c;漏洞…

内存管理机制SLAB

1. 为什么需要内存分配管理&#xff1f;为什么需要SLAB&#xff1f; 在学习c语言时&#xff0c;我们常常会使用到malloc()去申请一块内存空间&#xff0c;用于存放我们的数据&#xff0c;这是代码层面的语言 如果我们想要关心malloc这个命令向系统发出后&#xff0c;系统会做什…

javaee前后端交互

1.选择Java Enterprise创建项目 2.勾选Web Profile 3.项目名称 4.创建包和类 5.继承HttpServlet并重写方法doGet和doPost 6.在web.xml里添加代码 7.点击Add Configuration,进去后点击加号 8.选择选项 9.调整如图&#xff0c;后选择Deployment进入 10.点击加号选择第一个 11.…

【InternLM 实战营第二期笔记】使用茴香豆搭建你的RAG智能助理

RAG RAG是什么 RAG&#xff08;Retrieval Augmented Generation&#xff09;技术&#xff0c;通过检索与用户输入相关的信息片段&#xff0c;并结合外部知识库来生成更准确、更丰富的回答。解决 LLMs 在处理知识密集型任务时可能遇到的挑战, 如幻觉、知识过时和缺乏透明、可追…

【vue】v-bind动态属性绑定

v-bind 简写:value <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><styl…

【赛题】2024年“认证杯”数模网络挑战赛赛题发布

2024年"认证杯"数学建模网络挑战赛——正式开赛&#xff01;&#xff01;&#xff01; 赛题已发布&#xff0c;后续无偿分享各题的解题思路、参考文献、完整论文可运行代码&#xff0c;帮助大家最快时间&#xff0c;选择最适合是自己的赛题。祝大家都能取得一个好成…

Python如何安装第三方模块

cmd窗口中使用pip install命令安装 1、键盘按下win R&#xff0c;然后在输入框中输入cmd&#xff0c;回车&#xff0c;就打开了cmd窗口。 下图的运行框会出现到屏幕左下角。 2、输入下面的命令&#xff0c;回车即可。 pip install xxx # xxx为要安装的模块名 如图所示&…

线程池参数如何设置

线程池参数设置 hello丫&#xff0c;各位小伙伴们&#xff0c;好久不见了&#xff01; 下面&#xff0c;我们先来复习一下线程池的参数 1、线程池参数有哪些&#xff1f; corePoolSize&#xff08;核心线程数&#xff09;&#xff1a;线程池中的常驻核心线程数。即使这些线程…

AI大模型日报#0411:国内首款音乐大模型、面壁智能数亿融资、MyScale AI开源

导读&#xff1a; 欢迎阅读《AI大模型日报》&#xff0c;内容基于Python爬虫和LLM自动生成。目前采用“文心一言”生成了每条资讯的摘要。 ​标题: 大模型做时序预测也很强&#xff01;华人团队激活LLM新能力&#xff0c;超越一众传统模型实现SOTA 摘要: 大语言模型通过新提…

Vue结合el-table实现合并单元格(以及高亮单元表头和指定行)

实现效果如下&#xff1a; 思路&#xff1a; 1.首先使用动态表头表格。 2.其次实现动态计算合并单元格。&#xff08;计算规则 传递需要合并的字段&#xff09; 3.然后封装公共的计算单元格方法 export导出供多个页面使用。 4.同时需要封装成公共的组件供多个页面使用。 5…

PostgreSQL入门到实战-第十九弹

PostgreSQL入门到实战 PostgreSQL中表连接操作(三)官网地址PostgreSQL概述PostgreSQL中INNER JOIN命令理论PostgreSQL中INNER JOIN命令实战更新计划 PostgreSQL中表连接操作(三) 使用PostgreSQL INNER JOIN子句从多个表中选择数据。 官网地址 声明: 由于操作系统, 版本更新等…

Innodb架构解析

整体架构 通过《面试官&#xff1a;一条SQL是如何执行的&#xff1f;》我们了解了MySQL架构&#xff0c;下面我们看下Innodb架构。 innodb最早由Innobase Oy公司开发&#xff0c;5.5版本开始是MySQL默认存储引擎&#xff0c;该存储引擎是第一个完整支持ACID事务的MySQL存储引…

电子元器件商城开发用什么技术框架?

随着信息技术的飞速发展&#xff0c;电子元器件商城已成为电子工程师和采购人员获取元器件的重要渠道。电子元器件商城的开发涉及众多技术和开发语言的选择&#xff0c;本文将详细分析电子元器件商城开发中常用的技术和开发语言&#xff0c;以及它们各自的优势。 一、电子元器…

“我哭死!用ChatGPT完成的硕士论文被评不及格……”

我隔壁专业用ChatGPT写的论文被老师判不及格了&#xff0c;大家还是慎用吧&#xff01; 匿名 自从去年11月份ChatGPT面世以来&#xff0c;因为它天然适合撰写学术论文&#xff0c;越来越多的同学开始使用它辅助论文写作。 学习写作有所谓的鲁迅体、莫言体、余华体&#xff0c;但…