javascript类数组

#前言

在JavaScript开发中，我们经常会遇到一些看起来像数组，但实际上并不是真正数组的对象，这些对象被称为 “类数组对象（Array-like Objects）”。

#一、什么是类数组对象？

类数组对象是指那些具有以下特征的对象：

• 1. 拥有 length 属性，表示元素的数量

  2. 拥有索引元素（0, 1, 2…），可以通过索引访问

  3. 不具备数组原型上的方法（如 push, pop, forEach 等）

简单来说，类数组对象"看起来像"数组，但它们并不是从 Array 构造函数创建的实例，因此不能直接使用数组的方法。

#二、常见的类数组对象

在JavaScript中，最常见的类数组对象包括：

#1. DOM集合

DOM API返回的元素集合通常是类数组对象，例如：

复制const divs = document.getElementsByTagName('div');
const paragraphs = document.querySelectorAll('p');

console.log(divs.length); 
console.log(Array.isArray(divs)); 

#2. 函数中的arguments对象

函数内部可以通过 arguments 对象访问所有传入的参数，它是一个类数组对象：

复制function example() {
  console.log(arguments.length); 
  console.log(arguments[0]);     
  console.log(arguments[1]);     
  
  
  
  
  console.log(Array.isArray(arguments)); 
}

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

#3. 字符串

字符串在某种程度上也可以被视为类数组对象，因为它们有length属性，并且可以通过索引访问字符：

复制const str = "Hello";
console.log(str.length); 
console.log(str[0]);     
console.log(str[1]);     


console.log(Array.isArray(str)); 

#三、类数组对象与真正数组的区别

类数组对象与真正的数组有以下关键区别：

• 1. 原型链不同：类数组对象不继承自 Array.prototype，因此没有数组的内置方法

  2. 构造函数不同：类数组对象不是由 Array() 构造函数创建的

  3. 行为差异：某些操作在类数组对象上的表现可能与数组不同

#四、如何将类数组对象转换为真正的数组

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

#1. Array.from()

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

复制function example() {
  const args = Array.from(arguments);
  
  args.forEach(arg => console.log(arg)); 
}


const divs = document.getElementsByTagName('div');
const divsArray = Array.from(divs);
divsArray.forEach(div => console.log(div)); 

#2. 扩展运算符（Spread Operator）

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

复制function example() {
  const args = [...arguments];
  
}

const paragraphs = document.querySelectorAll('p');
const paragraphsArray = [...paragraphs];

#3. Array.prototype.slice.call()

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

复制function example() {
  const args = Array.prototype.slice.call(arguments);
  
  
}

const divs = document.getElementsByTagName('div');
const divsArray = Array.prototype.slice.call(divs);

#五、自定义类数组对象

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

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


const realArray = Array.from(myArrayLike);
console.log(realArray); 

#六、在类数组对象上使用数组方法

虽然类数组对象不直接拥有数组方法，但我们可以通过函数的call或apply方法来借用数组的方法。（这种方法借用机制我在《少写重复代码的精髓：JS方法借用》这篇文章中进行了介绍，可以补补课）

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


const joined = Array.prototype.join.call(arrayLike, '-');
console.log(joined); 


const mapped = Array.prototype.map.call(arrayLike, item => item.toUpperCase());
console.log(mapped); 


const filtered = Array.prototype.filter.call(arrayLike, item => item !== 'b');
console.log(filtered); 

#七、类数组对象的实际应用场景

#1. 函数参数处理

复制function sum() {
  
  return Array.from(arguments).reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); 

#2. DOM操作批处理

复制const paragraphs = document.querySelectorAll('p');
Array.from(paragraphs).forEach(p => p.classList.add('highlight'));


Array.prototype.forEach.call(paragraphs, p => p.classList.add('highlight'));

#3. 字符串操作

复制const str = "hello";

const chars = Array.from(str).map(char => char.toUpperCase());
console.log(chars.join('')); 

#类数组对象的性能考虑

在处理大量元素时，类数组对象与真正的数组可能有性能差异：

• 1. 原生数组方法通常针对数组进行了优化

  2. 将类数组对象转换为数组会产生额外的内存和计算开销

  3. 在某些情况下，直接在类数组对象上使用借用的数组方法可能比先转换再操作更高效

#八、ES6+中的替代方案

随着JavaScript的发展，一些类数组对象的使用场景已经有了更好的替代方案：

• 1. arguments对象 → 使用剩余参数（Rest Parameters）

     复制// 旧方式
     function oldWay() {
       const args = Array.from(arguments);
       // ...
     }
     
     // 新方式
     function newWay(...args) {
       // args已经是数组
       // ...
     }
     

      

  2. DOM集合 → 使用Array方法或迭代器

     复制// 现代浏览器中的NodeList已经实现了forEach方法
     document.querySelectorAll('div').forEach(div => {
       // 处理每个div
     });