博客
关于我
js:详解js中的伪数组
阅读量:281 次
发布时间:2019-03-01

本文共 990 字,大约阅读时间需要 3 分钟。

伪数组的特性

在JavaScript中,某些对象虽然不是数组,但在行为上与数组非常相似。这些对象被称为伪数组。典型的伪数组包括函数的arguments对象、DOM元素集合以及某些字符串。伪数组的特点主要体现在以下几个方面:

1. **具备length属性**:伪数组对象都能提供length属性,表示其元素的数量。

2. **按索引存储数据**:伪数组的元素可以通过数字索引随机访问,这与真正的数组一致。

3. **缺少数组特有的方法**:与真正的数组不同,伪数组通常不具备push、pop等数组特有的方法。

伪数组的示例

下面的示例展示了一个伪数组的结构:

  • 1111
  • 1111
  • 1111

这个伪数组的元素可以通过索引随机访问,并且具备length属性。例如,下面的代码可以获取集合并打印结果:

const oUL = document.querySelector('ul');console.log(oUL[0], oUL[1], oUL[2]);

伪数组与真实数组的区别

虽然伪数组在行为上与数组相似,但它们并不是真实的数组对象。要将伪数组转换为真实的数组,可以使用以下方法:

1. **使用Array.prototype.slice.call()**:这是一个常用的方法,例如:

Array.prototype.slice.call(oUL);

2. **使用ES6的Array.from()方法**:这也是一个简洁的选择,例如:

Array.from(oUL);

如何实现伪数组和伪数组转化函数

有时候,开发者可能需要创建一个伪数组对象。以下是一个实现示例:

const obj = {  "0": "aaa",  "1": 12,  "length": 2,  push: Array.prototype.push,  splice: Array.prototype.splice};// 动态改变length并添加新元素obj.push = function(arr) {  this.length++;  return this;};console.log(obj);obj.push("newVal");console.log(obj);

通过这种方式,我们可以创建一个具备数组方法的伪数组对象。这个对象可以像真实数组一样进行操作,但它的元素是通过对象属性存储的。

转载地址:http://yopo.baihongyu.com/

你可能感兴趣的文章
Openlayers实战:判断共享单车是否在电子围栏内
查看>>
Openlayers实战:加载Bing地图
查看>>
Openlayers实战:绘制图形,导出geojson文件
查看>>
Openlayers实战:绘制图形,导出KML文件
查看>>
Openlayers实战:绘制多边形,导出CSV文件
查看>>
Openlayers实战:绘制带箭头的线
查看>>
Openlayers实战:输入WKT数据,输出GML、Polyline、GeoJSON格式数据
查看>>
Openlayers高级交互(10/20):绘制矩形,截取对应部分的地图并保存
查看>>
Openlayers高级交互(11/20):显示带箭头的线段轨迹,箭头居中
查看>>
Openlayers高级交互(14/20):汽车移动轨迹动画(开始、暂停、结束)
查看>>
Openlayers高级交互(15/20):显示海量多边形,10ms加载完成
查看>>
Openlayers高级交互(16/20):两个多边形的交集、差集、并集处理
查看>>
Openlayers高级交互(17/20):通过坐标显示多边形,计算出最大幅宽
查看>>
Openlayers高级交互(19/20): 地图上点击某处,列表中显示对应位置
查看>>
Openlayers高级交互(2/20):清除所有图层的有效方法
查看>>
Openlayers高级交互(20/20):超级数据聚合,页面不再混乱
查看>>
Openlayers高级交互(3/20):动态添加 layer 到 layerGroup,并动态删除
查看>>
Openlayers高级交互(6/20):绘制某点,判断它是否在一个电子围栏内
查看>>
Openlayers高级交互(7/20):点击某点弹出窗口,自动播放视频
查看>>
Openlayers高级交互(8/20):选取feature,平移feature
查看>>