在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`这样的工具函数,可以方便地进行数据操作和函数调用,提高代码的灵活性和可维护性。在处理这些非数组类型的集合时,理解这种转换机制至关重要。