【前端基础】什么是类数组对象，类数组对象转换成数组的方法
类数组对象（array-like object）是指在 JavaScript 中具有类似数组的特征但不是真正的数组的对象。这些对象具有类似数组的特性，例如有一个 length 属性和通过索引访问元素的能力，但它们不具备数组对象的所有方法和特性。
什么是类数组对象
在 JavaScript 中，常见的类数组对象主要有以下几种：
-
DOM 元素列表 (NodeList)：由 DOM 查询操作返回的结果，如
document.getElementsByTagName()、document.querySelectorAll()等。NodeList 是一个类数组对象，包含了匹配查询条件的 DOM 元素列表。 -
函数参数对象 (arguments)：在函数内部可以通过
arguments对象访问所有传递给函数的参数。arguments对象是类数组对象，具有类似数组的特性，例如有一个length属性和通过索引访问参数的能力。 -
字符串 (String)：字符串也可以被视为类数组对象，因为它们包含一系列字符，并且可以通过索引访问单个字符。虽然字符串在 JavaScript 中不是真正的数组，但它们与类数组对象具有相似的特性。
需要注意的是，这些类数组对象都不是真正的数组，它们可能具有一些数组的特性，但并不具备数组对象的所有方法和功能。
请参考以下示例代码，分别演示了这几种类数组对象：
- NodeList：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NodeList Example</title>
</head>
<body><div id="container"><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p></div><script>const paragraphs = document.querySelectorAll('p');console.log(paragraphs); // 输出 NodeList 对象</script>
</body>
</html>
- arguments：
function testArguments() {console.log(arguments); // 输出 arguments 对象
}testArguments('arg1', 'arg2', 'arg3');
- String：
const str = "Hello";
console.log(str); // 输出字符串 "Hello"
你可以在浏览器的开发者工具中查看控制台输出来查看相应的结果。
类数组对象的问题
通常，类数组对象可以使用和数组一样的调用方式array[0]，可以调用length、array.length
但是类数组对象在使用时可能会遇到一些问题，主要是因为它们不是真正的数组，缺少数组特有的方法和功能。以下是一些常见的问题和解决方法：
-
缺少数组方法：类数组对象通常缺少数组特有的方法，如
slice()、push()、pop()、forEach()等。解决方法是将类数组对象转换为真正的数组，然后再使用数组方法。可以使用Array.from()方法或者扩展运算符...来实现转换。 -
无法使用数组下标赋值：在某些类数组对象中，可能无法直接通过下标来赋值，因为它们没有提供相应的方法。解决方法是首先将其转换为数组，然后再通过下标赋值。
-
迭代器不可用：类数组对象通常不支持迭代器（iterator），因此无法使用
for...of循环来遍历。解决方法同样是先将其转换为数组，然后再使用迭代器或者其他循环方法来遍历。
转换成数组的方法
通过将类数组对象转换为真正的数组，可以解决大部分与类数组对象相关的问题，使其更易于处理和操作。
在 JavaScript 中，将类数组对象转换为数组有多种方法。以下是其中的几种常见方法以及相应的代码示例：
- Array.from() 方法：这是一种常用的转换类数组对象为数组的方法。
// NodeList 转换为数组示例
const nodeList = document.querySelectorAll('div');
const divArray = Array.from(nodeList);
console.log(divArray);
- 扩展运算符 (…)：这是另一种简单直接的转换方法。
// arguments 转换为数组示例
function testArguments() {const argsArray = [...arguments];console.log(argsArray);
}testArguments('arg1', 'arg2', 'arg3');
- Array.prototype.slice.call() 方法：使用
slice方法结合call可以将类数组对象转换为数组。
// 字符串转换为数组示例
const str = "Hello";
const strArray = Array.prototype.slice.call(str);
console.log(strArray);
- 使用ES6中的展开运算符结合Array构造函数
// 字符串转换为数组示例
const str = "Hello";
const strArray = [...str];
console.log(strArray);
- Array.prototype.splice.call()方法：通过
call调用数组的splice方法来实现转换
// 字符串转换为数组示例
const str = "Hello";
const strArray = Array.prototype.splice.call(str);
console.log(strArray);
- Array.prototype.concat.apply：通过 apply 调用数组的 concat 方法来实现转换
Array.prototype.concat.apply([], arrayLike);
以上代码展示了几种常用的将类数组对象转换为数组的方法。使用任何一种方法都可以将类数组对象转换为数组，使得后续操作更加方便。
相关文章：
【前端基础】什么是类数组对象，类数组对象转换成数组的方法
类数组对象（array-like object）是指在 JavaScript 中具有类似数组的特征但不是真正的数组的对象。这些对象具有类似数组的特性，例如有一个 length 属性和通过索引访问元素的能力，但它们不具备数组对象的所有方法和特性。 什么是类…...
Python快速入门系列-8（Python数据分析与可视化）
第八章：Python数据分析与可视化 8.1 数据处理与清洗8.1.1 数据加载与查看8.1.2 数据清洗与处理8.1.3 数据转换与整理8.2 数据可视化工具介绍8.2.1 Matplotlib8.2.2 Seaborn8.2.3 Plotly8.3 数据挖掘与机器学习简介8.3.1 Scikit-learn8.3.2 TensorFlow总结在本章中，我们将探讨…...
双非硕转测试之Java学习笔记（一）：集合
Java学习-----集合 简单概括单列集合--collectionlist接口：vector类：LinkedList类：set接口：HasSet类：LinkedHashSet类： 双列集合--MapMap接口：HashMap类：HashTable类：Pro…...
zabbix源码安装
目录 一.安装php和nginx客户端环境 二.修改php配置 三.修改nginx配置文件 四.下载并编译zabbix 五.创建zabbix需要的用户及组 六.安装编译需要的依赖 七.配置zabbix文件 八.数据库配置 九.配置zabbix 十.web界面部署 十一.遇到无法创建配置文件 十二.登录zabbix 前…...
计算机视觉之三维重建（5）---双目立体视觉
文章目录 一、平行视图1.1 示意图1.2 平行视图的基础矩阵1.3 平行视图的极几何1.4 平行视图的三角测量 二、图像校正三、对应点问题3.1 相关匹配法3.2 归一化相关匹配法3.3 窗口问题3.4 相关法存在的问题3.5 约束问题 一、平行视图 1.1 示意图 如下图即是一个平行视图。特点&a…...
计算机网络-TCP/IP 网络模型
TCP/IP网络模型各层的详细描述： 应用层：应用层为应用程序提供数据传输的服务，负责各种不同应用之间的协议。主要协议包括： HTTP：超文本传输协议，用于从web服务器传输超文本到本地浏览器的传送协议。FTP&…...
算法训练营第29天|LeetCode 491.递增子序列 46.全排列 47.全排列Ⅱ
LeetCode 491.递增子序列 题目链接： LeetCode 491.递增子序列 解题思路： 用哈希集合进行去重，同一树层不能取重复元素。 代码： class Solution { public:vector<vector<int>>result;vector<int>path;void…...
Ubuntu服务器搭建 - 环境篇
Ubuntu服务器搭建 - 环境篇 基于腾讯云服务器 - Ubuntu 20.04 LTS 一、安装 - MySQL 1.1 概述 MySQL安装方式有三种: 1. 使用Ubuntu 包管理工具 apt安装 2. 使用MySQL官方APT存储库安装 3. 使用MySQL官方二进制发行版安装 1.2 安装 MySQL 使用MySQL官方APT存储库安装 $ wget…...
深度学习基础模型之Mamba
Mamba模型简介 问题：许多亚二次时间架构(运行时间复杂度低于O(n^2)，但高于O(n)的情况)（例如线性注意力、门控卷积和循环模型以及结构化状态空间模型（SSM））已被开发出来，以解决 Transformer 在长…...
Topaz Video AI for Mac v5.0.0激活版 视频画质增强软件
Topaz Video AI for Mac是一款功能强大的视频处理软件，专为Mac用户设计，旨在通过人工智能技术为视频编辑和增强提供卓越的功能。这款软件利用先进的算法和深度学习技术，能够自动识别和分析视频中的各个元素，并进行智能修复和增强&…...
解决WordPress文章的段落首行自动空两格的问题
写文章时，段落首行都会空两格，可是WordPress自带的编辑器却没有考虑到这一点，导致发布的文章首行都是顶格的，看起来很不习惯。 我们通常的解决方法都是在发布文章时把编辑器切换到“文本”模式，然后再在首行手动键入两…...
RISC-V单板计算机模拟和FPGA板多核IP实现
🎯要点 🎯使用单板计算机 Visionfive 2 或模拟器测试RISC-V汇编🎯RISC-V汇编加载和算术。🎯使用GNU MAKE汇编RISC-V指令，ESP32使用CMake编译执行指令。🎯RISC-V汇编功能和使用释义：控制指令&am…...
Mojo编程语言案例及介绍
Mojo是一种新兴的编程语言，它结合了现代编程范式与简洁易读的语法，为开发者提供了一个强大且高效的开发工具。以下将详细介绍Mojo编程语言的特性，并通过一个实际案例来展示Mojo的应用。 一、Mojo编程语言介绍 Mojo编程语言的设计理念是“简单…...
【Python面试题收录】Python中有哪些方法交换两个变量的值？至少给出三种方法。
一、使用临时变量 # 定义原始变量 a 10 b 20# 直接交换，Python会一次性执行两个赋值操作 a, b b, a# 无需额外变量，a 和 b 的值已经交换 print(a) # 输出: 20 print(b) # 输出: 10 二、利用元组解包特性（不使用临时变量，推荐…...
MySQL核心命令详解与实战，一文掌握MySQL使用
文章目录 文章简介演示库表创建数据库表选择数据库删除数据库创建表删除表向表中插入数据更新数据删除数据查询数据WHERE 操作符聚合函数LIKE 子句分组 GROUP BY HAVINGORDER BY(排序) 语句LIMIT 操作符 分页查询多表查询-联合查询 UNION 操作符多表查询-连接的使用-JOIN语句编…...
基于Springboot + MySQL + Vue 大学新生宿舍管理系统 （含源码）
目录 📚 前言 📑摘要 📑操作流程 📚 系统架构设计 📚 数据库设计 💬 管理员信息属性 💬 学生信息实体属性 💬 宿舍安排信息实体属性 💬 卫生检查信息实体属性 &…...
vulnhub pWnOS v2.0通关
知识点总结： 1.通过模块来寻找漏洞 2.msf查找漏洞 3.通过网站源代码，查看模块信息 环境准备 攻击机：kali2023 靶机：pWnOS v2.0 安装地址：pWnOS: 2.0 (Pre-Release) ~ VulnHub 在安装网址中看到，该靶…...
leetcode热题100.数据流的中位数
作者：晓宜 🌈🌈🌈 个人简介：互联网大厂Java准入职，阿里云专家博主，csdn后端优质创作者，算法爱好者 ❤️❤️❤️ 你的关注是我前进的动力😊 Problem: 295. 数据流的中位数…...
C 从函数返回指针
我们已经了解了 C 语言中如何从函数返回数组，类似地，C 允许您从函数返回指针。为了做到这点，您必须声明一个返回指针的函数，如下所示： int * myFunction() { . . . }另外，C 语言不支持在调用函数时返回局部…...
(文章复现)考虑分布式电源不确定性的配电网鲁棒动态重构
参考文献： [1]徐俊俊,吴在军,周力,等.考虑分布式电源不确定性的配电网鲁棒动态重构[J].中国电机工程学报,2018,38(16):4715-47254976. 1.摘要 间歇性分布式电源并网使得配电网网络重构过程需要考虑更多的不确定因素。在利用仿射数对分布式电源出力的不确定性进行合…...
R语言AI模型部署方案：精准离线运行详解
R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
.Net框架，除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
练习（含atoi的模拟实现,自定义类型等练习）
一、结构体大小的计算及位段 （结构体大小计算及位段 详解请看：自定义类型：结构体进阶-CSDN博客） 1.在32位系统环境，编译选项为4字节对齐，那么sizeof(A)和sizeof(B)是多少？ #pragma pack(4)st…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
【2025年】解决Burpsuite抓不到https包的问题
环境：windows11 burpsuite:2025.5 在抓取https网站时，burpsuite抓取不到https数据包，只显示： 解决该问题只需如下三个步骤： 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质 在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。 基础操作不再赘述。 打开 macOS 终端，开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
Mysql8 忘记密码重置，以及问题解决
1.使用免密登录 找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
HTML前端开发：JavaScript 获取元素方法详解
作为前端开发者，高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法，分为两大系列： 一、getElementBy... 系列 传统方法，直接通过 DOM 接口访问，返回动态集合（元素变化会实时更新）。…...