前端JavaScript篇之JavaScript 类数组对象的定义?如何将类数组对象转换为真正的数组

news2024/11/28 4:27:28

目录

  • JavaScript 类数组对象的定义?如何将类数组对象转换为真正的数组
  • 如何将类数组对象转换为真正的数组


JavaScript 类数组对象的定义?如何将类数组对象转换为真正的数组

类数组对象指的是具有类似数组结构(类似于数组的属性或方法)的普通JavaScript对象。尽管它们不是真正的数组,但可以像数组一样进行一些类似的操作。通常,类数组对象具有数值索引和length属性,但不具有数组的原型方法如pushpop等。

一个常见的类数组对象的例子是 arguments 对象,它保存了函数调用时传递的所有参数,并且可以通过索引访问每个参数。

以下是一个案例介绍和示例代码:

假设有一个函数sum,它可以接收任意个数的参数,并返回所有参数的和。

function sum() {
  var argArray = Array.prototype.slice.call(arguments) // 将 arguments 对象转换为真正的数组
  var total = 0

  for (var i = 0; i < argArray.length; i++) {
    total += argArray[i]
  }

  return total
}

// 示例:求 1 到 5 的和
var result = sum(1, 2, 3, 4, 5)
console.log(result) // 输出 15

在上述代码中,arguments 对象是一个类数组对象,它类似于数组,但是不具有数组的方法。为了将它转换为真正的数组,我们使用 Array.prototype.slice.call(arguments) 将其转换为一个数组 argArray。接着,我们使用 for 循环遍历 argArray 中的每个元素,并将它们累加起来,最后返回累加的结果。

通过将类数组对象转换为真正的数组,我们可以使用数组的方法和属性在类数组对象上进行更方便的操作。

如何将类数组对象转换为真正的数组

下面我将介绍其中三种常用的方法:

  1. Array.from() 方法:
    这是一个数组静态方法,它从类数组对象或可迭代对象创建一个新的数组实例。它将类数组对象的每个元素作为新数组的元素,并返回这个新数组。
var arrayLike = { 0: 'apple', 1: 'banana', 2: 'orange', length: 3 }
var newArray = Array.from(arrayLike)
console.log(newArray)

运行结果:

['apple', 'banana', 'orange']

请添加图片描述

Array.from() 方法接受一个类数组对象作为参数,并使用对象的 length 属性和索引来创建一个新的数组。返回的数组将包含类数组对象的每个元素。

  1. Array.prototype.slice.call() 方法:
    这种方法使用数组的原型方法 slice(),并将其应用于类数组对象。通过在 slice 方法上调用 call() 方法,并将类数组对象作为参数传递,可以将类数组对象转换为一个新的数组。
var arrayLike = { 0: 'apple', 1: 'banana', 2: 'orange', length: 3 }
var newArray = Array.prototype.slice.call(arrayLike)
console.log(newArray)

运行结果:

['apple', 'banana', 'orange']

请添加图片描述

这段代码中,Array.prototype.slice.call(arrayLike)slice() 方法应用于 arrayLike 对象,将其转换为一个数组。slice() 方法接受类数组对象作为其上下文,并返回一个新的数组,其中包含类数组对象的元素。

  1. Array.prototype.concat.apply() 方法:
    这种方法使用数组的原型方法 concat()apply(),将类数组对象作为参数应用于 concat() 方法。
var arrayLike = { 0: 'apple', 1: 'banana', 2: 'orange', length: 3 }
var newArray = Array.prototype.concat.apply([], arrayLike)
console.log(newArray)

运行结果:

['apple', 'banana', 'orange']

请添加图片描述

这段代码中,Array.prototype.concat.apply([], arrayLike) 将空数组作为上下文应用于 concat() 方法,然后将类数组对象 arrayLike 作为参数传递。apply() 方法将数组作为参数展开,并返回一个新的数组。

这些方法都可以将一个类数组对象转换为一个真正的数组。你可以根据具体的使用场景和个人偏好选择其中的一种。

