神奇的转变：优雅的处理 JavaScript 类数组对象的技巧

一. 引言

在 JavaScript 编程中，咱们常常遇到类数组目标，它们拥有相似数组的结构和行为，但却不具有真实的数组办法和特点。常见的类数组目标包含 DOM 调集、函数的 arguments 目标和字符串等。假如咱们想对这些类数组目标进行操作和处理，咱们需求掌握一些高雅的技巧。

处理类数组目标的见办法有循环迭代、转换为数组、运用数组办法、运用 Array.prototype 办法、运用解构赋值以及其他一些殊状况的处理。本篇文章中，咱们将介绍这些办法，并给出一些实用的示例。

经过高雅地处理类数组目标，咱们能够愈加灵敏地操作和处理数据，从而进步开发效率和代码质量。无论是处理 DOM 元素、函数参数还是字符串，了解这些高雅的技巧都能让咱们更挥洒自如。

接下来让咱们一起来知道如何高雅地处理类数组目标，完成 JavaScript 奇特的改变！

二. 了解类数组目标

1. 什么是类数组目标

类数组目标是指在 JavaScript 中具有相似数组的特点，但并非真实的数组。它们与数组相似，能够经过索引拜访元素，而且具有length特点来表明元素的个数。但与真实的数组不同，类数组目标不具有数组原型链上的办法和特点。

例如：

const obj = {
  0: "apple",
  1: "banana",
  2: "orange",
  length: 3,
};
console.log(obj.length); // 输出: 3

2. 常见的类数组目标

（1）arguments目标：在函数内部可用的特殊目标，存储了函数参数的类数组目标。

function sum() {
  console.log(arguments);
}
sum(1, 2, 3); // Arguments(3) [1,2, 3, callee: f, Symbol(Symbol.iterator): f]

（2）NodeList目标：DOM 元素的调集，经过像document.querySelectorAll()办法获取

<ul id="list" style="width: 100px; margin: 0; float: left">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
<script>
  const paragraphs = document.querySelectorAll("li");
  console.log(paragraphs.length); // 输出: 指定挑选器的li元素个数
  console.log(paragraphs); // 输出: 指定挑选器的li元素
  console.log(paragraphs[0]); // 输出: 第一个li元素
</script>

（3）HTMLCollection目标：表明一组 DOM 元素的调集，例如经过相似getElementsByClassName、getElementsByTagName等办法获取的元素调集。

<button class="btn">第一个按钮</button>
<button class="btn">第二个按钮</button>
<script>
  const buttons = document.getElementsByClassName("btn");
  console.log(buttons.length); // 输出: 指定类名的按钮元素个数
  console.log(buttons); // 输出: 指定类名的按钮元素
  console.log(buttons[0]); // 输出: 指定索引的按钮元素
</script>

（4）TypedArray目标：表明必定长度的二进制数据缓冲区的类数组目标，例如Int8Array、Uint8Array等。

const buffer = new ArrayBuffer(8); // 创建一个8字节的缓冲区
const intArray = new Int32Array(buffer); // 运用Int32Array视图包装缓冲区
console.log(intArray);
console.log(intArray[0]); // 输出: 0
intArray[0] = 42;
console.log(intArray);
console.log(intArray[0]); // 输出: 42

（5）FileList：表明一组文件的调集，一般来自于文件上传 input 元素

<input type="file" multiple="true" />
<script>
  window.onload = function (event) {
    init();
  };
  function init() {
    const fileInput = document.querySelector('input[type="file"]');
    fileInput.onchange = onFileChange;
  }
  function onFileChange(event) {
    const files = event.target.files;
    console.log(files.length); // 输出: 挑选的文件数量
    console.log(files); // 输出: 一切文件目标
    console.log(files[0]); // 输出: 第一个文件目标
  }
</script>

这些类数组目标都能够经过索引拜访元素，而且具有length特点，但不具有数组原型链上的办法和特点。假如需求运用数组的办法和特点，能够将类数组目标转换为真实的数组，例如经过Array.from、Array.prototype.slice.call、Array.prototype.concat等办法。

三. 类数组目标的特性

这些特性使得类数组目标在某些场景下十分有用，例如处理函数参数（arguments目标），DOM 操作中获取的元素调集（HTMLCollection目标和NodeList目标）等。

1. 索引拜访和写入

类数组目标能够经过索引拜访元素，读取或许写入数据。能够运用中括号（[]）操作符来读写类数组目标中的元素。

示例代码：

const obj = {
  0: "apple",
  1: "banana",
  2: "orange",
  length: 3,
};
console.log(obj[0]); // 输出: "apple"
console.log(obj[1]); // 输出: "banana"
obj[2] = "grape";
console.log(obj[2]); // 输出: "grape"

2. 长度特点

类数组目标具有length特点，用于表明目标中元素的个数。能够经过拜访length特点来获取类数组目标中元素的数量。

