前端面试之伪数组

桉屿念汐

已于 2022-08-20 21:31:12 修改

阅读量1k

点赞数 1

文章标签：数据结构

于 2022-08-04 21:53:40 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41690420/article/details/126166904

版权

本文介绍了伪数组的概念，它们具备length属性和可遍历性，但不支持数组的某些方法。接着，详细阐述了五种将伪数组转换为真正数组的方法：包括遍历push、slice.call、拓展运算符、Array.from以及改变原型指向。这些转换技巧在处理类似数组对象时十分实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是伪数组？

伪数组具有以下特点：

伪数组具有length属性，但length属性不是动态的，不会随着成员的变化而变化；
可以通过索引找到具体的值；
伪数组可以通过for循环遍历每一项；
伪数组不具备数组的push()， forEach()等方法。
伪数组本质是一个 Object，而真实的数组是一个 Array。

二、如何将伪数组转换为真正的数组？

        var arrLike = {
            "0": "1",
            "1": "2",
            "length": 2
        };

方法1、遍历伪数组，将每一项push到新数组中

        var arrLike = {
            "0": "1",
            "1": "2",
            "length": 2
        };        
        var newArr = [];
        for (var i = 0; i < arrLike.length; i++) {
            newArr.push(arrLike[i]);
        }
        console.log(newArr);

方法2、slice.call()方法


        var arrLike = {
            "0": "1",
            "1": "2",
            "length": 2
        };        
        var newArr = [].slice.call(arrLike);
        console.log(newArr);

方法3、拓展运算符方法


    <div class="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <script>
        var ps = document.querySelectorAll('p');
        var newArr = [...ps];
        console.log(newArr);
    </script>

方法4、Array.from()方法

        var arrLike = {
            "0": "1",
            "1": "2",
            "length": 2
        };         
        var newArr = Array.from(arrLike);
        console.log(newArr);

方法5、改变原型指向

        var arrLike = {
            "0": "1",
            "1": "2",
            "length": 2
        };
        arrLike.__proto__ = Array.prototype;
        console.log(arrLike);
//通过改变原型指向，arrLike就继承了Array.prototype中的方法
//可以使用push()，unshift()等方法了，length值也会随之动态改变。