Javascript高级:深度解析与多种实现方式数组扁平化
数组扁平化:深度解析与多种实现方式
在JavaScript编程中,数组扁平化是一个常见的操作,指的是将一个多维数组转换成一个一维数组。这个过程中,所有嵌套的数组元素都会被“拉平”到同一个层级。数组扁平化在处理嵌套数据结构时非常有用,比如解析多层嵌套的JSON数据,或者处理从函数返回的嵌套数组结果。
为什么要数组扁平化?
- 简化数据处理:将多维数组转换为一维数组后,可以更方便地进行遍历、搜索、排序等操作。
- 统一数据结构:在处理来自不同源的数据时,可能需要将它们转换为统一的一维数组结构。
- 优化性能:在某些情况下,扁平化数组可以减少嵌套层级,从而提高算法的效率。
数组扁平化的几种实现方式
- 递归方法
递归是处理嵌套结构的一种自然方式。通过递归函数,可以遍历每一层数组,并将其元素添加到结果数组中。
function flattenArray(arr) {let result = [];arr.forEach(item => {if (Array.isArray(item)) {result = result.concat(flattenArray(item));} else {result.push(item);}});return result;
}const nestedArray = [1, [2, [3, [4]], 5]];
console.log(flattenArray(nestedArray)); // 输出: [1, 2, 3, 4, 5]
- 使用
Array.prototype.reduce
和递归
reduce
方法也可以用来实现数组扁平化,结合递归可以处理任意深度的嵌套。
function flattenArray(arr) {return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenArray(val)) : acc.concat(val), []);
}const nestedArray = [1, [2, [3, [4]], 5]];
console.log(flattenArray(nestedArray)); // 输出: [1, 2, 3, 4, 5]
- 使用
Array.prototype.flat
(ES2019引入)
ES2019引入了Array.prototype.flat
方法,可以方便地将数组扁平化到指定深度。如果不指定深度,则默认扁平化一层。
const nestedArray = [1, [2, [3, [4]], 5]];
const flatArray = nestedArray.flat(Infinity); // Infinity表示扁平化所有层级
console.log(flatArray); // 输出: [1, 2, 3, 4, 5]
- 使用堆栈模拟递归
为了避免递归可能带来的性能问题和栈溢出风险,可以使用堆栈来模拟递归过程。
function flattenArray(arr) {const stack = [...arr];const result = [];while (stack.length) {const next = stack.pop();if (Array.isArray(next)) {stack.push(...next);} else {result.push(next);}}// 由于是从后往前遍历,结果需要反转return result.reverse();
}// 或者,为了避免反转,可以改用从前往后遍历并收集到数组开头
function flattenArrayIterative(arr) {const stack = [...arr];const result = [];let index = result.length;while (stack.length) {const next = stack.pop();if (Array.isArray(next)) {for (let i = next.length - 1; i >= 0; i--) {stack.push(next[i]);}} else {result[index++] = next;}}return result;
}const nestedArray = [1, [2, [3, [4]], 5]];
console.log(flattenArrayIterative(nestedArray)); // 输出: [1, 2, 3, 4, 5]
注意事项
- 在选择扁平化方法时,要考虑数组的深度和元素的类型。如果数组嵌套层级很深,递归方法可能会导致栈溢出,此时可以选择堆栈模拟或
Array.prototype.flat
方法。 - 如果数组中包含非数组元素(如对象、字符串等),要确保扁平化过程不会破坏这些元素的结构。
Array.prototype.flat
方法是处理扁平化的最简单方式,但它是在ES2019中引入的,因此在使用时需要注意兼容性问题。对于不支持该方法的旧环境,可以使用其他方法实现扁平化。
综上所述,数组扁平化是处理嵌套数据结构的重要操作之一。通过选择合适的方法,可以高效地实现数组扁平化,从而简化数据处理过程。
相关文章:
Javascript高级:深度解析与多种实现方式数组扁平化
数组扁平化:深度解析与多种实现方式 在JavaScript编程中,数组扁平化是一个常见的操作,指的是将一个多维数组转换成一个一维数组。这个过程中,所有嵌套的数组元素都会被“拉平”到同一个层级。数组扁平化在处理嵌套数据结构时非常…...

SpringBoot Data Redis连接Redis-Cluster集群
使用SpringBoot Data Redis无法连接Redis-Cluster集群 最近在研究系统高并发下的缓存架构,因此自己在自己买的云服务器上搭建好Redis 5.0 版本的集群后,使用springboot的 RedisTemplate连接是发现总是访问不到集群节点。上网百度了发现没有好的解决办法&…...

计算机网络——TCP篇
TCP篇 基本认知 TCP和UDP的区别? TCP 和 UDP 可以使用同一个端口吗? 可以的 传输层中 TCP 和 UDP在内核中是两个完全独立的软件模块。可以根据协议字段来选择不同的模块来处理。 TCP 连接建立 TCP 三次握手过程是怎样的? 一次握手:客户端发送带有 …...
【网络安全面经】技术性问题3
11. 一次完整的 HTTP 请求过程 域名解析:通过 DNS 将域名转换为 IP 地址,如上述 DNS 的工作原理。建立 TCP 连接:客户端向服务器发送 SYN 报文段,经过三次握手建立 TCP 连接。发送 HTTP 请求:客户端向服务器发送 HTTP…...

前后端交互之动态列
一. 情景 在做项目时,有时候后会遇到后端使用了聚合函数,导致生成的对象的属性数量或数量不固定,因此无法建立一个与之对应的对象来向前端传递数据,这时可以采用NameDataListVO向前端传递数据。 Data Builder AllArgsConstructo…...

