JavaScript 中的类数组对象

在 JavaScript 中,有些对象看起来像是数组,但实际上并不具有完整的数组功能,这就是所谓的类数组对象。本文将介绍类数组对象的定义、常见特征和如何将其转换为真正的数组。

定义

类数组对象是指一个拥有 length 属性且属性名为非负整数的普通对象。这样的对象经常出现在 DOM 操作中,比如通过 document.querySelectorAll() 返回的 NodeList 对象以及表单元素的 form.elements 属性返回的 HTMLCollection 对象等。

----- -------- - --------------------------------- -- --------
----------------------------- -- -

----- ------------ - --------------------------- -- --------------
--------------------------------- -- -

特征

虽然类数组对象看起来像是数组,但它们与真正的数组还是有一些区别的,比如:

  1. 类数组对象没有数组原型链上的方法,如 push()pop() 等;
  2. 类数组对象不能使用数组语法访问元素,如 arr[0]
  3. 类数组对象可以被遍历,但需要使用 for...ofArray.from() 转换后再使用 forEach()map() 等数组方法。
----- -------- - ---------------------------------

-- --------------
-- ------------------------- -- ---------

-- -- -------- -------
--- ------ ---- -- --------- -
  --------------------------
-

-- -- ------------ ------------------
----------------------------------- ------ -- -
  ------------------ --------------
---

转换为数组

如果我们想要对类数组对象使用数组原型链上的方法,或者使用数组语法访问元素,就需要将其转换为真正的数组。有多种方式可以实现类数组对象转换为数组,下面是一些常见的方法。

1. Array.from()

Array.from() 可以将一个可迭代对象或类数组对象转换为数组。它接受两个参数:第一个参数是要转换的对象,第二个参数是一个可选回调函数,用于在转换过程中对每个元素进行处理。

----- -------- - ---------------------------------

-- -- ------------ - -------- -----
----- --- - ---------------------
-------------------------------- -- ----

2. Spread Operator

ES6 中的扩展运算符(Spread Operator)也可以将类数组对象转换为数组。

----- -------- - ---------------------------------

-- -------- -------- -----
----- --- - --------------
-------------------------------- -- ----

3. Array.prototype.slice.call()

Array.prototype.slice.call() 方法可以在类数组对象上调用 Array.prototype.slice 方法,并将结果返回为一个新数组,从而实现将类数组对象转换为数组。

----- -------- - ---------------------------------

-- -- ------------ - -------- -----
----- --- - -------------------------------------
-------------------------------- -- ----

结语

了解和掌握类数组对象的特征和转换方法,在前端开发中是非常重要的一部分。希望本文能够对你有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/28642


