在 JavaScript 中,将二维数组转换为一维数组(扁平化)有多种方法,可根据数组结构复杂度、性能需求和兼容性选择。以下是最常用的实现方式:

1. 使用 flat() 方法(ES2019+)

MDN释义:flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

语法:var newArray = arr.flat([depth]) depth 默认为 1

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

如果不知道数组是多少维度,可以传 Infinity 来展开任意深度的嵌套数组

var arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

方法2:使用 reduce 与 concat

  • reduce
    reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

    • 基本用法:
      const total = [1, 2, 3].reduce((acc, cur) => acc + cur, 1); // 6
  • concat
    concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。concat() 也适用于字符串。

    • 基本用法:
      var arr = [1, 2, 3].concat([4, 5]); // [1, 2, 3, 4, 5]

实例:

// 二维
const arr = [1, 2, [3, 4]];
arr.reduce((acc, cur) => acc.concat(cur), [])
// [1, 2, 3, 4]// 三维及以上可以使用递归
function flatArr(arr, dep = 1) {if (dep > 0) {return arr.reduce((acc, cur) =>acc.concat(Array.isArray(cur) ? flatArr(cur, dep - 1) : cur),[]);} else {return arr;}
}
flatArr([1, 2, [3, 4, [5, 6]]], 3);
// [1, 2, 3, 4, 5, 6]// 不知道数组维度,可以传 Infinity
flatArr([1, 2, [3, 4, [5, 6]]], Infinity);
// [1, 2, 3, 4, 5, 6]

方法3:扩展运算符

// 二维
const arr = [1, 2, [3, 4]];
var newArr = [].concat(...arr);
// [1, 2, 3, 4]

方法4:使用forWach

forEach() 方法对数组的每个元素执行一次给定的函数。

基本用法:
arr.forEach(((item, index) => item))

实例:

