伪（类）数组对象是如何转成真正的数组的，click here!

最新推荐文章于 2023-04-03 16:34:17 发布

wangbinXMU

最新推荐文章于 2023-04-03 16:34:17 发布

阅读量577

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 前端文章标签： javascriot 伪数组对象数组

本文链接：https://blog.youkuaiyun.com/wangbinXMU/article/details/82385483

前端同时被 2 个专栏收录

12 篇文章

订阅专栏

javascript

7 篇文章

订阅专栏

何为伪数组对象？

看了一些博客，也自己尝试了下，无非就是三大特点：
1. 具有length属性；
2. 能按索引取值；
3. 不能使用数组的API；

常见的伪数组对象

一. NodeList 也就是大家DOM操作时取得的DOM节点集合，如：

<body>
    <div class="f">
        <div class="container  d">1</div>
        <div class="container2 d">2</div>
        <div class="container3 d">3</div>
        <div class="container4 d">4</div>
        <div class="container5 d">5</div>
        <div class="container6 d">6</div>
    </div>
</body>
<script type='text/javascript'>
    let divList = document.querySelectorAll('.d');
    console.log(divList);
    console.log(Array.isArray(divList));
    console.log(divList instanceof Array);
</script>

让我们看下打印结果：
这里写图片描述

各位请看，返回两false,说明这不是数组，如何转变呢？

1 利用拓展运算符

    let divList = document.querySelectorAll('.d');
    // 1. 拓展运算符
    let r1 = [...divList]
    console.log(r1);
    console.log(Array.isArray(r1));

结果：
这里写图片描述

两个判断均返回true,说明已经转成的真正数组。

2 Array.from() 方法

    let r2 = Array.from(divList);
    console.log(r2);

3 ES5方法

    let r3 = Array.prototype.slice.call(divList);
    console.log(r3);

三种方法均可，第3种方法改变了底层slice方法的this指向来转换，具体可参考下面博客：
https://www.cnblogs.com/guorange/p/6668440.html

二另一常见的伪数组对象是函数内部的参数集合对象arguments, 请看：

    // arguments
    function foo(){
        let args = arguments;
        console.log(args);
        console.log(Array.isArray(args));
    }

    foo('a','b','c','d');