什么是伪数组 以及伪数组转真数组的方法

什么是伪数组呢?
1.我们先来看看用于接受实参的方法 arguments , 执行代码如下:
function fn() {  
 
            console.log(arguments);
 
        }
 
        fn(1,2,3,4,5)


这里可以看到,Arguments显示的也有方括号 [1,2,3,4,5...] ,但是后面多了一些其他方法;也有length属性,但没有数组的push,pop等那些方法,像数组又不是数组

2.大家也可以去打印看看其他比如getElementsByClassName 得到的

这里可以看到,HTMLCollection显示的也有方括号 [1,2,3,4,5...] ,但是后面多了一些其他方法;也有length属性,但同样没有数组的push,pop等那些方法,像数组又不是数组

当然也还有一些其他的,这里就不一一列举了,简单说,伪数组具有以下特点:
  1. 拥有length属性,可以获取长度;
  2. 拥有角标索引,可以通过length属性遍历获取所有值。
  3. 但是不可以使用数组的内置方法。
  4. 那么我们一起看看为什么伪数组不能使用数组的内置方法和属性呢?
  5. 首先从上图标注的 [[prototype]]可以看到arguments伪数组的原型指向的是Object对象

再来打印真数组,

可以看到,真数组的proto指向的是Array数组

同样 从上图也可以看出 [[prototype]]可以看到通过标签名获取页面元素拿到的伪数组的原型指向的是HTMLCollection对象

至此,我们也可以看出伪数组的原型不一样,其实就是不同的对象,而数组的元素是Array,他们和真数组的本质不一样,这也是伪数组为什么不能使用数组的属性和方法的根本原因,

要使用真数组的方法比如forEach,pop等
必须把他们转化为真数组才能使用数组的各种方法。
下面来说说伪数组转真数组的方法
1 最简单的方法:先声明一个空数组,然后遍历伪数组,将伪数组中的值通过索引逐个添加到新数组当中。

2 利用Array的原型对象的slice方法,配合call()方法修改slice中this指向
slice原本是数组的截取子数组的方法,这里给数组的原型对象方法slice的指向强制改成arguments

3 利用扩展运算符(...)将伪数组转化为真数组 - ES6语法 let newArr=[];


4 利用ES6的Array.from方法


改变之后,我们就可以得到一个真正的数组,后面再使用forEach获取其他方法也就不会报错啦。

总结:

  1. 伪数组的原型是Object ,是真数组的原型是Array ;
  2. 伪数组其实是键值对的形式,真数组是基于索引下标实现的;
  3. 伪数组可以通过以上方式转化为真数组,进而使用数组的forEach等其他方法

当然了,如果只是普通遍历也可以用for循环来实现,不需要转真数组这么麻烦,在实际开发中大家也要酌情使用哦。

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

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

相关文章

c++类和对象新手保姆级上手教学(中)

前言: 类和对象中篇,这里讲到的前4个默认成员函数,是类和对象中的重难点,许多资料上的讲法都非常抽象,难以理解,所以我作出这篇总结,分享学习经验,以便日后复习。 目录 6个默认成员…

新算法UoT助力AI提问——主动寻求信息,任务完成率提高57.8%

