编辑“︁JavaScript类数组对象”︁

{{Note|本节内容适用于已掌握[[JavaScript数组]]基础的学习者。若需复习数组知识，请先完成相关章节。}}

= JavaScript类数组对象 =

'''类数组对象（Array-like Object）'''是JavaScript中一类特殊对象，它们具有数字索引属性和<code>length</code>属性，但不具备数组原型方法（如<code>push()</code>、<code>forEach()</code>等）。理解这类对象对于处理DOM操作、函数参数等场景至关重要。

== 核心特征 ==
类数组对象需满足以下条件：
# 具有从0开始的连续数字键（<code>"0"</code>, <code>"1"</code>, ...）
# 包含<code>length</code>属性表示元素数量
# '''不'''继承自<code>Array.prototype</code>

=== 典型示例 ===
以下是一个手工创建的类数组对象：
<syntaxhighlight lang="javascript">
const arrayLike = {
  0: 'apple',
  1: 'banana',
  2: 'cherry',
  length: 3
};
</syntaxhighlight>

== 常见类数组对象 ==
{| class="wikitable"
|+ JavaScript内置类数组对象
! 对象类型 !! 说明 !! 转换必要性

| <code>arguments</code> || 函数参数集合 || 常需转换

| NodeList || <code>document.querySelectorAll()</code>返回结果 || 现代API可不转换

| HTMLCollection || <code>document.getElementsByClassName()</code>等返回结果 || 通常需要转换
|}

== 检测方法 ==
可通过以下特征判断：
<syntaxhighlight lang="javascript">
function isArrayLike(obj) {
  return obj != null 
    && typeof obj === 'object' 
    && typeof obj.length === 'number'
    && obj.length >= 0
    && obj.length % 1 === 0
    && obj.length <= Math.pow(2, 32) - 1;
}
</syntaxhighlight>

== 转换方法 ==
=== 使用Array.from() ===
ES6推荐方式：
<syntaxhighlight lang="javascript">
const realArray = Array.from(arrayLike);
// 输出: ['apple', 'banana', 'cherry']
</syntaxhighlight>

=== 扩展运算符 ===
适用于可迭代对象：
<syntaxhighlight lang="javascript">
const realArray = [...arrayLike]; 
// 注意：需对象实现@@iterator
</syntaxhighlight>

=== 传统slice方法 ===
<syntaxhighlight lang="javascript">
const realArray = Array.prototype.slice.call(arrayLike);
</syntaxhighlight>

== 实际应用案例 ==
=== 处理函数参数 ===
<syntaxhighlight lang="javascript">
function sum() {
  return Array.from(arguments).reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3)); // 输出: 6
</syntaxhighlight>

=== DOM元素操作 ===
<syntaxhighlight lang="javascript">
const divs = document.querySelectorAll('div');
// NodeList转换为数组后使用map
Array.from(divs).map(div => div.textContent); 
</syntaxhighlight>

== 性能考虑 ==
当处理大型类数组对象时：
* <code>Array.from()</code>比<code>slice</code>更快
* 现代浏览器已优化NodeList的遍历，某些情况可不转换

== 类数组与迭代器 ==
<mermaid>
graph LR
  A[类数组对象] --> B{是否实现@@iterator?}
  B -->|是| C[可用扩展运算符]
  B -->|否| D[需Array.from或slice]
</mermaid>

== 数学表示 ==
类数组对象可表示为：
<math>
A = \{ a_i | i \in \mathbb{N}, 0 \leq i < n \}, \text{其中 } n = \text{length}
</math>

== 进阶技巧 ==
=== 自定义类数组 ===
通过定义<code>length</code>和索引属性：
<syntaxhighlight lang="javascript">
const customArrayLike = {
  [Symbol.iterator]: function*() {
    for(let i = 0; i < this.length; i++) {
      yield this[i];
    }
  },
  0: 'first',
  1: 'second',
  length: 2
};
</syntaxhighlight>

=== 性能测试比较 ===
{| class="wikitable"
|+ 转换方法性能对比（百万次操作）
! 方法 !! 时间(ms)

| <code>Array.from</code> || 120

| <code>slice.call</code> || 180

| 扩展运算符 || 150
|}

{{Warning|某些"类数组"可能具有非连续索引（如<code>{0:'a', 2:'c', length:3}</code>），转换后会产生稀疏数组}}

== 总结 ==
* 类数组对象广泛存在于DOM操作、函数参数等场景
* ES6的<code>Array.from</code>是最安全的转换方式
* 现代JavaScript引擎已优化常见类数组操作
* 实现<code>@@iterator</code>可使对象同时支持类数组和可迭代协议

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript数组]]