JavaScript中类数组对象及其与数组的关系

JavaScript中类数组对象及其与数组的关系

1. 什么是类数组对象？

类数组对象是指那些具有 length 属性且可以通过非负整数索引访问元素的对象。虽然这些对象看起来像数组，但它们并不具备真正数组的所有特性，例如没有继承 Array.prototype 上的方法。类数组对象与普通对象的最大区别在于，它们通过数字索引来访问元素，并且有一个 length 属性。

2. 类数组对象与数组的主要区别

• length 属性： 类数组对象有一个 length 属性，这个属性可以像数组一样用于记录对象中元素的数量，并在新元素加入时自动更新。此外，如果将 length 设置为更小的值，会将类数组对象的“超出”部分截断。
• 方法继承： 数组从 Array.prototype 继承了许多有用的方法，例如 push()、pop()、slice() 等。类数组对象虽然有 length 属性和数值索引，但它们并不直接继承这些方法。
• Array.isArray() 方法： 用来判断一个对象是否为数组。对于真正的数组，Array.isArray() 会返回 true，而对于类数组对象，则返回 false。

3. 类数组对象的实际用途

类数组对象常见于一些原生 JavaScript API 中，尤其是在操作 DOM（文档对象模型）时。例如，方法 document.querySelectorAll() 返回的就是一个类数组对象，而不是一个真正的数组。类数组对象看起来与数组相似，但无法直接使用数组的方法。

因此，虽然类数组对象无法直接调用数组方法，但它们的结构足够使得我们可以用类似数组的方式对其进行遍历和处理。

4. 如何操作类数组对象？

类数组对象不能直接调用数组方法，因为它们并没有继承 Array.prototype。但是，JavaScript 提供了几种方法来将类数组对象转化为真正的数组，从而可以使用数组的方法。

4.1 使用 Function.call() 或 Function.apply() 调用数组方法

类数组对象无法直接调用数组的方法，但是我们可以通过 Function.call() 或 apply() 来模拟数组方法的调用。例如，使用 Array.prototype.slice.call() 将类数组对象转换为一个真正的数组对象。

function testArrayLike(obj) {return typeof obj.length === 'number' && obj.length >= 0 &&(obj.length === 0 || (obj.length - 1) in obj);
}let pseudoArray = {0: 'a',1: 'b',2: 'c',length: 3
};console.log(testArrayLike(pseudoArray));  // 输出 true// 使用 slice 方法将类数组对象转换为真正的数组
let arr = Array.prototype.slice.call(pseudoArray);
console.log(arr);  // ["a", "b", "c"]

4.2 使用 Array.from() 转换类数组对象

ES6 引入了 Array.from() 方法，它可以将类数组对象转换为真正的数组。Array.from() 既支持类数组对象，也支持可迭代对象，并且还允许传入一个映射函数对元素进行转换。

let pseudoArray = {0: 'a',1: 'b',2: 'c',length: 3
};// 使用 Array.from() 转换为真正的数组
let arr = Array.from(pseudoArray);
console.log(arr);  // ["a", "b", "c"]

Array.from() 方法的一个重要特点是，它不仅能将类数组对象转换为数组，还可以传入一个映射函数来对数组的每个元素进行处理。例如：

let arr = Array.from(pseudoArray, x => x.toUpperCase());
console.log(arr);  // ["A", "B", "C"]

5. 类数组对象的实际示例

在客户端 JavaScript 中，许多与 HTML 文档交互的 API 方法都会返回类数组对象。例如：

• document.querySelectorAll() 返回一个类数组对象，表示匹配指定选择器的所有元素。
• NodeList 和 HTMLCollection 都是类数组对象，它们有 length 属性，并且可以通过数字索引访问元素。

let nodeList = document.querySelectorAll('div');
console.log(nodeList);  // 类数组对象
console.log(nodeList.length);  // 可以获取到 length
console.log(nodeList[0]);  // 可以通过索引访问元素

6. 类数组对象与字符串的关系

JavaScript 中的字符串也表现得像一个类数组对象。每个字符都可以通过数字索引访问，而且字符串有 length 属性。然而，字符串与数组不同，它是不可变的，因此不能直接修改其中的元素。

对于字符串来说，虽然它看起来像一个数组，但通常应该将其当作字符串来处理，而不是数组。比如，尽管字符串可以用类似数组的方式访问单个字符，但操作字符串时，最好使用字符串的内置方法（如 slice()、substring()、charAt() 等）而非数组方法。

总结

• 类数组对象：具有 length 属性和通过数字索引访问元素的特性，但它们并不直接继承 Array.prototype 上的方法。
• 转换为数组：可以通过 Array.from() 或 Function.call() 将类数组对象转换为真正的数组，从而可以使用数组的各种方法。
• 实际应用：类数组对象在 DOM 操作中非常常见，比如 NodeList 和 HTMLCollection，这些类数组对象是由浏览器返回的，因此我们可以利用 JavaScript 数组的能力来操作这些对象。

通过理解类数组对象的特性和如何将其转换为数组，可以在处理 JavaScript 中的复杂数据结构时更加得心应手。