1.什么是伪数组？

伪数组（ArrayLike）又称类数组，虽然从名字上来看，貌似和数组很像，但实际上和数组有很大区别：

1. 伪数组是一个对象，所以 伪数组 instanceof Array===false 和 伪数组 instanceof Object===true 这两个等式都成立
2. 伪数组必须含有length属性，且必须是 number 类型，否则就不叫伪数组，就是一个普通对象而已
3. 如果length不为0，那么必须要有数值型下标（即0或者'0'都可以，只要可以通过Number()转换为数值即可）存储的数据
4. 伪数组不能调用数组原型上的方法。就是：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个变量的结果如下：

20190911111001.png

3.伪数组转数组

1. 方法一：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的地方就不再局限于原来规定的对象，而是得到更广的适用性。

2. 方法二：Array.prototype.splice.call(arrayLike, 0) 或者 Array.prototype.splice.call(arrayLike, 0)

splice也是数组的方法，对数组进行切割（第一个参数为切割起始位置，必填），我就不介绍了。和上面原理一样。

3. 方法三：Array.prototype.concat.apply([], arrayLike)

4. 方法四：使用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);

运行结果如下：

20190911111500.png

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);

运行结果如下：

20190911111537.png

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);

运行结果如下：

20190911111303.png

5.对比

上面测试结果：

1. 从打印表面上看，Array.prototype.concat.apply([], arrayLike)和Array.from(arrayLike)所有输出结果都一样，而Array.prototype.slice.call(arrayLike)结果有些许差别
2. 如果类数组length值和所含数据个数相等，三个方法结果都一样
3. 如果类数组length值大于所含数据个数，slice将所缺失的用empty来补充，contact和from用undefined来补充。但是打印缺失的都为undefined，所以三者只是从形式上有区别，使用没什么区别
4. 如果类数组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);

打印结果如下:

20190911115414.png

2.jquery对象

//html
<p>1</p>
<p>2</p>
<p>3</p>

//js
console.log($('p'))

20190911115921.png

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"))

20190911120433.png