类数组对象

类数组对象是拥有length属性和索引元素的对象，但它们不具有数组的内置方法。本文将介绍常见的类数组对象（如arguments对象和DOM集合），以及如何将它们转换为真正的数组。

什么是类数组对象

类数组对象（Array-like Objects）是JavaScript中一种特殊的对象，它们：

1. 拥有length属性，表示元素的数量
2. 拥有以0为基础的数字索引属性（如0、1、2等）
3. 不继承自Array.prototype，因此不具有数组的内置方法（如push、pop、forEach等）

类数组对象在形式上类似于数组，但实际上是普通对象，无法直接使用数组的方法。

常见的类数组对象

1. arguments对象

arguments对象是函数中的一个局部变量，它包含了传递给函数的所有参数。

function example() {
  console.log(arguments);
  console.log(arguments.length);  // 参数数量
  console.log(arguments[0]);      // 第一个参数
  console.log(arguments[1]);      // 第二个参数
  
  // 证明arguments不是数组
  console.log(Array.isArray(arguments));  // false
  
  // 尝试使用数组方法会失败
  try {
    arguments.forEach(arg => console.log(arg));
  } catch (e) {
    console.log('错误：', e.message);  // "arguments.forEach is not a function"
  }
}

example('hello', 'world', 123);

注意

在箭头函数中没有arguments对象。如果需要在箭头函数中访问参数列表，应使用剩余参数（rest parameters）语法。

// 箭头函数中没有arguments
const arrowFunc = () => {
  console.log(arguments);  // ReferenceError或指向外部作用域的arguments
};

// 使用剩余参数代替
const betterFunc = (...args) => {
  console.log(args);  // 这是一个真正的数组
};

2. DOM集合

DOM API返回的许多集合都是类数组对象，如：

• HTMLCollection：由getElementsByTagName()、getElementsByClassName()等方法返回
• NodeList：由querySelectorAll()、childNodes属性等返回

// HTMLCollection示例
const divs = document.getElementsByTagName('div');
console.log(divs.length);  // div元素的数量
console.log(divs[0]);      // 第一个div元素
console.log(Array.isArray(divs));  // false

// NodeList示例
const paragraphs = document.querySelectorAll('p');
console.log(paragraphs.length);  // p元素的数量
console.log(paragraphs[0]);      // 第一个p元素
console.log(Array.isArray(paragraphs));  // false

提示

NodeList对象实际上实现了forEach方法，但其他大多数数组方法（如map、filter等）仍然不可用。

// NodeList支持forEach
document.querySelectorAll('p').forEach(p => {
  p.style.color = 'red';
});

// 但不支持map、filter等
try {
  const texts = document.querySelectorAll('p').map(p => p.textContent);
} catch (e) {
  console.log('错误：', e.message);  // "document.querySelectorAll(...).map is not a function"
}

3. 字符串

字符串也可以被视为类数组对象，因为它们有length属性和数字索引：

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

// 但字符串不是数组
console.log(Array.isArray(str));  // false

4. 自定义类数组对象

我们也可以创建自己的类数组对象：

const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

console.log(arrayLike.length);  // 3
console.log(arrayLike[0]);      // 'a'
console.log(Array.isArray(arrayLike));  // false

将类数组对象转换为数组

有多种方法可以将类数组对象转换为真正的数组：

1. Array.from()

ES6引入的Array.from()方法是最直接的方式：

function example() {
  // 将arguments转换为数组
  const args = Array.from(arguments);
  console.log(Array.isArray(args));  // true
  
  // 现在可以使用数组方法了
  args.forEach(arg => console.log(arg));
}

example(1, 2, 3);

// 转换DOM集合
const paragraphs = document.querySelectorAll('p');
const paragraphArray = Array.from(paragraphs);
const contents = paragraphArray.map(p => p.textContent);

// 转换字符串
const chars = Array.from('hello');
console.log(chars);  // ['h', 'e', 'l', 'l', 'o']

// 转换时可以使用映射函数
const numbers = Array.from({ length: 5 }, (_, i) => i * 2);
console.log(numbers);  // [0, 2, 4, 6, 8]

2. 扩展运算符

ES6的扩展运算符（...）也可以将可迭代的类数组对象转换为数组：

function example() {
  // 将arguments转换为数组
  const args = [...arguments];
  console.log(Array.isArray(args));  // true
}

