javascript中什么是伪数组？如何转换成真数组

作者：管理员 2019-05-13 10:43:58 分类：JavaScript 阅读（7794） 4

大约在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) 打赏

标签：

伪数组

上一篇：javascript如何判断数据是否是数组？

下一篇：VSCode开发Flutter必用插件，快速开发体验

javascript中什么是伪数组？如何转换成真数组

什么是伪数组？

伪数组转化为真数组

伪数组在哪里？

总结

相关推荐

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

点击取消