// 二维及以上维度
const newArr = []; // 全局变量或者闭包也可以function flatArr(arr, dep = 1) {arr.forEach(ele => {if(Array.isArray(ele) && dep > 0) {flatArr(ele, dep - 1);} else {newArr.push(ele);}});return newArr;
}flatArr([1, 2, [3, 4, [5, 6]]], 3);
// [1, 2, 3, 4, 5, 6]```## 方法5:使用堆栈stack```bash
// 无递归数组扁平化,使用堆栈
// 注意:深度的控制比较低效,因为需要检查每一个值的深度
// 也可能在 shift / unshift 上进行 w/o 反转,但是末端的数组 OPs 更快
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flatten(input) {const stack = [...input];const res = [];while (stack.length) {// 使用 pop 从 stack 中取出并移除值const next = stack.pop();if (Array.isArray(next)) {// 使用 push 送回内层数组中的元素,不会改动原始输入stack.push(...next);} else {res.push(next);}}// 反转恢复原数组的顺序return res.reverse();
}
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
// 递归版本的反嵌套
function flatten(array) {var flattend = [];(function flat(array) {array.forEach(function(el) {if (Array.isArray(el)) flat(el);else flattend.push(el);});})(array);return flattend;
}

方法6:使用 Generator 函数

Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。

function* flatArr(array) {for (const item of array) {if (Array.isArray(item)) {yield* flatArr(item);} else {yield item;}}
}const arr = [1, 2, [3, 4, [5, 6]]];
const flattened = [...flatArr(arr)];
// [1, 2, 3, 4, 5, 6]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/88724.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/88724.shtml
英文地址,请注明出处:http://en.pswp.cn/bicheng/88724.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Claude code在Windows上的配置流程

前言 昨天在服务器上配置好了 Claude code,发现其编码性能和效率都非常不错。 然而,尝试用它修改带 UI 界面的客户端程序时颇为不便,因为服务器没有图形化界面,无法直接将应用界面直接显示到开发机上,调试起来颇为不…

手把手教你用YOLOv10打造智能垃圾检测系统

无需编程基础!手把手教你用YOLOv10打造智能垃圾检测系统 垃圾分类不再难,AI助手秒识别 你是否曾站在分类垃圾桶前犹豫不决?塑料瓶是可回收还是其他垃圾?外卖餐盒到底该丢哪里?随着垃圾分类政策推广,这样的困…

batchnorm类

1. 伪代码:2. python代码:3. 测试:4. 加深理解:以 为例,x3,可见输出的batchnorm后y0.2627.查看模型记录的均值及方差,计算y0.286799,理解是大致这样的计算过程。(为什么数…

SpringBoot项目保证接口幂等的五种方法!

1. 幂等概述 1.1 深入理解幂等性 在计算机领域中,幂等(Idempotence)是指任意一个操作的多次执行总是能获得相同的结果,不会对系统状态产生额外影响。在Java后端开发中,幂等性的实现通常通过确保方法或服务调用的结果…

SQL新手入门详细教程和应用实例

SQL(Structured Query Language)是用于管理和操作关系型数据库的标准语言。它允许你创建、查询、更新和删除数据。本教程将从基础概念开始,逐步引导你上手SQL,并提供详细的应用实例。教程基于标准SQL语法,实际使用时需根据数据库系统(如MySQL、SQLite或PostgreSQL)调整。…

DVWA-LOW级-SQL手工注入漏洞测试(MySQL数据库)+sqlmap自动化注入-小白必看(超详细)

首次使用DVWA的靶场,咋们先从最低级别的LOW开始,因为之前玩过一下墨者学院,对sql注入有一点认识和理解,所以先从sql的盲注开始; 1、测试注入点是否存在sql注入的漏洞; (1)首先我们…

JAVA线程池详解+学习笔记

1.线程池基础概念线程池是一种资源复用技术,通过预先创建并管理一组线程,减少频繁创建和销毁线程的开销。核心思想与数据库连接池、字符串常量池类似,旨在提升系统性能。核心参数解析ThreadPoolExecutor构造函数包含7个关键参数:c…

数据分析库 Pandas

对于Pandas的简单认识和基本操作的练习一 介绍 Pandas 是一个开源的数据分析和数据处理库,它是基于 Python 编程语言的库。 Pandas 提供了易于使用的数据结构和数据分析工具,特别适用于处理结构化数据,如表格型数据(类似于 Excel …

qt 中不要让 lambda 槽函数捕获信号源对象的共享指针

错误示例std::shared_ptr<QSerialPort> serial{new QSerialPort{}};QSerialPort::connect(serial.get(),&QSerialPort::readyRead,[serial](){QByteArray receive_data serial->readAll();std::cout.write(receive_data.data(), receive_data.size());});这会直接…

Solidity 合约的编写-完整开发流程:从编译、测试、部署到交互

&#x1f9f1; Solidity 合约开发全流程&#xff08;Foundry 版&#xff09;✅ 适合对象&#xff1a;已经能写合约但不清楚如何测试、部署、交互的开发者✅ 工具链&#xff1a;Foundry&#xff08;forge, anvil, cast&#xff09;&#x1f4cc; 开发流程总览1️⃣ 初始化项目 2…

设计模式 - 面向对象原则:SOLID最佳实践

文章目录深入理解 SOLID&#xff1a;用对原则&#xff0c;别把简单问题搞复杂SOLID 原则概览1. 单一职责原则&#xff08;SRP&#xff09;2. 开闭原则&#xff08;OCP&#xff09;3. 里氏替换原则&#xff08;LSP&#xff09;4. 接口隔离原则&#xff08;ISP&#xff09;5. 依赖…

Vue 3 中父组件内两个子组件相互传参的几种方法

方法一&#xff1a;通过父组件中转&#xff08;Props Emits&#xff09;<!-- ParentComponent.vue --> <template><ChildA :message-from-b"messageFromB" send-to-b"handleSendToB" /><ChildB :message-from-a"messageFromA&q…

三子棋游戏设计与实现(C 语言版)

一、需求分析目标&#xff1a;实现一个简单的人机对战三子棋&#xff0c;支持以下功能&#xff1a;初始化空棋盘&#xff0c;清晰展示落子状态。玩家通过坐标落子&#xff08;X 代表玩家&#xff09;&#xff0c;电脑随机落子&#xff08;O 代表电脑&#xff09;。实时判断胜负…

GD32 CAN1和TIMER0同时开启问题

背景&#xff1a;今天在一个项目调试的时候发现了一些问题&#xff0c;由此贴记录一下问题解决的过程。使用的芯片是GD32F305VE。使用到了CAN1和TIMER0。在使用这连个外设的时候发送了一些问题。单独使用CAN1。功能正常。单独使用TIMER0。配置为输出模式。功能正常。但是当两个…

剑指offer56_数组中唯一只出现一次的数字

数组中唯一只出现一次的数字在一个数组中除了一个数字只出现一次之外&#xff0c;其他数字都出现了三次。 请找出那个只出现一次的数字。 你可以假设满足条件的数字一定存在。 思考题&#xff1a; 如果要求只使用 O(n) 的时间和额外 O(1) 的空间&#xff0c;该怎么做呢&#xf…

从语音识别到智能助手:Voice Agent 的技术进化与交互变革丨Voice Agent 学习笔记

From Research AI&#xff1a; 最近看到 Andrew Ng 的一句话让我印象深刻&#xff1a;“While some things in AI are overhyped, voice applications seem underhyped right now.”&#xff08;尽管 AI 中有些领域被过度炒作&#xff0c;语音应用却似乎被低估了&#xff09;。…

什么是Jaccard 相似度(Jaccard Similarity)

文章目录✅ 定义&#xff1a;&#x1f4cc; 取值范围&#xff1a;&#x1f50d; 举例说明&#xff1a;&#x1f9e0; 应用场景&#xff1a;⚠️ 局限性&#xff1a;&#x1f4a1; 扩展概念&#xff1a;Jaccard 相似度&#xff08;Jaccard Similarity&#xff09; 是一种用于衡量…

ragflow_多模态文档解析与正文提取策略

多模态文档解析与正文提取策略 RAGflow的文档解析系统位于deepdoc/parser/目录下,实现了对多种文档格式的统一解析处理。该系统采用模块化设计,针对不同文档格式提供专门的解析器,并通过视觉识别技术增强解析能力。本文将深入探讨RAGflow的文档解析系统的设计原理、实现细节…

数据结构栈的实现(C语言)

栈的基本概念栈是一种特殊的线性存储结构&#xff0c;是一种操作受到限制的线性表&#xff0c;特殊体现在两个地方&#xff1a;1、元素进栈出栈的操作只能从同一端完成&#xff0c;另一端是封闭的&#xff0c;通常将数据进栈叫做入栈&#xff0c;压栈等&#xff0c;出栈叫做弹栈…

【springboot】IDEA手动创建SpringBoot简单工程(无插件)

大致步骤 创建Maven工程 引入依赖 提供启动类 详细教程 创建Maven工程 修改pom.xml文件 添加父节点 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.5.3</…