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

目录

[1. 使用 Array.from()(推荐)](#1. 使用 Array.from()(推荐))

[2.使用扩展运算符(Spread Operator)](#2.使用扩展运算符(Spread Operator))

[3. 使用 Array.prototype.slice.call()](#3. 使用 Array.prototype.slice.call())

[4. 使用 Array.prototype.map() (针对有特定结构的对象)](#4. 使用 Array.prototype.map() (针对有特定结构的对象))

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


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

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

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

javascript 复制代码
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)

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

javascript 复制代码
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()**方法可以用来将类数组对象转换成一个新的数组。

javascript 复制代码
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()**方法。不过,通常这种方法更适合于已有数组的元素转换,而非直接将伪数组转换为数组。但对于某些特殊情况,你也可以这样做:

javascript 复制代码
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()方法

javascript 复制代码
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() 方法虽然在一些情况下很有用,但它主要用于复制数组的一部分而不是转换。选择哪种方法取决于你的具体需求和偏好。

相关推荐
β添砖java4 小时前
交互动效设计
前端·javascript·交互
用户56170657111474 小时前
scratch二次开发--如何在舞台区开启网络摄像头(Turbowarp版)
javascript
进阶的鱼5 小时前
React+ts+vite脚手架搭建(三)【状态管理篇】
前端·javascript·react.js
西洼工作室5 小时前
SSE与轮询技术实时对比演示
前端·javascript·css
GISer_Jing10 小时前
明天好好总结汇总分析博客
前端·javascript·面试
做运维的阿瑞12 小时前
Windows 环境下安装 Node.js 和 Vue.js 框架完全指南
前端·javascript·vue.js·windows·node.js
谢尔登17 小时前
【Nest】日志记录
javascript·中间件·node.js
Andytoms19 小时前
Android geckoview 集成,JS交互,官方demo
android·javascript·交互
知识分享小能手19 小时前
微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)
前端·javascript·学习·程序人生·微信小程序·小程序·vue3