[js基础]伪数组是个啥?

什么是伪数组

  • 具有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解)

  • 按索引方式存储数据

  • 不具有数组的方法, 比如push(),pop()等

伪数组,就是像数组一样有 length 属性,也有 0、1、2、3 等属性的对象,看起来就像数组一样,但不是数组,比如:

var fakeArray = {
  "0""first",
  "1""second",
  "2""third",
  length3
};
 
for (var i = 0; i < fakeArray.length; i++) {
  console.log(fakeArray[i]);
}
 
Array.prototype.join.call(fakeArray,'+');

生成伪数组的方法

  • function的arguments对象

  • document.getElementsByTagName和document.childNodes,返回NodeList对象的都是伪数组

  • 上传文件时选择的file对象也是伪数组

  • 自定义的某些对象

  • jQuery 对象(比如 $("div")

[js基础]伪数组是个啥?
img

伪数组的意义

伪数组是一个 Object,而真实的数组是一个 Array。

伪数组存在的意义,是可以让普通的对象也能正常使用数组的很多方法,比如:

var arr = Array.prototype.slice.call(arguments);
 
Array.prototype.forEach.call(argumentsfunction(v{
  // 循环arguments对象
});

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

以上在借用数组的原型方法的时候都可以通过数组直接量来简化使用:

var obj = {
  0'a',
  1'b',
  2'c',
  length3
}

;[].push.call(obj, 'd')

console.log([].slice.call(obj))

[].forEach.call(obj, function (num, index{
  console.log(num)
})

将伪数组变成真数组的方法

  • 使用Array.prototype.slice.call();
  • 使用[].slice.call();了解js原型链的都知道,其实这种方法和上面的方法是一样的,但是上面的方式效率相对较高
  • 使用ES6的Array.from();

总结

  • 对象没有数组 Array.prototype 的属性值,类型是 Object ,而数组类型是 Array
  • 数组是基于索引的实现, length 会自动更新,而对象是键值对
  • 使用对象可以创建伪数组,伪数组可以正常使用数组的大部分方法

原文始发于微信公众号(豆子前端):[js基础]伪数组是个啥?

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/56739.html

(0)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!