欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~
什么是伪数组
假如有这样一段代码
<!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_打开看看，它没有数组的splice，concat，pop等方法
proto
特点：
- 具有
length属性 - 按索引方式存储数组
- 不具有数组的方法
将伪数组转化为真数组
可以通过
call或者apply的方法，将伪数组转化为真数组
Array.prototype.slice.call(liArr.children)
// Array.prototype.slice.apply(liArr.children)
真伪数组转换
原理
借用数组原型方法：
var arr = Array.prototype.slice.call(liArr.children);
Array.prototype.forEach.call(liArr.children, function(v) {
// 循环liArr.children对象
});
// push
// some
// every
// filter
// map
// ...
可以简化为：
Array.prototype.slice.call(liArr.children)
// 此时已经改变了 this 指向，使得 liArr.children 拥有了真数组的原型方法
总结
- 伪数组没有数组
Array.prototype的属性值，类型是Object，而数组类型是Array - 数组是基于索引的实现， length 会自动更新，而对象是键值对
- 使用对象可以创建伪数组，伪数组可以利用
call或者apply很方便的转化为真数组
网友评论