JavaScript中类数组对象及其与数组的关系

JavaScript中类数组对象及其与数组的关系

1. 什么是类数组对象?

类数组对象是指那些具有 length 属性且可以通过非负整数索引访问元素的对象。虽然这些对象看起来像数组,但它们并不具备真正数组的所有特性,例如没有继承 Array.prototype 上的方法。类数组对象与普通对象的最大区别在于,它们通过数字索引来访问元素,并且有一个 length 属性。

2. 类数组对象与数组的主要区别

  • length 属性: 类数组对象有一个 length 属性,这个属性可以像数组一样用于记录对象中元素的数量,并在新元素加入时自动更新。此外,如果将 length 设置为更小的值,会将类数组对象的“超出”部分截断。
  • 方法继承: 数组从 Array.prototype 继承了许多有用的方法,例如 push()pop()slice() 等。类数组对象虽然有 length 属性和数值索引,但它们并不直接继承这些方法。
  • Array.isArray() 方法: 用来判断一个对象是否为数组。对于真正的数组,Array.isArray() 会返回 true,而对于类数组对象,则返回 false

3. 类数组对象的实际用途

类数组对象常见于一些原生 JavaScript API 中,尤其是在操作 DOM(文档对象模型)时。例如,方法 document.querySelectorAll() 返回的就是一个类数组对象,而不是一个真正的数组。类数组对象看起来与数组相似,但无法直接使用数组的方法。

因此,虽然类数组对象无法直接调用数组方法,但它们的结构足够使得我们可以用类似数组的方式对其进行遍历和处理。

4. 如何操作类数组对象?

类数组对象不能直接调用数组方法,因为它们并没有继承 Array.prototype。但是,JavaScript 提供了几种方法来将类数组对象转化为真正的数组,从而可以使用数组的方法。

4.1 使用 Function.call()Function.apply() 调用数组方法

类数组对象无法直接调用数组的方法,但是我们可以通过 Function.call()apply() 来模拟数组方法的调用。例如,使用 Array.prototype.slice.call() 将类数组对象转换为一个真正的数组对象。

function testArrayLike(obj) {return typeof obj.length === 'number' && obj.length >= 0 &&(obj.length === 0 || (obj.length - 1) in obj);
}let pseudoArray = {0: 'a',1: 'b',2: 'c',length: 3
};console.log(testArrayLike(pseudoArray));  // 输出 true// 使用 slice 方法将类数组对象转换为真正的数组
let arr = Array.prototype.slice.call(pseudoArray);
console.log(arr);  // ["a", "b", "c"]
4.2 使用 Array.from() 转换类数组对象

ES6 引入了 Array.from() 方法,它可以将类数组对象转换为真正的数组。Array.from() 既支持类数组对象,也支持可迭代对象,并且还允许传入一个映射函数对元素进行转换。

let pseudoArray = {0: 'a',1: 'b',2: 'c',length: 3
};// 使用 Array.from() 转换为真正的数组
let arr = Array.from(pseudoArray);
console.log(arr);  // ["a", "b", "c"]

Array.from() 方法的一个重要特点是,它不仅能将类数组对象转换为数组,还可以传入一个映射函数来对数组的每个元素进行处理。例如:

let arr = Array.from(pseudoArray, x => x.toUpperCase());
console.log(arr);  // ["A", "B", "C"]

5. 类数组对象的实际示例

在客户端 JavaScript 中,许多与 HTML 文档交互的 API 方法都会返回类数组对象。例如:

  • document.querySelectorAll() 返回一个类数组对象,表示匹配指定选择器的所有元素。
  • NodeListHTMLCollection 都是类数组对象,它们有 length 属性,并且可以通过数字索引访问元素。
let nodeList = document.querySelectorAll('div');
console.log(nodeList);  // 类数组对象
console.log(nodeList.length);  // 可以获取到 length
console.log(nodeList[0]);  // 可以通过索引访问元素

6. 类数组对象与字符串的关系

