唯品秀前端博客

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

什么是伪数组?

  • 不要像年轻的我样,被这个概念给吓着了,其实就是个噱头,所谓的伪数组就是个对象,但它具有这么几个特点:
  • 伪数组是一个对象
  • 这个对象必须要有length属性
  • 它终究是个假数组,它没有数组的splice,concat,pop等方法
  • 如果这个对象的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
9
var fakeArray = {
    length: 10,
    "0": "first",
    "1": "second",
    "2": "third"
};
console.log(fakeArray.length)
//结果:
10

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

伪数组转化为真数组

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

1
2
3
4
5
6
7
8
9
var fakeArray = {
    length: 10,
    "0": "first",
    "1": "second",
    "2": "third"
};
Array.prototype.slice.call(fakeArray) // 传统方法
Array.from(fakeArray) // ES6方法
// 此时已经改变了 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显得自己懂的概念多么?
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(10) 打赏
标签:

上一篇:

下一篇:

相关推荐

4 条评论关于"javascript中什么是伪数组?如何转换成真数组"

表情

最新评论

  1. Fly丶小迪
    Mac OS X Chrome 75.0.3770.100

    测试一波 http://www.90c.vip

    1. 管理员
      Mac OS X Chrome 75.0.3770.100

      @Fly丶小迪测试成功,请查收!

  2. 椰子皮博客
    Windows 10 Chrome 63.0.3239.26

    前来围观

    1. 管理员
      Windows 10 Chrome 57.0.2987.98

      @椰子皮博客欢迎欢迎,热烈欢迎^_^

  3. 暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