当前位置: 首页 > news >正文

Javascript高级:深度解析与多种实现方式数组扁平化

数组扁平化:深度解析与多种实现方式

在JavaScript编程中,数组扁平化是一个常见的操作,指的是将一个多维数组转换成一个一维数组。这个过程中,所有嵌套的数组元素都会被“拉平”到同一个层级。数组扁平化在处理嵌套数据结构时非常有用,比如解析多层嵌套的JSON数据,或者处理从函数返回的嵌套数组结果。

为什么要数组扁平化?
  • 简化数据处理:将多维数组转换为一维数组后,可以更方便地进行遍历、搜索、排序等操作。
  • 统一数据结构:在处理来自不同源的数据时,可能需要将它们转换为统一的一维数组结构。
  • 优化性能:在某些情况下,扁平化数组可以减少嵌套层级,从而提高算法的效率。
数组扁平化的几种实现方式
  1. 递归方法

递归是处理嵌套结构的一种自然方式。通过递归函数,可以遍历每一层数组,并将其元素添加到结果数组中。

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]
  1. 使用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]
  1. 使用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]
  1. 使用堆栈模拟递归

为了避免递归可能带来的性能问题和栈溢出风险,可以使用堆栈来模拟递归过程。

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 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板&#xf…...

Python 人脸检测:使用 Dlib 和 OpenCV

简介 本文用Python、Dlib 和 OpenCV 库来检测图像中的人脸,并在人脸上绘制矩形框进行窗口显示。 环境准备 在开始之前,请确保您的计算机上已安装 Python。此外,您还需要安装以下库: dlib:一个包含多种机器学习算法…...

【大数据学习 | flume】flume的概述与组件的介绍

1. flume概述 Flume是cloudera(CDH版本的hadoop) 开发的一个分布式、可靠、高可用的海量日志收集系统。它将各个服务器中的数据收集起来并送到指定的地方去,比如说送到HDFS、Hbase,简单来说flume就是收集日志的。 Flume两个版本区别: ​ 1&…...

torch.is_storage()

torch.is_storage() 判断给定的对象是否是一个 PyTorch 存储对象 PyTorch 存储对象:PyTorch 中,存储对象(Storage)是一个低级别的对象,它表示一个存储数据的连续内存块。存储对象不包含任何关于数据如何解释的信息&a…...

2411rust,编译时自动检查配置

原文 Cargo和编译器团队很高兴地宣布,从Rust1.80(或nightly-2024-05-05)开始,会自动检查每个可访问的#[cfg],看看是否与期望的配置名和值匹配. 这帮助验证crate,是否正确处理不同目标平台或函数的条件编译.它确保在期望和使用设置的配置间保持一致,帮助在开发过程的早期抓住潜…...

在 Ubuntu 中用 VSCode 配置 C 语言项目的编译与调试(详解教程)

目录 一、准备工作二、配置 VSCode 的编译任务三、配置 VSCode 的调试任务四、编译与调试流程五、常见问题排查六、总结 在 C 语言开发过程中,调试与编译是不可缺少的环节,而 VSCode(Visual Studio Code)作为一个强大且轻量级的编…...

MATLAB绘制克莱因瓶

MATLAB绘制克莱因瓶 clc;close all;clear all;warning off;% clear all rand(seed, 100); randn(seed, 100); format long g;% Parameters u_range linspace(0, 2*pi, 100); v_range linspace(0, pi, 50); [U, V] meshgrid(u_range, v_range);% Parametric equations for t…...

HTML5实现趣味飞船捡金币小游戏(附源码)

文章目录 1.设计来源1.1 主界面1.2 游戏中界面1.2 飞船边界框效果 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/details/143799554 HTML5实现趣味飞船捡金币小游戏(附源码)&…...

Excel表数学于三角函数、统计函数

一、数学与三角函数 函数说明ABS返回数值的绝对值ACOS反余弦函数ACOSH反双曲余弦函数ASIN反正弦函数ASINH反双曲正弦函数ATAN反正切函数ATAN2以 x、y 坐标返回反正切值ATANH反双曲正切函数CEILING向上舍入(指定倍数的整数)COMBIN组合公式COS余弦函数COS…...

小试银河麒麟系统OCR软件

0 前言 今天在国产电脑上办公,需要从一些PDF文件中复制文字内容,但是这些PDF文件是图片转换生成的,不支持文字选择和复制,除了手工输入,我们还可以使用OCR。 1 什么是OCR OCR (Optical Character Recogni…...

Dubbo RPC线程模型

消费端线程模型,提供者端线程模型 消费端线程模型 对 2.7.5 版本之前的 Dubbo 应用,尤其是一些消费端应用,当面临需要消费大量服务且并发数比较大的大流量场景时(典型如网关类场景),经常会出现消费端线程…...

18款未成年软件入口/河南网站seo推广

面试场景 面试官:Java多线程了解吗?你给我写一下,起两个线程交替打印0~100的奇偶数。 小黄:啊? 面试官:就是有两个线程,一个线程打印奇数另一个打印偶数,它们交替输出&#xff0c…...

广州正规网站建设企业/百度推广账号怎么申请

http://tool.oschina.net/...

获取网站状态/seo销售

if语句一个if语句包含一个布尔表达式和一条或多条语句。语法If语句的用语法如下:if(布尔表达式){//如果布尔表达式为true将执行的语句}如果布尔表达式的值为true,则执行if语句中的代码块。否则执行If语句块后面的代码。public class Test {public static…...

自己建网站做那个模块好/网站推广软件免费版大全

这里是记录如何通过PHP来更新Namesilo里面的域名解析,实现自动动态更新。 首先当然你得有Namesilo的域名并且添加过解析了,怎么申请和添加解析就不去讲了,网上多的是。 Namesilo官网:https://www.namesilo.com/ 然后,是…...

如何做微网站/活动策划公司

记录一些简单的表的管理知识,方便使用!mysql> desc yql9;-------------------------------------------| Field | Type | Null | Key | Default | Extra |-------------------------------------------| id | int(11) | YES | | NULL | || v…...

做的网站没流量/深圳网络推广代理

ZERO-SHOT RESTORATION OF UNDEREXPOSED IMAGES VIA ROBUST RETINEX DECOMPOSITION1.摘要2.介绍3. RRDNet网络4. 损失函数的设计5.实验6.评价代码: 论文代码论文 论文下载1.摘要 低照度图像通常会出现严重的质量退化,如在黑暗中能见度差和潜在噪声。以往…...