关于javascript中的伪数组

2020-01-15 本文已影响0人淡淡烟草味

1、什么是js伪数组？

请看下面一段代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <ul id='app'>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
    var arr = document.getElementById('app')
    // console.log(arr.children)
    console.log([].slice.call(arr.children))
</script>

</html>

控制台输出：

控制台输出.png

上图就是一个伪数组，长相很像数组，但是将他的原型 _proto_ 打开看看，它没有数组的 splice，concat，pop等方法

proto.png

特点：

具有length属性
按索引方式存储数组
不具有数组的方法

2、将伪数组转化为真数组

可以通过call、apply 或者 [].slice.call 的方法，将伪数组转化为真数组

Array.prototype.slice.call(arr.children)
Array.prototype.slice.apply(arr.children)
[].slice.call(arr.children);

页面代码.png

真伪数组.png

3、原理

借用数组原型方法：

var arr = Array.prototype.slice.call(arr.children);
 
Array.prototype.forEach.call(arr.children, function(v) {
  // 循环arr.children对象
});

// push
// some
// every
// filter
// map
// ...

可以简化为：

Array.prototype.slice.call(arr.children) 
// 此时已经改变了 this 指向，使得 arr.children 拥有了真数组的原型方法

4、总结

伪数组没有数组 Array.prototype 的属性值，类型是 Object ，而数组类型是 Array
数组是基于索引的实现，length 会自动更新，而对象是键值对
使用对象可以创建伪数组，伪数组可以利用call或者apply很方便的转化为真数组