伪数组（类数组）

在开始前，想问一下，遍历一组ul里面的li怎么做？

然而我们用each循环

for循环

我们console.log(lis)后显示出来的是一个变量名为HTMLCollection的数组.(getElementsByClassName()、getElementsByTagName()获取的都是HTMLCollection伪数组；querySelectorAll获取的是NodeList伪数组，它的原型对象上有forEach函数，但不能使用数组方法)

为何forEach不能遍历li呢？HTMLCollection又是什么？

我们再创建一个数组，将两种数组进行比较


通过上面的两张截图我们可以发现lis的原型对象指向一个 HTMLCollection 构造函数，而自己创建的数组其原型对象指向于js内置对象 Array，如果知道原型链以及原型对象的伙伴，应该会很了解了。lis并不是一个真实数组而是一个通过 HTMLCollection 构造函数构建出来的伪数组，它不能够通过forEach循环遍历。

什么是伪数组？

伪数组具有length属性，但length属性是固定不变的，且必须是number类型；
可以通过索引找到具体的值(可以通过下标访问数据)；
伪数组不具备数组所具有的方法（forEach、pop、push…）

两者区别

伪数组本质是一个 Object，而真实的数组是一个 Array。

两者共同点

都可以用for循环遍历

判断伪数组的方法

Array.isArray(obj)

绝对不要用typeof(obj)

常见的伪数组

1.arguments
2.
getElementsByTagName、
getElementsByClassName、
querySelectorAll、（获取的是由NodeList构造函数构建的伪数组）
方法获取元素组成的集合
3.上传文件时选择的file对象（Ele.files）

伪数组怎样转为真实数组

1、for循环遍历
先创建一个空的真实数组，再遍历伪数组每一项，将其保存在空的真实数组里面

2、拓展运算符
[...伪数组]
返回一个真实数组，需要用(新)变量接收

//伪数组转真实数组
function Fn(){
console.log(Array.isArray(arguments)) //false
arguments = […arguments]
console.log(Array.isArray(arguments)) //true
}
Fn([1,2,3])

3、[].slice.call(伪数组)
返回一个真实数组，需要用新变量接收
与之相同的还有
Array.prototype.slice.apply(伪数组)
[].slice.apply(伪数组)

4、Array.from(伪数组)
返回一个真实数组，需要用新变量接收

5、如果认真看懂了这篇文章，应该能够想到这一个方法
伪数组.__proto__ = Array.prototype

6、网上的其他方法
比如：NT.Wang博客里提到的jquery里面的jq的makeArray()，toArray()方法
https://www.cnblogs.com/NTWang/p/6280447.html

querySelectorAll与getElementsByClassName与getElementsByTagName区别

他们获取的都是伪数组，与其相同的还有childNodes()


querySelector获取的伪数组在dom修改后不会跟着改变（相当于数组在得到的那一刻，无论dom怎么修改，数组都被定格了）
getElement获得的伪数组在dom修改后再次得到的值会改变

forEach与each区别

1.forEach是js方法，each属于jQuery
2.forEach不能循环伪数组，each和for循环都能循环
3.forEach循环与each循环内方法的前两个形参正好相反