JavaScript 中的字符串也表现得像一个类数组对象。每个字符都可以通过数字索引访问,而且字符串有 length 属性。然而,字符串与数组不同,它是不可变的,因此不能直接修改其中的元素。

对于字符串来说,虽然它看起来像一个数组,但通常应该将其当作字符串来处理,而不是数组。比如,尽管字符串可以用类似数组的方式访问单个字符,但操作字符串时,最好使用字符串的内置方法(如 slice()substring()charAt() 等)而非数组方法。

总结

  • 类数组对象:具有 length 属性和通过数字索引访问元素的特性,但它们并不直接继承 Array.prototype 上的方法。
  • 转换为数组:可以通过 Array.from()Function.call() 将类数组对象转换为真正的数组,从而可以使用数组的各种方法。
  • 实际应用:类数组对象在 DOM 操作中非常常见,比如 NodeListHTMLCollection,这些类数组对象是由浏览器返回的,因此我们可以利用 JavaScript 数组的能力来操作这些对象。

通过理解类数组对象的特性和如何将其转换为数组,可以在处理 JavaScript 中的复杂数据结构时更加得心应手。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024“蜀道山” RE 部分题解

Map_maze 题目描述 真真假假真真,你能够寻找到最后的终点吗? 附件下载 迷宫生成 v5 是一个长度为 105 的数组,被用作 15x15 的二维网格 int __cdecl sub_4010D0(_DWORD *a1, _DWORD *a2) {_DWORD *v2; // eax_DWORD *v3; // eaxint result; // eax_DWORD v5[1…

水库大坝安全监测之量水堰计应用

量水堰计是水库大坝安全监测系统中的一种关键设备,主要用于测量水库水位、流量等水力参数。以下是量水堰计在水库大坝安全监测中的应用及注意事项: 一、量水堰计的工作原理 量水堰计是一种专门用于测量水流流量的仪器,其工作原理主要基于水流…

基于 LlamaFactory 的 LoRA 微调模型支持 vllm 批量推理的实现

背景 LlamaFactory 的 LoRA 微调功能非常便捷,微调后的模型,没有直接支持 vllm 推理,故导致推理速度不够快。 LlamaFactory 目前支持通过 VLLM API 进行部署,调用 API 时的响应速度,仍然没有vllm批量推理的速度快。 …

MySQL 8.0与PostgreSQL 15.8的性能对比

以下是MySQL 8.0与PostgreSQL 15.8的性能对比: MySQL 8.0性能特点: MySQL在处理大量读操作时表现出色,其存储引擎InnoDB提供了行级锁定和高效的事务处理,适用于并发读取的场景。MySQL通过查询缓存来提高读取性能,查询缓…

vue基础之3:模板语法、数据绑定

欢迎来到“雪碧聊技术”CSDN博客! 在这里,您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者,还是具有一定经验的开发者,相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导,我将…

【动态规划】股票市场交易策略优化

文章目录 一、问题描述二、解决思路状态转移初始化最终结果 三、代码实现执行流程解析时间和空间复杂度 一、问题描述 我们要解决的是一个关于股票买卖的问题:给定一个股票价格数组 stocks,每一天的价格为数组中的一个元素。我们可以通过买入和卖出的操…

SVL-Adapter: Self-Supervised Adapter for Vision-Language Pretrained Models

当前的问题 CLIP和CLIP-Adapter等方法的一个主要局限性是,它们没有对视觉编码器所编码的底层表示进行显著的修改。原因很简单:微调大型模型需要大量的监督,这在低监督学习设置中是很难获得的。如果下游分类任务的图像来自与互联网常见图像相…

Rust SQLx CLI 同步迁移数据库

上文我们介绍了SQLx及SQLite,并介绍了如何使用代码同步迁移数据库。本文介绍Sqlx cli 命令行工具,介绍如何安装、使用,利用其提供的命令实现数据表同步迁移。Java生态中有flyway, sqlx cli 功能类似,利用命令行工具可以和其他语言…

丹摩|丹摩智算平台使用教学指南

本指南旨在为新用户提供一个详细的操作步骤和实用的入门指导,帮助大家快速上手丹摩智算平台。 一、平台简介 丹摩智算平台是一款强大的数据分析和计算平台,支持多种编程语言,提供丰富的数据处理和机器学习工具。无论您是数据分析师、开发者…

代码美学:MATLAB制作渐变色

输入颜色个数n,颜色类型: n 2; % 输入颜色个数 colors {[1, 0, 0], [0, 0, 1]}; createGradientHeatmap(n, colors); 调用函数: function createGradientHeatmap(n, colors)% 输入检查if length(colors) ~ nerror(输入的颜色数量与n不一…

【大数据学习 | Spark调优篇】常用的shuffle优化

shuffle是一个涉及到CPU(序列化反序列化)、网络IO(跨节点数据传输)以及磁盘IO(shuffle中间结果落盘)的操作。 优化思路: 减少shuffle的数据量,减少shuffle的次数。 具体方式&…

Spring中每次访问数据库都要创建SqlSession吗?

一、SqlSession是什么二、源码分析1)mybatis获取Mapper流程2)Spring创建Mapper接口的代理对象流程3)MapperFactoryBean#getObject调用时机4)SqlSessionTemplate创建流程5)SqlSessionInterceptor拦截逻辑6)开…

