深挖ArrayLike(类数组)，五分钟让你彻底搞懂！

2023-12-11 00:51:53

在Javascript中，你一定听说过数组（Array）这种数据结构，它是一种有序的元素集合，元素可以通过索引访问。但你知道吗？除了数组，Javascript还提供了一类叫做ArrayLike（类数组）的对象，它们具有类似于数组的特性，但并非真正的数组。那么，ArrayLike究竟是什么？它与数组有什么区别？本文将深入浅出地为你解答这些问题，并提供丰富的示例，帮助你快速掌握ArrayLike，提升编码效率。

ArrayLike简介

ArrayLike，顾名思义，是指那些类似于数组，但又不是真正数组的对象。它们通常具有以下共同特征：

拥有length属性，该属性表示对象中元素的数量。
支持使用方括号访问元素，即obj[index]。
可以使用forEach、map、filter等数组方法来处理元素。

常见的ArrayLike对象包括：

Arguments对象：Arguments对象是函数的参数列表，它类似于数组，但并不是真正的数组。
NodeList对象：NodeList对象是DOM元素的集合，它也具有类似于数组的特性。
HTMLCollection对象：HTMLCollection对象是HTML元素的集合，它也具有类似于数组的特性。

ArrayLike与数组的区别

尽管ArrayLike与数组具有相似之处，但它们之间也存在一些关键区别：

ArrayLike对象不是真正的数组，它们没有数组的所有方法和属性。
ArrayLike对象不能直接使用数组的构造函数创建，而是通过其他方式生成。
ArrayLike对象不能使用数组的某些方法，例如push、pop、shift、unshift等。
ArrayLike对象不能使用数组的某些属性，例如length、sort等。

ArrayLike的使用场景

ArrayLike对象在Javascript中有着广泛的应用，以下是一些常见的场景：

作为函数的参数：ArrayLike对象可以作为函数的参数，以便函数可以处理集合中的元素。例如：

function sum(arrayLike) {
  let sum = 0;
  for (let i = 0; i < arrayLike.length; i++) {
    sum += arrayLike[i];
  }
  return sum;
}

const args = [1, 2, 3, 4, 5];
const result = sum(args);
console.log(result); // 15

作为数组的替代：在某些情况下，ArrayLike对象可以作为数组的替代，以简化代码或提高性能。例如：

// 使用ArrayLike对象代替数组
const nodeList = document.querySelectorAll('li');
nodeList.forEach((li) => {
  li.style.color = 'red';
});

// 使用数组
const liArray = Array.from(nodeList);
liArray.forEach((li) => {
  li.style.color = 'red';
});

在上面的示例中，我们使用NodeList对象（ArrayLike对象）代替了数组（Array）来操作DOM元素。这简化了代码，并避免了额外的数组转换。

结论

ArrayLike对象是Javascript中一种重要的数据结构，它具有类似于数组的特性，但并非真正的数组。ArrayLike对象在Javascript中有着广泛的应用，可以作为函数的参数、作为数组的替代等。理解ArrayLike对象及其与数组的区别，可以帮助你更好地掌握Javascript，并写出更简洁、高效的代码。