伪数组转为真数组

最新推荐文章于 2024-08-13 17:08:18 发布

原创最新推荐文章于 2024-08-13 17:08:18 发布 · 289 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

数组专栏收录该内容

3 篇文章

订阅专栏

本文详细解析了伪数组（类数组）与真数组之间的区别，包括length属性的可变性、数组方法的使用限制，以及原型链的不同。同时介绍了如何将常见的伪数组，如函数参数arguments和DOM对象列表，转换为真数组的三种实用方法。

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

定义

伪数组（类数组）：看起来想一个数组，可以使用length属性，无法使用数组的方法，其实质上是一个对象
与真数组的区别

1.真数组可以改变length的，伪数组不可以改变length
2.伪数组不可使用数组的方法，例如push等
3.伪数组的__proto__是Object，而数组的__protp__是Array

伪数组不可以使用数组的方法的原因
数组的底层构造器是Array，而Array是构造函数，它的方法都写在prototype上面，而伪数组的底层构造器是Object，不能的调用Array原型上的方法。
常见的伪数组
伪数组：函数内部的arguments，DOM对象列表(document.getElementsByTags)，jQuery对象($(“div”))

伪数组转真数组

下面是一个伪数组

function person(name,age,sex) {
   console.log(arguments);
   console.log(arguments.length);
   arguments.push(1);
}
person("丽丽",12,"女");

运行结果如下：
在这里插入图片描述
1.新定义一个数组，遍历伪数组，将伪数组里面的值一个个放入新数组

var arr =[];
function person(name,age,sex) {
    console.log(arguments);
    console.log(arguments.length);
    for(var i =  0; i < arguments.length; i ++) {
        arr.push(arguments[i])
    }
    console.log(arr);
    
}
person("丽丽",12,"女");

运行结果
在这里插入图片描述
2.使用Array.prototype.slice.call(lis)，改变this指向伪数组

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        // 将伪数组变成真数组的方法
       var lis = document.getElementsByTagName("li");
       console.log(lis);
       var liList = Array.prototype.slice.call(lis);
       console.log(liList);
    </script>
</body>

运行结果
在这里插入图片描述
3.使用ES6里面的from()方法

<script>
        // 将伪数组变成真数组的方法
       var lis = document.getElementsByTagName("li");
       console.log(lis);
       var liList = Array.from(lis);
       console.log(liList);
       
    </script>