JavaScript: HTMLCollection/NodeList 转换为真数组及示例

在JavaScript中，HTMLCollection和NodeList是两种常见的伪数组对象，它们是由DOM API创建的，用于表示HTML文档中的元素集合，例如form元素、选择框选项、通过getElementsByTagName或getElementsByClassName获取的元素等。这些对象虽然看起来像数组，但它们并不真正属于数组类型，因为它们缺乏数组的方法，如push、pop、shift等。 由于伪数组在某些场景下可能需要操作，比如使用数组方法或者传递给其他函数时需要转换，所以开发者需要将它们转换为真正的数组。为此，我们可以创建一个名为`makeArray`的工具函数，该函数采用了一种巧妙的方法来实现这一转换。它使用`Array.prototype.slice.call()`，这是一个JavaScript特性，允许我们把一个非数组对象的行为模拟成数组，从而获取其length属性并按索引访问元素。 `makeArray`函数的基本原理是： 1. 如果对象是真正的数组，那么直接使用`slice.call(obj, 0)`就可以得到一个新数组的引用。 2. 如果对象是伪数组，但不是真正的数组，比如HTMLCollection或NodeList，那么遍历这个对象的length属性，依次将每个元素添加到新数组`res`中。 对于HTMLCollection和NodeList这样的伪数组，`makeArray`函数会确保返回的是一个真正的数组，从而可以进行数组的常规操作。 例如，我们可以看到一个函数`fun`的定义，它接收一个参数列表作为arguments，并使用`makeArray`将其转换为真正的数组。这使得我们可以在函数内部安全地处理这些参数，就像处理普通数组一样。 测试代码展示了如何使用`makeArray`函数处理三种不同的伪数组情况： 1. arguments对象：这是JavaScript中一个特殊的伪数组，代表函数调用时传递的所有参数。 2. document.documentElement.childNodes：获取文档根节点的所有子节点。 3. 页面上的多个段落元素，通过变量els获取。 将HTMLCollection和NodeList等伪数组转换成真正的数组是JavaScript编程中的常见需求，通过`makeArray`这样的工具函数，可以方便地进行数据操作和函数调用，提高代码的灵活性和可维护性。在处理这些非数组类型的集合时，理解这种转换机制至关重要。