示例代码：

const obj = {
  0: "apple",
  1: "banana",
  2: "orange",
  length: 3,
};
console.log(obj.length); // 输出: 3

3. 迭代类数组目标

类数组目标能够运用迭代办法进行遍历操作，能够运用for循环对其进行迭代操作。或许经过一些办法先将其转换成数组，在对其进行迭代也是能够的！

示例代码：

const obj = {
  0: "apple",
  1: "banana",
  2: "orange",
  length: 3,
};
for (let index = 0; index < obj.length; index  ) {
  const element = obj[index];
  console.log(element);
}

运用 for 循环迭代类数组的输收支下图所示：

留意：经过迭代办法进行遍历操作时，最好先将类数组目标转换为真实的数组，以避免出现一些问题。

四. 类数组目标 VS 真实的数组

类数组目标与真实的数组在以下两个方面存在差异：

1. 原型链上的办法和特点

真实的数组具有数组目标的原型链，因此具有丰厚的办法和特点，如push、pop、shift、unshift等用于操作数组的办法，以及length、concat、slice等用于处理数组的特点和办法。而类数组目标并没有这些原型办法和特点，运用类数组目标时不能直接调用数组的办法和特点。

示例代码：

const arr = [1, 2, 3];
const obj = {
  0: 1,
  1: 2,
  2: 3,
  length: 3,
};
console.log(arr.push(4)); // 输出: 4
console.log(obj.push(4)); // 报错: obj.push is not a function
console.log(arr.length); // 输出: 4
console.log(obj.length); // 输出: 3

2. 结构差异

类数组目标与真实的数组在内部结构上存在差异。真实的数组是一段接连的内存空间，能够直接经过索引拜访到每个元素，而类数组目标并非接连的内存空间，且可能具有非数字索引。类数组目标一般是基于目标完成的，运用非数字索引作为键来存储元素。因此，类数组目标的内部结构与真实的数组不同。

示例代码：

const arr = [1, 2, 3];
const obj = {
  0: 1,
  1: 2,
  2: 3,
  length: 3,
};
console.log(arr[0]); // 输出: 1
console.log(obj[0]); // 输出: 1
console.log(arr[3]); // 输出: undefined
console.log(obj[3]); // 输出: undefined
console.log(arr); // 输出: [1, 2, 3]
console.log(obj); // 输出: {0: 1, 1: 2, 2: 3, length: 3}

总结：尽管类数组目标与真实的数组在某些方面相似，但在原型链上的办法和特点、内部结构方面存在差异。因此，在运用类数组目标时需求留意这些差异，需求依据实践需求进行相应的处理。如有需求，能够将类数组目标转换为真实的数组，以便能够运用数组的办法和特点来操作数据。

五. 处理类数组目标的常见办法

假如有一个类数组目标，如下所示：

const obj = {
  0: "apple",
  1: "banana",
  2: "orange",
  length: 3,
};

下面总结处理以上这个类数组目标的几种办法：

1. 运用数组展开运算符（…）

const arr = [...obj];
console.log(arr); // 输出: ["apple", "banana", "orange"]

2. 运用 Array.from()办法

const arr = Array.from(obj);
console.log(arr); // 输出: ["apple", "banana", "orange"]

3. 运用 Array.prototype.slice.call()办法

const arr = Array.prototype.slice.call(obj);
console.log(arr); // 输出: ["apple", "banana", "orange"]

4. 运用 Array.prototype.map.call()办法

const arr = Array.prototype.map.call(obj, (item) => item);
console.log(arr); // 输出: ["apple", "banana", "orange"]

5. 运用 ES6 的 Array.from()办法与箭头函数

const arr = Array.from(obj, (item) => item);
console.log(arr); // 输出: ["apple", "banana", "orange"]

以上的这些办法能够将类数组目标转换为真实的数组，并能够运用数组的办法和特点对其进行操作。依据实践需求挑选适合的办法进行处理。

六. 总结

经过本篇文章，咱们了解了在 JavaScript 中处理类数组目标的一些高雅的技巧。这些技巧能够协助咱们愈加灵敏地操作和处理数据，进步开发效率和代码质量。

首要，咱们学习了几种在前端开发中常见的类数组目标。包含：arguments目标、NodeList目标、HTMLCollection目标、TypedArray目标，以及FileList等。

其次，咱们了解了如何将类数组目标转换为真实的数组。能够运用 Array.from() 办法、Array.prototype 办法或许扩展运算符（...）来完成转换。这些办法能够让咱们方便地运用数组的办法和特点进行处理。

总结来说，处理类数组目标对于 JavaScript 开发者来说是十分重要的，在实践开发中，咱们常常遇到类数组目标，只要了解这些处理技巧，咱们才能愈加轻松地处理数据，编写高效、干净的代码。加油！