类数组对象

在 JavaScript 中，类数组对象是一种常见的结构，它看起来像数组，但并非真正的数组。这类对象通常具有数字索引和 length 属性，但缺少数组的原生方法。理解类数组对象的特性和转换方式，能更灵活地处理数据。

什么是类数组对象

类数组对象（Array-like Object）是指具有以下特征的对象：

1. 拥有从 0 开始的数字索引；
2. 具备 length 属性；
3. 不继承自 Array.prototype，因此无法直接调用数组方法（如 push、pop 等）。

典型的类数组对象包括：

• 函数的 arguments 对象；
• DOM 操作返回的 NodeList（如 document.querySelectorAll 的结果）；
• 字符串（每个字符可通过索引访问）。

// 示例：arguments 对象
function showArgs() {
  console.log(arguments); // 类数组对象
  console.log(arguments.length); // 3
  console.log(arguments[0]); // 'a'
}
showArgs('a', 'b', 'c');

类数组对象的常见场景

函数的 arguments 对象

在非箭头函数中，arguments 是一个自动生成的类数组对象，存储了函数调用时传入的所有参数。尽管现代 JavaScript 推荐使用剩余参数（...args），但 arguments 仍存在于旧代码中。

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}
console.log(sum(1, 2, 3)); // 6

DOM 操作的 NodeList

通过 document.querySelectorAll 或 element.childNodes 获取的 NodeList 也是类数组对象。它支持 forEach（部分环境），但缺乏 map、filter 等数组方法。

const buttons = document.querySelectorAll('button');
console.log(buttons[0]); // 第一个按钮元素
console.log(buttons.length); // 按钮数量

字符串的字符访问

字符串可以通过索引访问单个字符，但它是不可变的类数组对象。

const str = 'hello';
console.log(str[1]); // 'e'
console.log(str.length); // 5

如何将类数组对象转为真实数组

由于类数组对象无法直接使用数组方法，通常需要先将其转换为真实数组。以下是几种常见方法：

使用 Array.from()

Array.from() 是 ES6 提供的最简单方式，支持类数组对象或可迭代对象。

function convertToArray() {
  const argsArray = Array.from(arguments);
  console.log(argsArray.map(x => x * 2)); // [2, 4, 6]
}
convertToArray(1, 2, 3);

使用扩展运算符（...）

扩展运算符可以将可迭代的类数组对象展开为数组。

const nodeList = document.querySelectorAll('div');
const divArray = [...nodeList]; // 转为真实数组
divArray.forEach(div => console.log(div));

使用 Array.prototype.slice.call()

在 ES6 之前，常用 slice 方法结合 call 或 apply 实现转换。

function oldSchoolConvert() {
  const argsArray = Array.prototype.slice.call(arguments);
  console.log(argsArray.join('-')); // 'a-b-c'
}
oldSchoolConvert('a', 'b', 'c');

类数组对象的自定义实现

可以通过定义索引和 length 属性，手动创建类数组对象。

const arrayLike = {
  0: 'apple',
  1: 'banana',
  2: 'cherry',
  length: 3
};

// 转为数组
const fruits = Array.from(arrayLike);
console.log(fruits); // ['apple', 'banana', 'cherry']

类数组对象的局限性

虽然类数组对象可以模拟数组的部分行为，但存在以下限制：

1. 无法直接调用数组方法（如 push、splice）；
2. 某些操作（如 for...of 遍历）需要对象实现迭代器协议；
3. 性能可能低于原生数组。

const arrayLike = { 0: 'a', 1: 'b', length: 2 };
arrayLike.push('c'); // TypeError: arrayLike.push is not a function

实际应用中的技巧

借用数组方法

通过 call 或 apply 可以临时借用数组方法处理类数组对象。

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

检测类数组对象

可以通过检查对象的 length 属性（类型为 number）和索引是否存在来判断是否为类数组对象。

function isArrayLike(obj) {
  return obj != null 
    && typeof obj.length === 'number' 
    && obj.length >= 0 
    && (obj.length === 0 || (obj.length > 0 && (obj.length - 1) in obj));
}

console.log(isArrayLike({ 0: 'a', length: 1 })); // true
console.log(isArrayLike([])); // true（数组也是类数组对象）