递归(3)----力扣40组合数2,力扣473火柴拼正方形
给定一个候选人编号的集合 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用 一次 。 注意:解集不能包含重复的组合。 示例 1: 输入: candidates [10,1,2,7,6,1…...
十一:HTTP 状态码详解:解读每一个响应背后的意义
HTTP(超文本传输协议)是网络通信的基石之一,主要用于客户端(例如浏览器)和服务器之间的通信。为了让服务器能准确地向客户端反馈请求的处理状态,HTTP设计了一套标准的状态码。每一个状态码代表了特定的含义,指示了请求的状态、潜在的问题或成功的信息。 1. 信息响应 (1…...

《译文》2024年11月数维杯国际大学生数学建模挑战赛题目
# 赛题正式发布 2024年第十届数维杯国际大学生数学建模挑战赛顺利开赛,竞赛开始时间为北京时间2024年11月15日09:00至北京时间2024年11月19日09:00,共计4天,竞赛题目正式发布,快来一起围观,你认为今年的哪个题目更具有…...
shell命令统计文件行数之和
你可以使用以下 shell 命令来统计每个 .txt 文件的行数,并将其加和在一起: find . -name "*.txt" -not -name "*.json" -exec wc -l {} + | awk {sum += $1} END {print sum} 解释: find . -name "*.txt" -not -name "*.json": f…...

第02章 CentOS基本操作
2.文件基本操作【文件操作(一)】 目标 理解Linux下路径的表示方法能够使用命令(mkdir和touch)在指定位置创建目录和文件能够使用命令(rm)删除指定的目录和文件能够使用命令(ls)列出目录里的文件能够使用命令(cat,head,tail,less,more)查看文件内容理解标…...
241113.学习日志——[CSDIY] [ByteDance] 后端训练营 [02]
CSDIY:这是一个非科班学生的努力之路,从今天开始这个系列会长期更新,(最好做到日更),我会慢慢把自己目前对CS的努力逐一上传,帮助那些和我一样有着梦想的玩家取得胜利!!&…...

【HOT100第三天】和为K的子数组,最大子数组和,合并区间,轮转数组
今天练的是子串和子数组专题 ~ (前缀和那里差点学死了) 560.和为K的子数组 给你一个整数数组 nums 和一个整数 k ,请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 先写个暴力法,用昨天刚学…...

设计模式-Adapter(适配器模式)GO语言版本
前言 个人感觉Adapter模式核心就在于接口之间的转换。将已有的一些接口转换成其他接口形式。并且一般用于对象上,而不是系统上 问题 就用一个简单的问题,懂数据结构的同学可能知道双端队列。那么就用双端队列实现一个栈(stack)或…...

SAM_Med2D 训练完成后boxes_prompt没有生成mask的问题
之前对着这这篇文章去微调SAM_Med2D(windows环境),发现boxes_prompt空空如也。查找了好长时间问题SAM-Med2D 大模型学习笔记(续):训练自己数据集_sam训练自己数据集-CSDN博客 今天在看label2image_test.json文件的时候发现了一些端倪: 官方…...

游戏引擎学习第18天
clang-format 相关的配置可以参考下面 .clang-format 是用来配置代码格式化规则的文件,主要用于 Clang-Format 工具。以下是 .clang-format 文件中的一些常用设置: 1. 基础设置 Language: Cpp # 指定语言 (C, C, Java, JavaScript, etc…...
Kotlin return与return@forEachIndexed
Kotlin return与returnforEachIndexed fun main() {val data arrayOf(0, 1, 2, 3, 4)println("a")data.forEachIndexed { index, v ->if (v 2) {//类似while循环中的continue//跳过,继续下一个forEachIndexed迭代returnforEachIndexed}println("…...
基于Canny边缘检测和轮廓检测
这段代码实现了基于Canny边缘检测和轮廓检测,从图像中筛选出面积较大的矩形,并使用OpenCV和Matplotlib显示结果。主要流程如下: 步骤详解: 读取图像: img cv2.imread(U:/1.png)使用cv2.imread()加载图像。 转换为灰…...
力扣题目解析--合并k个升序链表
题目 给你一个链表数组,每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中,返回合并后的链表。 示例 1: 输入:lists [[1,4,5],[1,3,4],[2,6]] 输出:[1,1,2,3,4,4,5,6] 解释:链表数组如下…...

Linux:调试器-gdb/cgdb
文章目录 一、编译成debug1、-g 选项 二、gdb调试命令1、在CentOS系统下检查安装gdb2、进入gdb模式3、quit 退出gdb4、list (简写 l)显示文件内容5、b 打断点6、 r / run运行程序7、c 让程序直接运行完 三、cgdb1、info b查看打的所有断点2、d 删除断点3…...

『VUE』30. 生命周期的介绍(详细图文注释)
目录 生命周期生命周期的8阶段生命周期小例子总结 欢迎关注 『VUE』 专栏,持续更新中 欢迎关注 『VUE』 专栏,持续更新中 生命周期 每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板…...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...

【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)
参考官方文档:https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java(供 Kotlin 使用) 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...
Java求职者面试指南:计算机基础与源码原理深度解析
Java求职者面试指南:计算机基础与源码原理深度解析 第一轮提问:基础概念问题 1. 请解释什么是进程和线程的区别? 面试官:进程是程序的一次执行过程,是系统进行资源分配和调度的基本单位;而线程是进程中的…...

【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅
目录 前言 操作系统与驱动程序 是什么,为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中,我们在使用电子设备时,我们所输入执行的每一条指令最终大多都会作用到硬件上,比如下载一款软件最终会下载到硬盘上&am…...

Axure 下拉框联动
实现选省、选完省之后选对应省份下的市区...