持续学习总结记录中,回顾一下上面的内容:
类数组对象是指具有数组特性(例如 length 属性和下标访问元素)但不是真正的数组对象,常见的有函数的 arguments 参数、DOM 元素集合和 NodeList 等。将类数组对象转换为真正的数组可以使用以下几种方式:

  1. 使用 Array.from() 方法,将类数组对象转换为数组。
  2. 使用扩展运算符 ...,将类数组对象转换为数组。
  3. 使用 Array.prototype.slice.call() 方法,将类数组对象转换为数组。
  4. 使用 Array.prototype.concat.apply([], arrLike) 方法,将类数组对象转换为数组。

这些方法都可以将类数组对象转换为真正的数组,方便进行数组相关的操作和方法调用。

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

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

相关文章

西瓜书学习笔记——流形学习(公式推导+举例应用)

文章目录 等度量映射&#xff08;仅保留点与其邻近点的距离&#xff09;算法介绍实验分析 局部线性嵌入&#xff08;不仅保留点与其邻近点的距离还要保留邻近关系&#xff09;算法介绍实验分析 等度量映射&#xff08;仅保留点与其邻近点的距离&#xff09; 算法介绍 等度量映…

vue中 日期选择--本日、本周、本月、本年选择器实现(基于elementui)

效果图&#xff1a; 由于项目需要图标统计展示&#xff0c;需要日期美观化选择如上图所示&#xff0c;代码如下&#xff1a; <template><div class"el-page body"><el-row><el-col class"statistic-analysis-report-style" :span&qu…

Elastic Search 6.x 版本 rollover 配置

背景 业务里有发送消息的请求&#xff0c;如短信、邮件、企信等&#xff0c;这些数据都会存储到 ES 中&#xff0c;用于数据的查询和问题排查等。每天都有几十万至几百万的数据&#xff0c;手动删除数据也比较繁琐&#xff0c;可以通过 ES 的 rollover 机制来实现根据条件自动…

PHP框架详解 - symfony框架

首先说一下为什么要写symfony框架&#xff0c;这个框架也属于PHP的一个框架&#xff0c;小编接触也是3年前&#xff0c;原因是小编接触Golang&#xff0c;发现symfony框架有PHP框架的东西也有Golang的东西&#xff0c;所以决定总结一下&#xff0c;有需要的同学可以参看小编的G…

【数据结构与算法】(7)基础数据结构之双端队列的链表实现、环形数组实现示例讲解

目录 2.6 双端队列1) 概述2) 链表实现3) 数组实现习题E01. 二叉树 Z 字层序遍历-Leetcode 103 2.6 双端队列 1) 概述 双端队列、队列、栈对比 定义特点队列一端删除&#xff08;头&#xff09;另一端添加&#xff08;尾&#xff09;First In First Out栈一端删除和添加&…

电脑上常见的绘图软件有哪些?

现在在电脑上绘图很流行&#xff0c;不仅可以随时更改&#xff0c;还可以提高绘图效率&#xff0c;绘图软件中有很多工具。市场上的计算机绘图软件种类繁多。包括艺术设计、工业绘图和3D绘图。那么每个绘图软件都有自己的特点。那么&#xff0c;哪个更适合计算机绘画软件呢&…

信任与创新 | 回顾通付盾的2023!

-END- 数信云&#xff0c;基于区块链与人工智能的数据安全应用与服务平台

基于SpringBoot的后端导出Excel文件

后端导出Excel&#xff0c;前端下载。 文章目录 后端导出Excel引入依赖写入响应 前端下载后端导出失败和成功返回的内容类型不同&#xff0c;因此需要分别判断。 工具类ServletUtils.javaFileUtils.javafile.js 后端导出Excel 引入依赖 poi 操作xls&#xff0c;doc…&#xff…

【Script】使用pyOpenAnnotate搭建半自动标注工具(附python源码)

