javascript中的伪数组

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

1 什么是伪数组

假如有这样一段代码

<!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. 不具有数组的方法

2 将伪数组转化为真数组

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

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

真伪数组转换

2.1 原理

借用数组原型方法

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

3 总结

  1. 伪数组没有数组 Array.prototype 的属性值,类型是 Object ,而数组类型是 Array
  2. 数组是基于索引的实现, length 会自动更新,而对象是键值对
  3. 使用对象可以创建伪数组,伪数组可以利用call或者apply很方便的转化为真数组
  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值