JavaScript类数组的深入理解

JavaScript中的类数组是一个类似数组但却不是真正的数组的对象。它们通常具有length属性和对应的数字键，但是缺少了一些数组原型方法。JavaScript中的类数组包括函数中的arguments对象、HTMLCollection对象和NodeList对象等。

类数组的常用方法

转换为真正的数组

由于类数组不是真正的数组，因此它们不能使用数组的方法。为了解决这个问题，我们可以通过以下两种方式将类数组转换为真正的数组。

1. 使用数组的原型方法slice()或Array.from()

//使用slice()方法
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arr = Array.prototype.slice.call(arrayLike); // ['a', 'b', 'c']

//使用Array.from()方法
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arr = Array.from(arrayLike); // ['a', 'b', 'c']

2. 使用ES6的展开运算符

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arr = [...arrayLike]; // ['a', 'b', 'c']

类数组对象的遍历

for循环

我们可以使用for循环遍历类数组对象，例如：

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

for (let i = 0; i < arrayLike.length; i++) {
  console.log(arrayLike[i]);
}
// 输出 'a', 'b', 'c'

forEach()方法

如果你不喜欢使用for循环，你还可以使用数组的原型方法forEach()，能够以简洁的方式迭代类数组对象的内容。

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
Array.prototype.forEach.call(arrayLike, item => console.log(item));
// 输出 'a', 'b', 'c'

类数组中的注意点

类数组并不具备数组所有原型方法

尽管类数组看起来很像数组，但是类数组并不具备数组的所有原型方法。例如，push()、pop()、shift()、unshift()等方法在类数组中是没有定义的。

然而，类数组中的一些方法和数组的方法是相同的，例如slice()、concat()等。在使用它们的时候，需要注意它们是否适用于类数组。

类数组具有类似数组的特点

与数组相比，类数组具有一些类似的特点。例如，它们都具有length属性，也可以像数组一样使用索引来访问元素。

示例说明

示例1

问题描述

我们创建了一个函数，将传入它的参数转换成一个数组，但我们希望出于某种原因在稍后的代码中使用类数组对象。该怎么做呢？

解决方案

可以使用如下的方法将数组转换为类数组对象：

const arr = [1, 2, 3, 4, 5];
const arrayLike = { ...arr, length: arr.length };

console.log(arrayLike[0]); // 1
console.log(arrayLike.length); // 5

示例2

问题描述

我们需要遍历一个HTMLCollection对象，并检查每个元素是否含有指定的类名，如果有，将其从文档中移除。该怎么实现呢？

解决方案

我们可以使用for循环来遍历类数组对象:

const elements = document.getElementsByClassName('my-class');
for (let i = 0; i < elements.length; i++) {
  if (elements[i].classList.contains('target-class')) {
    elements[i].parentNode.removeChild(elements[i]);
  }
}

或者使用forEach()方法简洁地完成相同的任务：

const elements = document.getElementsByClassName('my-class');
Array.prototype.forEach.call(elements, el => {
  if (el.classList.contains('target-class')) {
    el.parentNode.removeChild(el);
  }
});