JS | 如何把一个伪数组转换成一个真正的数组？

目录

1. 使用 Array.from()（推荐）

2.使用扩展运算符（Spread Operator）

3. 使用 Array.prototype.slice.call()

4. 使用 Array.prototype.map() （针对有特定结构的对象）

5、使用循环 + 数组的push()方法

---

在JavaScript中，将一个伪数组（pseudo-array）转换成一个真正的数组可以通过几种不同的方法实现。伪数组本质上是指拥有一个 length 属性但并非严格意义上的数组（例如，函数的 arguments 对象或某些DOM方法返回的对象）。以下是几种常见的转换方法：

1. 使用 Array.from()（推荐）

Array.from() 方法可以非常方便地将类似数组的对象或可迭代的对象转换成真正的数组。

function convertToTrueArray(pseudoArray) {
    return Array.from(pseudoArray);
}

// 示例
const pseudoArray = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const trueArray = convertToTrueArray(pseudoArray);
console.log(trueArray); // 输出: ['a', 'b', 'c']

2.使用扩展运算符（Spread Operator）

扩展运算符（...）也可以将伪数组转换为真正的数组。

function convertToTrueArray(pseudoArray) {
    // 让对象可迭代
    pseudoArray[Symbol.iterator] = function*() {
        for (let i = 0; i < this.length; i++) {
            yield this[i];
        }
    };
    return [...pseudoArray];
}

// 以下使用扩展运算符的写法会报错：TypeError: pseudoArray is not iterable
function convertToTrueArray(pseudoArray) {
    return [...pseudoArray]; // 索引不连续，无法迭代
}

// 示例
const pseudoArray = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const trueArray = convertToTrueArray(pseudoArray);
console.log(trueArray);

注：什么情况下扩展运算符可以工作？

扩展运算符只能用于可迭代对象，比如：

• 真正的数组

• 字符串

• Map、Set

• 具有 [Symbol.iterator] 方法的对象，即对象必须是可迭代的

• 函数的 arguments 对象（在某些环境下）

对于普通的类数组对象，使用 Array.from() 是最简单可靠的方法。

3. 使用 Array.prototype.slice.call()

slice() 方法可以用来将类数组对象转换成一个新的数组。

function convertToTrueArray(pseudoArray) {
    return Array.prototype.slice.call(pseudoArray);
}

// 示例
const pseudoArray = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const trueArray = convertToTrueArray(pseudoArray);
console.log(trueArray); // 输出: ['a', 'b', 'c']

4. 使用 Array.prototype.map() （针对有特定结构的对象）

如果伪数组的结构比较复杂或者你需要对每个元素进行转换，可以使用 map() 方法。不过，通常这种方法更适合于已有数组的元素转换，而非直接将伪数组转换为数组。但对于某些特殊情况，你也可以这样做：

function convertToTrueArray(pseudoArray) {
    return Array.prototype.map.call(pseudoArray, (item, index) => item);
}

// 示例
const pseudoArray = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const trueArray = convertToTrueArray(pseudoArray);
console.log(trueArray); // 输出: ['a', 'b', 'c']

关键点说明：

❶ Array.prototype.map.call()：

• 使用 `call()` 方法借用数组的 `map` 方法
• 让类数组对象能够使用数组的方法

❷ 类数组对象特征：

• 具有数字索引属性（0, 1, 2...）
• 具有 `length` 属性
• 但不具备数组的方法（如 push, pop, map 等）

实际应用场景

1. 处理函数参数

2. 操作 DOM 集合

3. 处理某些 API 返回的类数组数据

这个函数的主要价值在于让不具备数组方法的类数组对象能够使用丰富的数组功能。

5、使用循环 + 数组的push()方法

var arr = [];

var pseudoArray = { 0: 'a', 1: 'b', 2: 'c', kaodigua: 3 };

for(var i = 0; i < pseudoArray.length; i++){

  arr.push(pseudoArray[i]);

}

console.log(arr); //  ['a', 'b', 'c']

// 对比对象的for in循环

var arr = [];

var pseudoArray = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

for (var item in pseudoArray) {

​    arr.push(pseudoArray[item]);

}

console.log(arr); //  ['a', 'b', 'c', 3]

▼总结▼

对于大多数情况，使用 Array.from() 或扩展运算符是最简单和最直接的方法。slice() 方法虽然在一些情况下很有用，但它主要用于复制数组的一部分而不是转换。选择哪种方法取决于你的具体需求和偏好。