JS之类数组

这是我参与更文挑战的第26天，活动详情查看： 更文挑战

常见的类数组对象

• 函数的参数对象arguments
• 用getElementsByTagName/ClassName/Name 获得的 HTMLCollection
• 用 querySelector 获得的 NodeList

类数组

arguments

在开发中最常见的就是arguments对象，他的对象只定以在函数体中

function foo(name, age, sex) {
    console.log(arguments);
    console.log(typeof arguments);
    console.log(Object.prototype.toString.call(arguments));
}
foo('An', '22', 'male');

可以看到这样形式的类数组对象就是arguments，typeof显示的是object，Object.prototype.toString.call显示的是arguments而并不是Array,说明类数组对象和数组对象还是有区别的。

细看一下这个类数组arguments，可以看到是有一个length属性，length属性很好理解，就是这个类数组对象的长度。 callee属性是什么呢？打印出来看一下

function foo(name, age, sex) {
    console.log(arguments.callee);
}
foo('An', '22', 'male');

可以看到这个callee就是把这个函数自己。

function foo(name, age, sex) {
    console.log(arguments.callee);
    arguments.callee();
}
foo('An', '22', 'male');

如果这样就会不停地自己调用，最后= = 内存溢出

HTMLCollection

HTMLCollection 简单来说是 HTML DOM 对象的一个接口，这个接口包含了获取到的 DOM 元素集合，返回的类型是类数组对象，如果用 typeof 来判断的话，它返回的是 'object'。它是及时更新的，当文档中的 DOM 变化时，它也会随之变化。 以掘金首页为例子，控制台

elem = document.getElementsByClassName('logo-img')
console.log(elem);
console.log(typeof elem);
console.log(Object.prototype.toString.call(elem))

可以看到是Object类型中的HTMLCollection类型。HTML DOM 中的 HTMLCollection 是即时更新的，当其所包含的文档结构发生改变时，它会自动更新。

NodeList

NodeList 对象是节点的集合，通常是由方法querySelector 返回的。NodeList不是一个数组，也是一种类数组，虽然NodeList不是一个数组，但是可以使用for...of来迭代。 还是掘金首页

list = document.querySelectorAll('img')
for (var img of list) {
  console.log(img)
}
console.log(list);
console.log(typeof list);
console.log(Object.prototype.toString.call(list));

可以看到和上面一样，这个就是Object类型中的NodeList类型。