JavaScript中的伪数组

LBruse
94 阅读2分钟

前言

本文章源自《JavaScript知识小册》专栏，感兴趣的话还请关注点赞收藏.

上一篇文章：《JavaScript花样百出的数组遍历》

下一篇文章：《JavaScript一文让你搞清什么是原型和原型链》

伪数组

在JavaScript中除了数组可以存储集合元素外，还有一种结构跟数组非常像，同样可以通过for循坏遍历，也拥有length属性，但并不是真正意义上的数组，这种数据结构就是伪数组，也叫类数组

代码示例

index.html代码如下

<html>
    <body>
        <h1>JavaScript</h1>
        <div>div1</div>
        <div>div2</div>
        <div>div3</div>
    </body>
</html>

接着在JS中获取当前div元素个数

let divs = document.getElementsByTagName('div')
console.log('divs', divs)

输出divs HTMLCollection(3) [div, div, div]

可以看到并不是Array，而是HTMLCollection，而这就是伪数组的一种体现。

详细展开来看的话，可以看到HTMLCollection跟Array一样具有length属性

image.png

一样可以for循环

for (let div of divs) {
    console.log(div)
}

image.png

但是本质上并不是数组，以下会输出false

console.log(divs instanceof Array)

也不像Array可以调用push方法添加元素

divs.push('div4')

会抛出异常Uncaught TypeError: divs.push is not a function

Tips: 除了document.getElementsByTagName()，document.getElementsByClassName()也是返回HTMLCollection[]，还有一个类似的document.querySelectorAll()，只不过它返回的则是NodeList[]，但两者本质上都不是Array

额外补充一点，其实Function中的arguments也是伪数组

function print() {
    console.log(arguments instanceof  Array) // 输出false
}
print(1,'123',true)

转换为数组

Array.slice()

伪数组可以通过调用Array的slice方法，从而将其转换为一个真正的Array

let divs = document.getElementsByTagName('div')
console.log('divs', divs) // HTMLCollection
divs = Array.prototype.slice(divs) // 转换

console.log(divs instanceof Array) // 输出true,这时dvis变成了真正的数组，也可以调用push()等方法

Array.from()

也可以调用Array的from方法，将伪数组转换为真正的数组

let divs = document.getElementsByTagName('div')
let arr = Array.from(arrayLike)
console.log(arr instanceof Array)

自定义伪数组

伪数组是可以自定义的，和前面的HTMLCollection等差不多

// 自定义伪数组
let sourceList = {
    0: 'English',
    1: 'Java',
    2: 'Spring',
    length: 3
}
conso.log()
avatar
文章
阅读
粉丝