【Leetcode 每日一题 - 补卡】3259. 超级饮料的最大强化能量

问题背景 来自未来的体育科学家给你两个整数数组 e n e r g y D r i n k A energyDrinkA energyDrinkA 和 e n e r g y D r i n k B energyDrinkB energyDrinkB,数组长度都等于 n n n。这两个数组分别代表 A A A、 B B B 两种不同能量饮料每小时所能提供的强化…

SOC(网络安全管理平台)

SOC平台,网络安全管理平台。 提供集中、统一、可视化的安全信息管理,通过实时采集各种安全信息,动态进行安全信息关联分析与风险评估,实现安全事件的快速跟踪、定位和应急响应。 从监控、审计、风险和运维四个维度建立起来的一套…

自动化电气行业的优势和劣势是什么

优势 市场需求广泛: 自动化电气技术广泛应用于电力系统、制造业、交通、农业等多个领域,随着智能化、数字化趋势的加强,其市场需求持续增长。在智能制造、智能电网等领域,自动化电气技术更是发挥着关键作用,推动了行业…

3.10 内核 BUG_ON() at xfs_vm_writepage() -> page_buffers()

目录 前言 问题分析 page buffers创建 page buffers丢失 Write-Protect Dirty Page w/o Buffers 问题解决 前言 这个问题发生在3.10.0-514.el7上,并且在RHEL的知识库中快速找到了对应的案例以及解决方案,但是,理解问题如何发生和解决…

娱乐API:快速生成藏头诗、藏尾诗和藏中诗

引言 诗歌是中国传统文化的重要组成部分,其中藏头诗、藏尾诗和藏中诗因其独特的形式而备受喜爱。为了满足广大文学爱好者的需求,我们推出了一款娱乐API,支持快速生成藏头诗、藏尾诗和藏中诗。本文将详细介绍该API的功能、使用方法以及如何将…

vue中watch监听对象的某个属性

vue中watch监听对象的某个属性 第一种 : watch:{user.name(val){console.log(val)} }第二种(不建议使用,对象有多个属性会一层一层遍历): watch:{user:{handle:function(newVal){console.log(newVal)},deep:true,//…

以达梦为数据库底座时部署的微服务页面报乱码,调整兼容模式

1.问题描述 部署微服务,文件、代码是延用的mysql类型的,部署前做了部分适配,但是在使用dm数据库进行安装的服务在页面上查询出的数据却都是乱码 2.查询官网,注意到一个参数COMPATIBLE_MODE兼容模式的配置 考虑是延用mysql&…

个人博客接入github issue风格的评论,utteranc,gitment

在做个人博客的时候,如果你需要评论功能,但是又不想构建用户体系和评论模块,那么可以直接使用github的issue提供的接口,对应的开源项目有utteranc和gitment,尤其是前者。 它们的原理是一样的:在博客文章下…