1.什么是伪数组?
伪数组(ArrayLike)又称类数组,虽然从名字上来看,貌似和数组很像,但实际上和数组有很大区别:
- 伪数组是一个对象,所以
伪数组 instanceof Array===false 和 伪数组 instanceof Object===true 这两个等式都成立
- 伪数组必须含有length属性,且必须是 number 类型,否则就不叫伪数组,就是一个普通对象而已
- 如果length不为0,那么必须要有数值型下标(即0或者'0'都可以,只要可以通过Number()转换为数值即可)存储的数据
- 伪数组不能调用数组原型上的方法。就是:xx.push()、xx.slice()、xx.indexOf() 等等这些方法都不能用
了解了伪数组的特点后,我们可以根据其特点举几个例子
2.举个栗子
不是伪数组
var a = {};
var b = { length: 3 };
是伪数组
var c = { length: 0 };
var d = { 0: '888', length: 1 };
var e = { 1: 'abc', length: 3 }
var f = { '0': 'abc',1:'test', length: 3 }
var g = { 0: 'abc',2:'test', length: 1 }
我们打印下上面7个变量的结果如下:
3.伪数组转数组
- 方法一:
Array.prototype.slice.call(arrayLike)
或者Array.prototype.slice.apply(arrayLike)
。
我们知道数组的slice方法可以对数组进行切割(不传参,返回原数组),返回新数组。由于类数组并没有数组的这些方法,所以通过前面在javascript中的this指向讲解过call的原理,我们可以借用方法。所以上面代码的call函数原理是:
arrayLike.fn1=this //this指向slice
arrayLike.fn1() //即arrayLike调用fn1也就是slice方法,所以slice方法中的this指向arrayLike。所以伪数组被切割成数组返回出来
Array.prototype上的方法原本只能用来操作array对象。但用call apply 可以把任意对象当做this传入某个方法,如此一来,方法中用到的this的地方就不再局限于原来规定的对象,而是得到更广的适用性。
- 方法二:
Array.prototype.splice.call(arrayLike, 0)
或者Array.prototype.splice.call(arrayLike, 0)
splice也是数组的方法,对数组进行切割(第一个参数为切割起始位置,必填),我就不介绍了。和上面原理一样。
- 方法三:
Array.prototype.concat.apply([], arrayLike)
- 方法四:使用es6自带的
Array.from(arrayLike)
方法
4.使用上面转换方法测试
上面我们举了几个伪数组的例子以及如何将伪数组转换为数组,现在我们对这些例子进行测试:
1.使用 Array.prototype.slice.call(arrayLike)
注:splice我就不举列子,和slice一样。
var translate=function(arrayLike){
return Array.prototype.slice.call(arrayLike)
}
console.log(translate(c),translate(c)[0],translate(c).length);
console.log(translate(d),translate(d)[0],translate(d).length);
console.log(translate(e),translate(e)[0],translate(e).length);
console.log(translate(f),translate(f)[2],translate(f).length);
console.log(translate(g),translate(g)[1],translate(g).length);
运行结果如下:
2.使用 Array.prototype.concat.apply([], arrayLike) 方法
var translate=function(arrayLike){
return Array.prototype.concat.apply([], arrayLike)
}
console.log(translate(c),translate(c)[0],translate(c).length);
console.log(translate(d),translate(d)[0],translate(d).length);
console.log(translate(e),translate(e)[0],translate(e).length);
console.log(translate(f),translate(f)[2],translate(f).length);
console.log(translate(g),translate(g)[1],translate(g).length);
运行结果如下:
3.使用 Array.from(arrayLike) 方法
var translate=function(arrayLike){
return Array.from(arrayLike)
}
console.log(translate(c),translate(c)[0],translate(c).length);
console.log(translate(d),translate(d)[0],translate(d).length);
console.log(translate(e),translate(e)[0],translate(e).length);
console.log(translate(f),translate(f)[2],translate(f).length);
console.log(translate(g),translate(g)[1],translate(g).length);
运行结果如下:
5.对比
上面测试结果:
- 从打印表面上看,
Array.prototype.concat.apply([], arrayLike)
和Array.from(arrayLike)
所有输出结果都一样,而Array.prototype.slice.call(arrayLike)
结果有些许差别 - 如果类数组length值和所含数据个数相等,三个方法结果都一样
- 如果类数组length值大于所含数据个数,
slice
将所缺失的用empty来补充,contact和from
用undefined来补充。但是打印缺失的都为undefined,所以三者只是从形式上有区别,使用没什么区别 - 如果类数组length值小于所含数据个数,三个方法都会将多余的裁减掉。
6.常见的类数组对象
1.arguments对象
arguments对象是所有(非箭头)函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。arguments对象不是一个Array。它类似于Array,但除了length属性和索引元素之外没有任何Array属性。例如,它没有pop方法。但它可以被转换为一个真正的Array。
function foo(a, b, c) {
console.log(arguments);
}
foo(1, 2, 3);
打印结果如下:
2.jquery对象
//html
<p>1</p>
<p>2</p>
<p>3</p>
//js
console.log($('p'))
3.js获取dom节点的方法,如getElementById等
//html
<p>1</p>
<p>2</p>
<p>3</p>
//js
console.log('通过querySelectorAll:',document.querySelectorAll("p"))
console.log('通过getElementsByTagName:',document.getElementsByTagName("p"))