前端JavaScript篇之JavaScript 类数组对象的定义？如何将类数组对象转换为真正的数组-编程知识

前端JavaScript篇之JavaScript 类数组对象的定义？如何将类数组对象转换为真正的数组

JavaScript 类数组对象的定义？如何将类数组对象转换为真正的数组

类数组对象指的是具有类似数组结构（类似于数组的属性或方法）的普通JavaScript对象。尽管它们不是真正的数组，但可以像数组一样进行一些类似的操作。通常，类数组对象具有数值索引和length属性，但不具有数组的原型方法如push、pop等。

一个常见的类数组对象的例子是 arguments 对象，它保存了函数调用时传递的所有参数，并且可以通过索引访问每个参数。

以下是一个案例介绍和示例代码：

假设有一个函数sum，它可以接收任意个数的参数，并返回所有参数的和。

function sum() {var argArray = Array.prototype.slice.call(arguments) // 将 arguments 对象转换为真正的数组var total = 0for (var i = 0; i < argArray.length; i++) {total += argArray[i]}return total
}// 示例：求 1 到 5 的和
var result = sum(1, 2, 3, 4, 5)
console.log(result) // 输出 15

在上述代码中，arguments 对象是一个类数组对象，它类似于数组，但是不具有数组的方法。为了将它转换为真正的数组，我们使用 Array.prototype.slice.call(arguments) 将其转换为一个数组 argArray。接着，我们使用 for 循环遍历 argArray 中的每个元素，并将它们累加起来，最后返回累加的结果。

通过将类数组对象转换为真正的数组，我们可以使用数组的方法和属性在类数组对象上进行更方便的操作。

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

下面我将介绍其中三种常用的方法：

Array.from() 方法：
这是一个数组静态方法，它从类数组对象或可迭代对象创建一个新的数组实例。它将类数组对象的每个元素作为新数组的元素，并返回这个新数组。

var arrayLike = { 0: 'apple', 1: 'banana', 2: 'orange', length: 3 }
var newArray = Array.from(arrayLike)
console.log(newArray)

运行结果：

['apple', 'banana', 'orange']

请添加图片描述

Array.from() 方法接受一个类数组对象作为参数，并使用对象的 length 属性和索引来创建一个新的数组。返回的数组将包含类数组对象的每个元素。

Array.prototype.slice.call() 方法：
这种方法使用数组的原型方法 slice()，并将其应用于类数组对象。通过在 slice 方法上调用 call() 方法，并将类数组对象作为参数传递，可以将类数组对象转换为一个新的数组。

var arrayLike = { 0: 'apple', 1: 'banana', 2: 'orange', length: 3 }
var newArray = Array.prototype.slice.call(arrayLike)
console.log(newArray)

运行结果：

['apple', 'banana', 'orange']

请添加图片描述

这段代码中，Array.prototype.slice.call(arrayLike) 将 slice() 方法应用于 arrayLike 对象，将其转换为一个数组。slice() 方法接受类数组对象作为其上下文，并返回一个新的数组，其中包含类数组对象的元素。

Array.prototype.concat.apply() 方法：
这种方法使用数组的原型方法 concat() 和 apply()，将类数组对象作为参数应用于 concat() 方法。

var arrayLike = { 0: 'apple', 1: 'banana', 2: 'orange', length: 3 }
var newArray = Array.prototype.concat.apply([], arrayLike)
console.log(newArray)

运行结果：

['apple', 'banana', 'orange']

请添加图片描述

这段代码中，Array.prototype.concat.apply([], arrayLike) 将空数组作为上下文应用于 concat() 方法，然后将类数组对象 arrayLike 作为参数传递。apply() 方法将数组作为参数展开，并返回一个新的数组。

这些方法都可以将一个类数组对象转换为一个真正的数组。你可以根据具体的使用场景和个人偏好选择其中的一种。

持续学习总结记录中，回顾一下上面的内容：
类数组对象是指具有数组特性（例如 length 属性和下标访问元素）但不是真正的数组对象，常见的有函数的 arguments 参数、DOM 元素集合和 NodeList 等。将类数组对象转换为真正的数组可以使用以下几种方式：

使用 Array.from() 方法，将类数组对象转换为数组。
使用扩展运算符 ...，将类数组对象转换为数组。
使用 Array.prototype.slice.call() 方法，将类数组对象转换为数组。
使用 Array.prototype.concat.apply([], arrLike) 方法，将类数组对象转换为数组。

这些方法都可以将类数组对象转换为真正的数组，方便进行数组相关的操作和方法调用。