# 伪数组转换为真数组
# 什么是伪数组
伪数组也称类数组。像arguments
或者 获取一组元素返回的集合都是伪数组。
伪数组如何转换成真正数组,其实我们很少去这么做,但是那帮面试官可能会问,并且不止一种方法让你去实现
# 常见的伪数组
- 参数数组:
arguments
- DOM对象列表
HTMLCollection()
:比如通过document.getElementsByTagName
得到的列表 - jquery对象:比如
$("div")
// 伪数组是一个Object,而真实的数组是一个Array
console.log(list instanceof Array); // false
console.log(list instanceof Object); // true
// 拥有length属性和数值下标属性
// 伪数组没有真实数组的方法
list.forEach((ele) => console.log(ele)) // list.forEach is not a function
下面来看看,怎么转为正常的数组
# slice方法
Array.prototype.slice.call(list) && [].slice.call(list)
使用数组的slice()方法 它返回的是数组,使用call或者apply指向伪数组,其内部实现原理,也就是for循环本身
Array.prototype.slice = function (start, end) {
start = start || 0
end = start || this.length
const arr = []
for (var i = start; i < end; i++) {
arr.push(this[i])
}
return arr
}
# concat.apply
拼接成新的数组
Array.prototype.concat.apply([], list)
# Array.form() 扩展运算符
ES6果然是简洁、强大的存在
[...list] // 扩展运算符
Array.from(list) // from
# for 循环
当然,最原始的方法就是再创建一个数组,用for循环把类数组的每个属性值放在里面,不管是对象还是数组,仍是无所不能
let arr = [];
for(let i = 0; i < list.length; i++){
arr.push(list[i])
}