类数组

什么是类数组

长的像数组的对象，类数组又叫伪数组

类数组和数组的区别：

1.都有length属性

2.都可以for循环遍历，有的类数组还可以通过for of遍历

3.类数组不具备数组的原型方法，不可以调用相关数组方法（如，push、slice、concat…）

常见的类数组

1.函数的参数 arguments

2.通过getElementsByTagName,getElementsByClassName,getElementsByName等方法获取的dom列表（也叫HTML Collection）

3.通过querySelectorAll()方法获取的NodeList节点列表

下面，我们来分别看一下这3类类数组

arguments类数组

arguments 是javascript的一个关键字。专指函数的参数集合，它包含了函数的所有参数以及其他属性。它无需定义，可直接在函数体内使用。

function args1(a,b,c){
    console.log(arguments);
    console.log(typeof arguments);//object
    console.log({}.toString.call(arguments));
}
args1('a','b','c');

可以看出，arguments包含所有参数，并且存在length属性，同时可以看出，他的类型是object，并且转换为string后是 object Arguments，代表是Arguments对象。同时，可以看到，他还有一个属性callee，而这个属性的值好像就是我们定义的这个函数体，那么我们输出看一下：

function logargument(){
	console.log(arguments.callee);
}
// logargument();

可以看到，输出的确实是我们函数自己。那既然表示的是自己，请不要随便调用这个属性，因为一旦调用，会不断的调用自己，进入死循环，直到栈溢出。就像下面这样：

function call1239(){
    console.log(123);
    arguments.callee();
}
// call1239();

dom列表（HTML Collection）

这一类是指通过getElementsByTagName、getElementsByClassName、getElementsByName等方法获取的dom列表的集合。

let domList = document.getElementsByTagName("li");
console.log(domList);// HTMLCollection(4) [li, li, li, li]
console.log(typeof domList);//object
console.log({}.toString.call(domList));// [object HTMLCollection]

可以看出，domList也存在length属性。并且，转换为string后是 object HTMLCollection

节点列表

通过 document.querySelectorAll()所获取的节点的集合

let nodeList = document.querySelectorAll("li");
console.log(nodeList);// nodeList(4) [li, li, li, li]
console.log(typeof nodeList);//object
console.log({}.toString.call(nodeList));// [object NodeList]

可以看出，nodeList也存在length属性。并且，转换为string后是 object NodeList。

特点：

类数组都不存在数组的原型方法，但当类数组需要调用数组方法去做任何事情的时候，可以通过以下方法

1.利用 call，apply进行方法借用，借用数组的各自方法

2.将类数组转换为数组，然后再调用数组方法

call，apply进行方法借用

function args(a,b,c){

    Array.prototype.push.call(arguments,"d");
    console.log(arguments);//["a", "b", "c", "d", callee: ƒ, Symbol(Symbol.iterator): ƒ]

    Array.prototype.splice.call(arguments,0,1);
    console.log(arguments);//["b", "c", "d", callee: ƒ, Symbol(Symbol.iterator): ƒ]

    Array.prototype.unshift.call(arguments,[1,2,3]);
    console.log(arguments);//[Array(3), "b", "c", "d", callee: ƒ, Symbol(Symbol.iterator): ƒ]

}
args("a","b","c");

类数组转换为数组

将类数组转成数组后，就可以随意调用各自数组方法，那么类数组如何转换成数组呢！

（1）可借用数组的一些方法生成一个新数组

function args(a,b,c){
    let arr = Array.prototype.slice.call(arguments);
    console.log(arr);//(3) ["a", "b", "c"]
    arr = Array.prototype.concat.apply([],arguments);
    console.log(arr);//["a", "b", "c", callee: ƒ, Symbol(Symbol.iterator): ƒ]
}
args('a','b','c');

（2）利用ES6新增方法转换数组

ES6新增了一个 Array.from 方法，可将类数组转换为数组，还提供了展开运算符，可以直接在一个数组中展开类数组。

function args(a,b,c){
    let arr = Array.from(arguments);
    console.log(arr);// (3) ["a", "b", "c"]
    arr = [...arguments];
    console.log(arr);// (3) ["a", "b", "c"]
}
args('a','b','c');