唯品秀博客
首页 > 前端开发 > Javascript > javascript中什么是伪数组?

javascript中什么是伪数组?

2019年05月13日 唯品秀 243次浏览

大约在200万年前,人类祖先炎帝联合黄帝同神魔蚩尤展开激烈的战斗,那一战打的昏天暗地,日月无光,足足百年,人间生灵涂炭。。。千年之后,人类开始从再次从蛮荒开始走向文明。。。扯犊子了,实际上在两年前,一次面试前端时候遇到面试官问起我什么是伪数组,我蒙蔽,纳尼?只知道数组,怎么还有假数据,蒙了,后来回去一番侦查,才发现原来就是这么个玩意儿,时至今日我也没没搞明白那人问我这个概念的具体意义,因为在我看来,这个东西本身就没太大意义,起码我至今没真正见过有人能拿它做啥?

什么是伪数组?

  • 不要像年轻的我样,被这个概念给吓着了,其实就是个噱头,所谓的伪数组就是个对象,但它具有这么几个特点:
    1. ● 伪数组是一个对象
    2. ● 这个对象必须要有length属性
    3. ● 它终究是个假数组,它没有数组的splice,concat,pop等方法
    4. ● 如果这个对象的length不为0,那么必须要有按照下标存储的数据
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var a= {
        'length': 3,
        "0": "first",
        "1": "second",
        "2": "third"
    }

    console.log(Object.prototype.toString.call(a))
    console.log(a.length)
    console.log(a[0])
    //结果:
    [object Object]
    3
    first

    嗦嘎,看到没,这玩意儿唯一有意思地方就是有个长度属性,并且你不管访问第几位下标时候取值,都把length属性给忽略,就好比上面我console.log(a[0]),按道理我们应该拿到的是3,但实际打印出来的是first。那么如果我这么写你再来看一个逗比景象

    1
    2
    3
    4
    5
    6
    7
    8
    var fakeArray = {
        length: 10,
        "0": "first",
        "1": "second",
        "2": "third"
    };
    //结果:
    10

    嗯哼?正常对象我们取长度是取不了的,结果本身是undefined,但伪数组中有length属性,所以这里我们取到了所谓的长度10。

    伪数组转化为真数组

    可以通过call或者apply的方法,将伪数组转化为真数组

    1
    2
    3
    4
    5
    6
    7
    8
    var fakeArray = {
        length: 10,
        "0": "first",
        "1": "second",
        "2": "third"
    };
    Array.prototype.slice.call(fakeArray)
    // 此时已经改变了 this 指向,使得fakeArray拥有了真数组的原型方法,如下图:

    伪数组在哪里?

    其实伪数组在实际项目中随处可见,如下图:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <ul id = 'ul'>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
    <script>
        var arr = document.getElementById('ul')
        console.dir(arr.children)
    </script>
    </html>

    总结

    1、伪数组没有数组 Array.prototype 的属性值,类型是 Object ,而数组类型是 Array

    2、数组是基于索引的实现, length 会自动更新,而对象是键值对

    3、使用对象可以创建伪数组,伪数组可以利用call或者apply很方便的转化为真数组

    4、反着我就发现这么几个特性玩意儿,具体能做个啥,大家项目中自己去尝试,下次有人再拿这玩意儿面试,我得好好请教下对方,这玩意儿到底能干嘛?装13显得自己懂的概念多么?

    「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

    赞( 0 ) 打赏

    谢谢你请我吃鸡腿*^_^*

    支付宝
    微信
    0

    谢谢你请我吃鸡腿*^_^*

    支付宝
    微信
    标签:

    上一篇:

    下一篇:

    共有 1 条评论 - javascript中什么是伪数组?

    1. 奶爸de笔记 Mac OS X Chrome 74.0.3729.131

      技术问题,看一眼,以后用的到的时候再来。

    博客简介

    唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

    精彩评论

    友情链接

    他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!

    站点统计

    • 文章总数: 190 篇
    • 草稿数目: 2 篇
    • 分类数目: 13 个
    • 页面总数: 21 个
    • 评论总数: 873 条
    • 链接总数: 13 个
    • 标签总数: 371 个
    • 建站时间: 886 天
    • 注册用户: 690 人
    • 访问总量: 8673026 次
    • 最近更新: 2019年5月17日
    服务热线:
     173xxxx7240

     QQ在线交流

     旺旺在线