首页 > 其他分享 >js中类数组

js中类数组

时间:2024-11-07 15:09:09浏览次数:4  
标签:console log 对象 js arguments 数组 Array 中类

在 JavaScript 中,类数组(Array-like Object) 是指那些拥有类似数组的结构和特征,但并不真正是数组的对象。类数组对象有以下几个特征:

  1. 具有 length 属性:类数组对象通常都有一个 length 属性,表示其元素的个数。
  2. 可以通过整数索引访问元素:类数组对象的元素可以通过数字索引访问,类似于数组的访问方式。
  3. 没有数组的数组方法:尽管类数组对象具有类似数组的特性,但它们并不具备真正的数组方法(如 pushpopshiftunshiftmapforEach 等)。

类数组的示例

1. 函数的 arguments 对象

函数内部的 arguments 对象就是一个典型的类数组对象,包含了所有传入函数的参数。

function example() {
    console.log(arguments);  // 类数组对象
    console.log(arguments.length);  // 类数组对象有 length 属性
    console.log(arguments[0]);  // 类数组对象可以通过索引访问元素
}

example(1, 2, 3);  // 输出: Arguments [1, 2, 3]

arguments 对象不是一个真正的数组,因此它不能直接调用数组的方法,如 map()forEach() 等。

2. NodeList

在浏览器中,像 document.querySelectorAll()getElementsByTagName() 等方法返回的 NodeList 对象也是类数组对象。

const nodes = document.querySelectorAll('div');
console.log(nodes);  // 类数组对象,包含所有匹配的 div 元素
console.log(nodes.length);  // 可以通过 length 属性获取元素个数
console.log(nodes[0]);  // 通过索引访问 NodeList 中的元素

类数组与数组的区别

虽然类数组和数组有相似之处,但它们也有几个明显的区别:

  1. 缺乏数组方法:类数组对象通常不包含数组的方法,例如 forEachmappush 等。这使得它们不像真正的数组那样灵活。
  2. 不是数组实例:类数组对象并不直接继承自 Array,因此它们没有数组的一些特性(比如 Array.isArray() 会返回 false)。
const args = (function() { return arguments; })();
console.log(Array.isArray(args));  // 输出: false,因为 arguments 不是数组

类数组转数组

你可以使用 Array.from()slice() 方法将类数组对象转换为真正的数组。

1. 使用 Array.from()

const args = (function() { return arguments; })();
const arr = Array.from(args);  // 转换为数组
console.log(arr);  // 输出: [1, 2, 3]

2. 使用 slice()

slice() 方法可以用来将类数组对象转换为数组,通常会使用空的 array 作为上下文来调用。

const args = (function() { return arguments; })();
const arr = Array.prototype.slice.call(args);  // 转换为数组
console.log(arr);  // 输出: [1, 2, 3]

总结

类数组对象是那些类似于数组的对象,它们通常拥有 length 属性和整数索引,但没有数组的高级方法。常见的类数组对象有函数的 arguments 对象、DOM 方法返回的 NodeList 等。如果需要,可以将类数组对象转换为真正的数组以便更方便地操作。

标签:console,log,对象,js,arguments,数组,Array,中类
From: https://www.cnblogs.com/pansidong/p/18532271

相关文章

  • 二维树状数组
    前置知识树状数组(不会就学一下再来)简介因为树状数组可以非常简洁解决序列上的一些问题,所以考虑能否用树状数组解决矩阵(二维序列)的问题。比较暴力的想法是对于每一横行建一个树状数组,再对每一列建一个树状数组统计答案。但这样显然要\(n+m\)个树状数组,但是我们发现这些树状数......
  • angularJs 之 ng-options 的用法:
     angularjs之ng-optionng-options一般有以下用法:对于数组:labelforvalueinarrayselectaslabelforvalueinarraylabelgroupbygroupforvalueinarraylabeldisablewhendisableforvalueinarraylabelgroupbygroupforvalueinarraytrackbytrackexp......
  • node.js毕设在线小说阅读系统(程序+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于在线小说阅读系统的研究,现有研究主要集中在用户阅读行为、小说推荐算法等方面,专门针对整个系统设计与实现的研究较少。在国内外,在线小说阅读系统作......
  • node.js毕设学生在线答疑系统的设计与实现(程序+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于学生在线答疑系统的研究,现有研究主要集中在在线教育平台的构建、学生学习行为分析等方面,专门针对在线答疑系统设计与实现的研究较少。在国内外,在线......
  • 【含文档】基于ssm+jsp的茶产品销售平台(含源码+数据库+lw)
    1.开发环境开发系统:Windows10/11架构模式:MVC/前后端分离JDK版本:JavaJDK1.8开发工具:IDEA数据库版本:mysql5.7或8.0数据库可视化工具:navicat服务器:apachetomcat主要技术:Java,Spring,SpringMvc,mybatis,mysql,vue2.视频演示地址3.功能系统定义了两个......
  • 【含文档】基于ssm+jsp的NBA球队管理系统(含源码+数据库+lw)
    1.开发环境开发系统:Windows10/11架构模式:MVC/前后端分离JDK版本:JavaJDK1.8开发工具:IDEA数据库版本:mysql5.7或8.0数据库可视化工具:navicat服务器:apachetomcat主要技术:Java,Spring,SpringMvc,mybatis,mysql,vue2.视频演示地址3.功能系统定义了两个......
  • CUDA开始的GPU编程 - 第四章:C++封装GPU上的数组
    第四章:C++封装GPU上的数组std::vector的秘密:第二模板参数**你知道吗?**std::vector作为模板类,其实有两个模板参数:std::vector<T,AllocatorT>那为什么我们平时只用了std::vector呢?因为第二个参数默认是std::allocator。也就是std::vector等价于std::vector<T,s......
  • nodejs通过s3-zip对AWS-S3服务上的文件下载操作
    这里对接的是百度智能云对象存储服务,用的是aws-sdk进行服务对接的,遵照的标准都是AWSS3服务那一套标准。1、awss3服务对接的基本配置及操作流程参考博文:https://blog.csdn.net/LegendaryChen/article/details/1297753042、单个存储文件对象的下载://导入依赖constAWS=req......
  • 华为OD机试真题-数组二叉树码-2024年OD统一考试(E卷)
    最新华为OD机试考点合集:华为OD机试2024年真题题库(E卷+D卷+C卷)_华为od机试题库-CSDN博客     每一题都含有详细的解题思路和代码注释,精编c++、JAVA、Python三种语言解法。帮助每一位考生轻松、高效刷题。订阅后永久可看,发现新题及时跟新。题目描述二叉树也可以用数组来......
  • Windows安装管理多个NodeJS版本
    下载nvm管理工具,下载完成解压安装https://github.com/coreybutler/nvm-windows/releases选择nvm安装位置选择nvm安装node版本的安装位置如果提示你已经安装的有nodejs,提示你是否通过nvm管理nodejs,选择是,继续安装即可Win+R打开cmd命令窗口nvm-v查看安装的nv......