数组和伪数组的区别

正文

• 常见的伪数组有：函数参数arguments，DOM对象列表(例如document.querySelectorAll('div'))，jQuery中的$('div')等
• Array.prototype
  • 伪数组没有Array.prototype，它只是一个对象
  • 数组有Array.prototype，他是对象的同时，也是数组
• 索引（index）和长度（length）
  • 伪数组的索引，就是那些键值对的key，没有真正的顺序可言；长度是手动设置的
  • 数组的索引和长度是内置属性

let arr = [1, 2, 3]
let fakeArray = {
    '0': 1,
    '1': 2,
    '2': 3,
    length: 3
}
console.log(arr[1]); //2
console.log(fakeArray[1]); //2
console.log(arr.length) //3
console.log(fakeArray.length) //3

• 伪数组的定义
  • 拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)
  • 不具有数组所具有的方法
• 判断是否是数组
  • Array.isArray()

Array.isArray(arr) //true
Array.isArray(fakeArray) //false

• instanceof Array

  arr instanceof Array //true
  fakeArray instanceof Array //false

• 伪数组存在的意义
  • 让一些对象也可以使用数组方法，可以通过call()，bind()，apply()方法实现
    • 注意，方法的返回值类型不会改变，返回数组的还是会返回数组

//join
console.log(arr.join(',')) //1,2,3
console.log(Array.prototype.join.call(fakeArray, ',')) //1,2,3

//filter
console.log(arr.filter(item => item >= 2)) //[ 2, 3 ]

const filter = arr.filter.bind(fakeArray) //使用bind

console.log(filter(item => item >= 2)) //[ 2, 3 ]

console.log([].filter.call(fakeArray, item => item >= 2)) //[ 2, 3 ]

结语

如果对你有帮助的话，请点一个赞吧