在 JavaScript 中，有些对象看起来像是数组，但实际上并不具有完整的数组功能，这就是所谓的类数组对象。本文将介绍类数组对象的定义、常见特征和如何将其转换为真正的数组。
定义
类数组对象是指一个拥有 length 属性且属性名为非负整数的普通对象。这样的对象经常出现在 DOM 操作中，比如通过 document.querySelectorAll() 返回的 NodeList 对象以及表单元素的 form.elements 属性返回的 HTMLCollection 对象等。
const nodeList = document.querySelectorAll('div'); // NodeList
console.log(nodeList.length); // 4
const formElements = document.forms[0].elements; // HTMLCollection
console.log(formElements.length); // 3特征
虽然类数组对象看起来像是数组，但它们与真正的数组还是有一些区别的，比如：
- 类数组对象没有数组原型链上的方法，如
push()、pop()等； - 类数组对象不能使用数组语法访问元素，如
arr[0]； - 类数组对象可以被遍历，但需要使用
for...of或Array.from()转换后再使用forEach()、map()等数组方法。
-- -------------------- ---- ------- ----- -------- - --------------------------------- -- -------------- -- ------------------------- -- --------- -- -- -------- ------- --- ------ ---- -- --------- - -------------------------- - -- -- ------------ ------------------ ----------------------------------- ------ -- - ------------------ -------------- ---
转换为数组
如果我们想要对类数组对象使用数组原型链上的方法，或者使用数组语法访问元素，就需要将其转换为真正的数组。有多种方式可以实现类数组对象转换为数组，下面是一些常见的方法。
1. Array.from()
Array.from() 可以将一个可迭代对象或类数组对象转换为数组。它接受两个参数：第一个参数是要转换的对象，第二个参数是一个可选回调函数，用于在转换过程中对每个元素进行处理。
const nodeList = document.querySelectorAll('div');
// 使用 Array.from() 将 NodeList 转换为数组
const arr = Array.from(nodeList);
console.log(Array.isArray(arr)); // true2. Spread Operator
ES6 中的扩展运算符（Spread Operator）也可以将类数组对象转换为数组。
const nodeList = document.querySelectorAll('div');
// 使用扩展运算符将 NodeList 转换为数组
const arr = [...nodeList];
console.log(Array.isArray(arr)); // true3. Array.prototype.slice.call()
Array.prototype.slice.call() 方法可以在类数组对象上调用 Array.prototype.slice 方法，并将结果返回为一个新数组，从而实现将类数组对象转换为数组。
const nodeList = document.querySelectorAll('div');
// 使用 slice.call() 将 NodeList 转换为数组
const arr = Array.prototype.slice.call(nodeList);
console.log(Array.isArray(arr)); // true结语
了解和掌握类数组对象的特征和转换方法，在前端开发中是非常重要的一部分。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28642