example(1, 2, 3);

// 转换DOM集合
const paragraphs = [...document.querySelectorAll('p')];
const contents = paragraphs.map(p => p.textContent);

// 转换字符串
const chars = [...'hello'];
console.log(chars);  // ['h', 'e', 'l', 'l', 'o']

注意

扩展运算符只能用于可迭代对象（实现了Symbol.iterator的对象）。某些类数组对象（如旧版本浏览器中的HTMLCollection）可能不是可迭代的，这种情况下应使用Array.from()。

3. Array.prototype.slice.call()

在ES6之前，常用的方法是借用数组的slice方法：

function example() {
  // 将arguments转换为数组
  const args = Array.prototype.slice.call(arguments);
  // 或使用简写形式
  // const args = [].slice.call(arguments);
  console.log(Array.isArray(args));  // true
}

example(1, 2, 3);

// 转换DOM集合
const paragraphs = Array.prototype.slice.call(document.querySelectorAll('p'));

类数组对象与数组的区别

了解类数组对象与真正数组的区别很重要：

1. 原型链不同：

   • 数组继承自Array.prototype
   • 类数组对象继承自Object.prototype

2. 可用方法不同：

   • 数组可以使用所有数组方法（push、pop、map等）
   • 类数组对象不能直接使用这些方法

3. 行为差异：

   • 修改数组长度会影响数组内容
   • 修改类数组对象的length属性通常不会影响其内容

// 数组长度与内容的关系
const arr = [1, 2, 3];
arr.length = 2;
console.log(arr);  // [1, 2] - 最后一个元素被删除

// 类数组对象长度与内容的关系
const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};
arrayLike.length = 2;
console.log(arrayLike[2]);  // 'c' - 元素仍然存在

在类数组对象上使用数组方法

除了将类数组对象转换为数组外，还可以直接在类数组对象上借用数组方法：

function example() {
  // 在arguments上使用forEach方法
  Array.prototype.forEach.call(arguments, (arg, index) => {
    console.log(`参数${index}: ${arg}`);
  });
  
  // 使用map方法
  const doubled = Array.prototype.map.call(arguments, x => x * 2);
  console.log(doubled);
}

example(1, 2, 3);

// 在DOM集合上使用filter
const divs = document.getElementsByTagName('div');
const visibleDivs = Array.prototype.filter.call(divs, div => {
  return div.style.display !== 'none';
});

实际应用场景

类数组对象在实际开发中的应用场景：

1. 处理函数参数

function logArguments() {
  // 转换arguments为数组并使用数组方法
  const args = Array.from(arguments);
  const types = args.map(arg => typeof arg);
  console.log('参数类型:', types);
}

// 或使用剩余参数（更现代的方式）
function betterLogArguments(...args) {
  const types = args.map(arg => typeof arg);
  console.log('参数类型:', types);
}

2. 处理DOM元素集合

// 为所有段落添加类
Array.from(document.querySelectorAll('p'))
  .forEach(p => p.classList.add('highlight'));

// 获取所有可见按钮的文本
const buttonTexts = Array.from(document.querySelectorAll('button'))
  .filter(button => button.style.display !== 'none')
  .map(button => button.textContent);

3. 实现类数组对象的迭代

const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3,
  // 使对象可迭代
  [Symbol.iterator]: function* () {
    for (let i = 0; i < this.length; i++) {
      yield this[i];
    }
  }
};

// 现在可以使用for...of循环
for (const item of arrayLike) {
  console.log(item);  // 'a', 'b', 'c'
}

// 也可以使用扩展运算符
const array = [...arrayLike];
console.log(array);  // ['a', 'b', 'c']

总结

类数组对象是JavaScript中的一个重要概念，了解它们的特性和转换方法可以帮助我们更有效地处理函数参数和DOM集合等常见场景。

主要要点：

1. 类数组对象有length属性和数字索引，但不是真正的数组
2. 常见的类数组对象包括arguments对象、DOM集合和字符串
3. 可以使用Array.from()、扩展运算符或Array.prototype.slice.call()将类数组对象转换为数组
4. 也可以通过Array.prototype.method.call()在类数组对象上直接使用数组方法
5. 在现代JavaScript中，可以使用剩余参数（...args）代替arguments对象

通过掌握这些知识，我们可以更灵活地处理各种类数组对象，编写更简洁、更高效的代码。