文章目录 0. Background1. Method2. Code3. Example: 雄鹿红外图像标注3.1 选择色彩空间3.2 执行阈值3.3 执行形态学操作3.4 轮廓分析以找到边界框3.5 过滤不需要的轮廓3.6 绘制边界框3.7 以需要的格式保存Reference本文将手把手教你用Python和OpenCV搭建一个半自动标注工具(包…

Flutter开发模仿百度云盘创建文件夹功能Draggable和DragTarget的混合使用

使用LongPressDraggable和DragTarget写了个类似于百度云盘管理文件和文件夹的功能&#xff08;为了避免和列表的滑动手势冲突&#xff0c;所以采用LongPressDraggable而不是Draggable&#xff09;&#xff1a; 1、拖拽文件到文件夹中 2、拖拽两个文件可以合并成一个新的文件夹…

【linux】git和gdb调试工具

在linux下提交代码同步到gitee 1.创建一个新的仓库&#xff08;演示步骤&#xff09; 2.init 这两个步骤用于识别提交代码的身份&#xff0c;一个你的名字&#xff0c;一个你的邮箱 开启本地仓库 克隆本地仓库成功 我们将这个仓库拷到了111目录底下. 我们发现少了一个.gitig…

window 镜像---负载篇

前提&#xff1a;需要修改window的powershell执行脚本的策略 步骤&#xff1a;以管理员身份打开powershell&#xff0c;执行 Get-ExecutionPolicy查看当前执行策略&#xff0c;若返回值是Restricted&#xff0c;需执行Set-ExecutionPolicy RemoteSigned powershell 版本信息&am…

SpringMVC精简知识点

SpringMVC 数据格式化基本数据类型和字符串自动转换特殊数据类型和字符串自动转换 验证及国际化应用实例注意事项和使用细节注解的结合使用数据类型转换校验核心类-DatBinder取消某个属性的绑定中文乱码解决处理json和HttpMessageConverter<T>作业布置SpringMVC文件上传自…

笔记本电脑的WIFI模块,突然不显示了,网络也连接不上

问题复现&#xff1a; 早上&#xff0c;在更新完笔记本电脑的系统之后&#xff0c;连网之后&#xff0c;网络突然直接断开&#xff0c;一查看&#xff0c;WiFi模块居然不见了&#xff0c;开机重启也是如此&#xff0c;这种情况常常出现在更新系统之后&#xff0c;WiFi模块驱动就…

MySQL集群 1主1从 主从复制(原理 及配置命令)

CSDN 成就一亿技术人&#xff01; 今天分享一期 MySQL集群方案&#xff1a;主从集群 也是最常用的一种 CSDN 成就一亿技术人&#xff01; 目录 使用主从复制的原因&#xff08;优点&#xff09; 主从复制的过程&#xff08;原理&#xff09; 了解两大线程&#xff08; I/O…

7min到40s:SpringBoot 启动优化实践!

目录 背景 1 耗时问题排查 1.1 观察 SpringBoot 启动 run 方法 1.2 监控 Bean 注入耗时 2 优化方案 2.1 如何解决扫描路径过多&#xff1f; 2.2 如何解决 Bean 初始化高耗时&#xff1f; 3 新的问题 3.1 SpringBoot 自动化装配&#xff0c;让人防不胜防 3.2 使用 sta…

大带宽服务器托管的特点和考虑因素

很多公司和企业对于使用大带宽服务器的需求和存储不一样&#xff0c;为了满足不同的用户需求&#xff0c;大带宽服务器托管是个不错的选择&#xff0c;小编为您整理发布大带宽服务器托管的特点和要考虑的因素。 大带宽服务器托管是一种服务器托管服务&#xff0c;其主要特点是…

GLIP:零样本学习 + 目标检测 + 视觉语言大模型

GLIP 核心思想GLIP 对比 BLIP、BLIP-2、CLIP 主要问题: 如何构建一个能够在不同任务和领域中以零样本或少样本方式无缝迁移的预训练模型&#xff1f;统一的短语定位损失语言意识的深度融合预训练数据类型的结合语义丰富数据的扩展零样本和少样本迁移学习 效果 论文&#xff1a;…

JetPackCompose之Text使用指北

Jetpack Compose系列(6) - 文本组件 对应View体系中传统的TextView&#xff0c;Jetpack Compose中用Text组件来显示文本信息。跟其他组件一样&#xff0c;它在构造函数里就包含控制文本显示样式的一些属性&#xff0c;下面是其参数及解释&#xff1a; Composable fun Text(te…

从零开始手写mmo游戏从框架到爆炸(一)— 开发环境

一、创建项目 1、首先创建一个maven项目&#xff0c;pom文件如下&#xff1a; <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0…