猜你喜欢

  • JavaScript 和 ActionScript 3 的主要区别

    在前端开发中,JavaScript 和 ActionScript 3 是两种常用的脚本语言。虽然它们有些相似之处,但也存在许多重要的区别。在本文中,我们将深入探讨 JavaScript 和 Actio...

    7 年前
  • JavaScript 设置带过期时间的 Cookie

    在前端开发中,Cookie 是一种常见的存储用户信息的方式。设置带有过期时间的 Cookie,可以让我们更好地控制用户信息的有效期,从而提高网站的安全性和可用性。本文将介绍如何使用 JavaScrip...

    7 年前
  • Javascript中的线程安全?

    Javascript是单线程的编程语言。也就是说,它在任何给定的时刻只能执行一个任务。虽然Javascript引擎可以并行处理某些任务,例如网络I / O或Web Workers,但它们不会直接访问应...

    7 年前
  • AngularJS Chrome Autocomplete Dilemma

    在使用 AngularJS 和 Chrome 浏览器的时候,可能会遇到自动完成表单数据出现问题的情况。这个问题是因为 Chrome 的自动填充机制和 AngularJS 的双向绑定机制相互干扰导致的。

    7 年前
  • 在 D3 力导向图中添加文本标签并在悬停时调整大小

    简介 D3 是一款流行的 JavaScript 数据可视化库,它提供了各种强大的工具和功能,用于创建交互式和动态的数据可视化。其中一个很受欢迎的特性是力导向图(Force directed Graph...

    7 年前
  • 从Javascript中启动和停止Chrome性能分析器

    在前端开发过程中,优化应用程序性能是非常重要的。Chrome浏览器提供了一个内置的性能分析器,可以帮助您找出代码中的瓶颈并进行优化。在本文中,我们将学习如何从JavaScript中启动和停止Chrom...

    7 年前
  • CSS过渡效果在新元素上的应用

    CSS过渡效果是一种简单而强大的方式,可以使网站或应用程序更具交互性和动态性。然而,当新元素被添加到DOM中时,传统的过渡方法可能无法起作用。本文将介绍如何使用CSS3过渡实现对新增元素的动画效果。

    7 年前
  • 为什么 JavaScript 正则表达式中的 alternation 操作符(|)不会返回两个匹配项?

    在 JavaScript 正则表达式中,alternation 操作符(也称为“管道”操作符)用于指定两个或多个选择项之一。例如,正则表达式 /cat|dog/ 匹配字符串中的 “cat” 或 “do...

    7 年前
  • 在JavaScript中如何根据值禁用<select>标签中的<option>?

    标签是HTML表单元素之一,它允许用户从下拉列表中选择一个选项。每个 禁用 要禁用 ------- -------------- ------- ---------------------- ...

    7 年前
  • input checkbox的true、checked和yes属性

    在前端开发中,我们经常会用到checkbox这个控件来实现多选功能。然而,在设置checkbox的状态时,我们可能会遇到一些疑惑:应该使用true还是checked属性?是否还可以使用yes属性?本文...

    7 年前
  • 使用 RequireJS 的构建配置和 r.js 在多页面项目中的应用

    在前端开发中,使用 RequireJS 可以帮助我们更好地管理 JavaScript 模块,并使我们的代码更具可读性和可维护性。但是,在大型多页面项目中使用 RequireJS 可能会面临一些挑战,例...

    7 年前
  • 如何获取 JSF 组件的 ID 以便在 JavaScript 中使用

    当你需要在 JavaScript 中操作 JSF 组件时,你需要知道它们的 ID。但是,在渲染 HTML 页面时,JSF 组件的 ID 可能会被服务器端生成器自动修改。

    7 年前
  • Javascript replace方法及其"$1"使用详解

    Javascript中的replace()方法是字符串处理的重要工具,它可以用来将一个字符串中的指定内容替换成新的字符串或者其他表达式。在replace()方法中,我们可以使用正则表达式来匹配需要替换...

    7 年前
  • CSS height 100% 百分比不起作用

    在前端开发中,CSS布局是很重要的一部分。其中,height属性用于设置元素的高度。当我们尝试使用 height: 100% 来让一个元素铺满其父容器时,可能会遇到百分比不起作用的问题。

    7 年前
  • 空JavaScript数组的冲突布尔值

    在前端开发中,我们经常需要使用JavaScript数组。但是,当数组为空时,它的布尔值可能会出现意外的结果。这篇文章将介绍空JavaScript数组的冲突布尔值,并提供一些指导性建议。

    7 年前
  • jqGrid 表头如何移除展开/折叠按钮?

    jqGrid 是一个流行的 jQuery 插件,用于创建客户端分页、排序和搜索的网格表。在 jqGrid 中,每个列都有一个可展开/折叠的区域,其中包含列的名称和一些选项。

    7 年前
  • Remove Focus Programmatically?

    在前端开发中,用户交互是至关重要的一部分。焦点是其中一个关键元素,它指示了用户当前正在与哪个元素进行交互。例如,在表单上填写时,焦点通常会自动移到下一个表单项。但是,在某些情况下,可能需要以编程方式控...

    7 年前
  • Prototyping Object in Javascript 破坏了 jQuery?

    在使用 jQuery 的过程中,我们会发现一些奇怪的问题。其中之一是当我们尝试扩展 Object 对象时,却发现 jQuery 报错了。这似乎很奇怪,因为我们并没有直接修改 jQuery 的代码。

    7 年前
  • 如何在JavaScript中返回值

    JavaScript是一种广泛使用的脚本语言,它可以用于网页开发、后端开发等多个领域。在JavaScript中,函数可以通过return语句来返回特定的值。本文将详细介绍如何在JavaScript中返...

    7 年前
  • JavaScript 对象的最大大小限制

    在 JavaScript 中,对象是一种非常重要的数据类型,用于存储和操作复杂数据结构。然而,JavaScript 对象的大小是有一定限制的。本文将探讨 JavaScript 对象的最大大小限制,并提...

    7 年前

相关推荐

    暂无文章