洞悉JS类数组，点亮程序新视界！

前端

2023-12-14 20:58:51

探索JS类数组：似是而非的亲密关系

在JavaScript中，类数组与数组一样，都可以存储一组数据。但它们之间存在着微妙的差异，细微之处蕴藏着独特的特性和用法。

类数组与数组的相似之处在于，它们都具有length属性，表示元素的个数。类数组的元素也可以通过下标访问。然而，类数组并不是真正的数组，因此它们不支持数组的所有方法，如数组排序、反转等。

类数组的用途和常见类型

类数组在实际开发中扮演着重要的角色，常用于各种场景。常见的类数组类型包括：

字符串
函数参数对象（arguments）
NodeList
HTMLCollection

类数组的操作与遍历：解锁灵活处理之道

尽管类数组不具备数组的所有方法，但我们依然可以通过特定的技巧来操作和遍历它们。

转换：我们可以使用Array.from()方法将类数组转换为真正的数组。
遍历：除了下标访问外，类数组还可以使用for...of循环进行遍历。
查找：indexOf()和lastIndexOf()方法可用于在类数组中查找元素的索引。

类数组索引的奥妙：细微之处见真章

类数组的索引方式与数组略有不同，需要注意以下几点：

类数组的索引是从0开始的，与数组相同。
类数组的索引可以是整数或字符串。
类数组的索引可以是负数，从末尾开始计数。

类数组的应用实例：代码实践中的灵活运用

为了更好地理解类数组，让我们通过一些代码实践来加深印象。

// 字符串作为类数组
const str = "Hello World";
console.log(str[0]); // 输出："H"

// 函数参数对象作为类数组
function sum(...args) {
  let total = 0;
  for (let i = 0; i < args.length; i++) {
    total += args[i];
  }
  return total;
}

console.log(sum(1, 2, 3)); // 输出：6

// NodeList作为类数组
const elements = document.querySelectorAll("li");
elements.forEach((element) => {
  console.log(element.textContent);
});

// HTMLCollection作为类数组
const inputs = document.getElementsByTagName("input");
for (let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("change", () => {
    console.log("Input value changed!");
  });
}