javascript中的伪数组

欢迎访问我的博客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>

去看控制台看看

javascript中的伪数组

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

javascript中的伪数组

特点：

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

将伪数组转化为真数组

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

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

javascript中的伪数组

原理

借用数组原型方法：

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 拥有了真数组的原型方法

总结

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