JavaScript深入之类数组对象

在 JavaScript 中，数组是最常用的数据结构之一。除了基本的数组操作，类数组对象也是经常使用的对象类型之一，例如函数 arguments 对象和 DOM 元素集合。本文将深入探讨类数组对象以及相关的方法和技巧。

类数组对象

类数组对象是一个拥有 length 属性，并且索引为非负整数的普通对象。它们通常具有类似于数组的行为，例如通过下标访问元素和迭代元素。

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

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

当然，由于类数组对象不是真正的数组，因此它们并没有继承 Array.prototype 上的方法。这意味着尝试对类数组对象使用数组方法（例如 push() 或 slice()）会导致类型错误。

在实际开发中，我们常常需要将类数组对象转换为真正的数组以便进行处理。幸运的是，JavaScript 中提供了多种方式来完成这个任务。以下是几种常见的方法：

Array.from() 方法可以将类数组对象或可迭代对象转换为真正的数组。该方法接受一个可选的映射函数作为第二个参数，用于将元素转换为所需的类型。例如，以下代码将 NodeList 对象（DOM 元素集合）转换为数组：

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

Array.prototype.slice() 方法可以从已有的数组中创建一个新的子数组。它也可以用于将类数组对象转换为真正的数组。以下是使用 slice() 方法将类数组对象转换为数组的示例：

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

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

扩展运算符（...）也可以用于将类数组对象转换为数组。与 Array.from() 方法类似，扩展运算符也可以接受一个可选的映射函数作为第二个参数。以下是使用扩展运算符将类数组对象转换为数组的示例：

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

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

由于类数组对象不是真正的数组，因此它们没有继承所有数组方法。但是，它们仍然支持一些通用的操作。

由于类数组对象具有长度和索引，因此可以使用 for 循环遍历它们。以下是使用 for 循环遍历类数组对象的示例：

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

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

使用 Array.prototype.join() 方法可以将类数组对象转换为字符串。该方法接受一个可选的分隔符作为参数。例如，以下代码将 NodeList 对象转换为字符串：

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

在 JavaScript 中，类数组对象是非常常见的对象类型。虽然它们不是真正的数组，但仍然支持许多通用的操作。在需要对类数组对象进行处理时，我们可以使用多种方法将它们转换为真正的数组。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/4319