引言:信息寻求在不确定性环境中的重要性 在不确定性环境中,信息寻求的能力至关重要。在许多实际应用中,如医学诊断和故障排除,解决任务所需的信息并非一开始就给出,而需要通过提问后续问题来主动寻求(例如…

MobaXterm的SFTP文件上传/下载

一、MobaXterm的简介 MobaXterm是一款功能强大的远程计算工具,集成了诸多网络工具和便利功能,包括SSH、X11服务器、SFTP等,支持Windows系统。用户可以使用MobaXterm来轻松管理远程服务器,进行文件传输,远程桌面显示等操…

Rocky 8.9 Kubespray v2.24.0 在线部署 kubernetes v1.28.6 集群

文章目录 1. 简介2. 预备条件3. 基础配置3.1 配置hostname3.2 配置互信 4. 配置部署环境4.1 在线安装docker4.2 启动容器 kubespray4.3 编写 inventory.ini4.4 关闭防火墙、swap、selinux4.5 配置内核模块 5. 部署 1. 简介 kubespray​ 是一个用于部署和管理 Kubernetes 集群的…

掌握array_walk()函数:解锁PHP数组操作的神奇力量!

掌握array_walk()函数:解锁PHP数组操作的神奇力量! 在 PHP 开发过程中,我们经常需要对数组进行遍历和处理。array_walk() 函数是 PHP 函数库中的一个重要工具,它提供了一种便捷的方式来对数组中的每个元素执行自定义操作。本文将深…

【EI会议征稿通知】2024年第四届计算机视觉与模式分析国际学术大会(ICCPA 2024)

2024年第四届计算机视觉与模式分析国际学术大会(ICCPA 2024) 2024 4th International Conference on Computer Vision and Pattern Analysis (ICCPA 2024) 第四届计算机视觉与模式分析国际会议(ICCPA 2024)将于2024年5月17日至1…

Unity编辑器扩展之是否勾选Text组件BestFit选项工具(此篇教程也可以操作其他组件的属性)

想要批量化是否勾选项目预制体资源中Text组件BestFit属性(此篇教程也可以操作其他组件的属性,只不过需要修改其中对应的代码),可以采用以下步骤。 1、在项目的Editor文件中,新建一个名为TextBestFitBatchProcessor的…

忘记管理员密码

1、在/home/jenkins/config.xml中删除&#xff1a; <useSecurity>true</useSecurity><authorizationStrategy class"hudson.security.FullControlOnceLoggedInAuthorizationStrategy"><denyAnonymousReadAccess>false</denyAnonymousRea…

html+css+jquery实现轮播图自动切换、左右切换、点击切换

pc端也好、移动端也好&#xff0c;轮播图很常见&#xff0c;今天用htmlcssjquery实现小米商城轮播图&#xff0c;套UI框架更容易实现 步骤1&#xff1a;把静态轮播图用divcss布局出来&#xff0c;采用盒子模型、相对绝对定位实现 代码如下&#xff1a; <!doctype html>…

leetcode:无重复字符的最长字串(详解)

文章目录 一、题目描述&#xff1f;二、题解方案一&#xff1a;容易理解&#xff08;时间复杂度O(n)&#xff09;方案二&#xff1a;滑动窗口&#xff08;时间复杂度O(n)&#xff09; 一、题目描述&#xff1f; 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最…

十二:枚举与注解

文章目录 01、枚举类的使用1.1、枚举类的理解1.2、自定义枚举类1.3、使用enum关键字定义枚举类1.4、Enum类中的常用方法1.5、使用enum关键字定义的枚举类实现接口 02、注解的使用2.1、注解的理解2.3、如何自定义注解2.4、jdk中4个基本的元注解的使用12.5、jdk中4个基本的元注解…

补-代码随想录第23天|● 669. 修剪二叉搜索树 ● 108.将有序数组转换为二叉搜索树 ● 538.把二叉搜索树转换为累加树

二叉树最后一天 ● 669. 修剪二叉搜索树思路一&#xff1a;递归递归三部曲代码&#xff1a; 思路二&#xff1a;迭代代码&#xff1a; ● 108.将有序数组转换为二叉搜索树思路&#xff1a;递归代码;[左闭右闭] ● 538.把二叉搜索树转换为累加树思路&#xff1a;递归 代码&#…

java基础训练题(2)

一、题目 1. 以下程序输出&#xff08;D&#xff09; public static void main(String[] args) {int num 2;switch (num) {case 1:num;case 2:num;case 3:num;default:num;break;}System.out.println(num);} } A&#xff1a;2 B&#xff1a;3 C&#xff1a;4 D&#xff…

解决本地googleapis 谷歌统计 nodejs 遇到 ECONNRESET和 ETIMEDOUT

在本地通过谷歌分析接口, 获取网站的访问量统计, 用于在管理端面板世界地图显示 获取分析数据的部分代码,这部分很简单示例有 // 获得前10个页面浏览量与页面标题在过去30天 const {BetaAnalyticsDataClient} require(google-analytics/data); const analyticsDataClient ne…

62-JS-canvas画布高斯模糊之图像操作

将一张图片放到canvas画布上 1.绘制图像drawImage <img src="./3.webp" alt=""><canvas></canvas><script>var canvas = document.getElementsByTagName("canvas")[0];canvas.width = 500;canvas.height = 500;var a …

“薪”的一年程序员裁员潮技术变革情况下 程序员就业机会在哪里?

引言&#xff1a;一对来自中国的工程师夫妻在美国的不幸身亡&#xff0c;疑似与谷歌的裁员有关&#xff0c;这一事件再次引发了人们对技术变革下裁员对程序员影响的关注。 一、针对裁员潮的一些看法 在我看来&#xff0c;技术变革对程序员的影响是双面的。一方面&#xff0c;…

anomalib1.0学习纪实-续3:结合python lightning理思路

一、python lightning python lightning是个好东西&#xff0c;但不见得那么友好。 GPT4给我讲解了他的用法&#xff1a; 二、anomalib的思路 1、 创建一个Lightning Module。 首先&#xff0c;在src\anomalib\models\components\base\anomaly_module.py中&#xff0c; cl…

你真的了解—————NumPy吗

&#x1f308;个人主页&#xff1a;小田爱学编程 &#x1f525; 系列专栏&#xff1a;opencv &#x1f3c6;&#x1f3c6;关注博主&#xff0c;随时获取更多关于IT的优质内容&#xff01;&#x1f3c6;&#x1f3c6; &#x1f600;欢迎来到小田代码世界~ &#x1f601; 喜欢的…

2024-02-19(Flume,DataX)

1.flume中拦截器的作用&#xff1a;个人认为就是修改或者删除事件中的信息&#xff08;处理一下事件&#xff09;。 2.一些拦截器 Host Interceptor&#xff0c;Timestamp Interceptor&#xff0c;Static Interceptor&#xff0c;UUID Interceptor&#xff0c;Search and Rep…

Docker从入门到上天系列第一篇:Docker开篇介绍

&#x1f609;&#x1f609; 欢迎加入我们的学习交流群呀&#xff01; ✅✅1&#xff1a;这是孙哥suns给大家的福利&#xff01; ✨✨2&#xff1a;我们免费分享Netty、Dubbo、k8s、Mybatis、Spring、Security、Docker、Grpc、消息中间件、Rpc、SpringCloud等等很多应用和源码级…