javascript中的伪数组

javascript中的伪数组

欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

什么是伪数组

假如有这样一段代码

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 liArr = document.getElementById('ul')
console.dir(liArr.children)
</script>
</html>

去看控制台看看

伪数组

上图就是一个伪数组,长相很像数组,但是将他的原型_proto_打开看看,它没有数组的spliceconcatpop等方法

proto

特点

  1. 具有length属性
  2. 按索引方式存储数组
  3. 不具有数组的方法

将伪数组转化为真数组

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

1
2
Array.prototype.slice.call(liArr.children)
// Array.prototype.slice.apply(liArr.children)

真伪数组转换

原理

借用数组原型方法

1
2
3
4
5
6
7
8
9
10
11
12
var arr = Array.prototype.slice.call(liArr.children);

Array.prototype.forEach.call(liArr.children, function(v) {
// 循环liArr.children对象
});

// push
// some
// every
// filter
// map
// ...

可以简化为

1
2
Array.prototype.slice.call(liArr.children) 
// 此时已经改变了 this 指向,使得 liArr.children 拥有了真数组的原型方法

总结

  1. 伪数组没有数组 Array.prototype 的属性值,类型是 Object ,而数组类型是 Array
  2. 数组是基于索引的实现, length 会自动更新,而对象是键值对
  3. 使用对象可以创建伪数组,伪数组可以利用call或者apply很方便的转化为真数组

本文标题:javascript中的伪数组

文章作者:王工头

发布时间:2019年01月26日 - 19:43:25

最后更新:2019年01月26日 - 20:15:29

原始链接:https://qqqww.com/javascript中的伪数组/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------