JS实现数组扁平化的 8 种方式

八种数组扁平化方法的使用场景和优缺点

以下是八种数组扁平化方法的使用场景和优缺点:

1. 使用递归:

  • 使用场景:当需要对任意层级的嵌套数组进行扁平化时,递归是一种简单且通用的方法。
  • 优点:简单易懂,适用于任意层级的嵌套数组。
  • 缺点:可能存在性能问题,对于非常大的数组或多层嵌套的数组,递归可能导致堆栈溢出。

2. 使用 reduce 方法:

  • 使用场景:当需要对数组进行一系列操作,并将结果累积到一个新数组时,reduce 方法是一种常用的选择。
  • 优点:代码简洁,可以直接在 reduce 方法中处理扁平化逻辑。
  • 缺点:对于非常大的数组或多层嵌套的数组,reduce 方法可能导致性能问题。

3. 使用扩展运算符:

  • 使用场景:当需要快速将多层嵌套的数组扁平化为一维数组时,扩展运算符是一种简单且直观的方法。
  • 优点:代码简洁,易于理解和使用。
  • 缺点:对于非常大的数组或多层嵌套的数组,扩展运算符可能导致性能问题。

4. 使用 flat 方法(ES2019):

  • 使用场景:当在支持 ES2019 的环境中,可以使用 flat 方法来扁平化数组。
  • 优点:代码简洁,使用内置方法,性能较好。
  • 缺点:不适用于不支持 ES2019 的环境。

5. 使用 toString 和 split 方法:

  • 使用场景:当需要将多层嵌套的数组转换为字符串,并使用字符串方法进行处理时,可以使用 toString 和 split 方法。
  • 优点:简单易懂,适用于简单的扁平化需求。
  • 缺点:对于包含对象或字符串元素的数组,可能会出现不符合预期的结果。

6. 使用正则表达式和 JSON 方法:

  • 使用场景:当需要将数组转换为字符串,然后使用正则表达式和 JSON 方法进行处理时,可以使用该方法。
  • 优点:适用于简单的扁平化需求。
  • 缺点:对于包含对象或字符串元素的数组,可能会出现不符合预期的结果。

7. 使用堆栈:

  • 使用场景:当需要手动控制数组元素的处理顺序时,可以使用堆栈方法。
  • 优点:可以灵活控制处理顺序,适用于需要自定义处理逻辑的情况。
  • 缺点:相对复杂,需要手动处理堆栈和结果数组。

8. 使用扩展运算符和递归:

  • 使用场景:当需要结合扩展运算符和递归来处理多层嵌套的数组时,可以使用该方法。
  • 优点:代码简洁,结合了扩展运算符和递归的优点。
  • 缺点:对于非常大的数组或多层嵌套的数组,递归可能导致堆栈溢出。

根据具体的需求和代码环境,选择适合的方法来实现数组扁平化。考虑性能、代码复杂度和可读性等因素,选择最适合的方法进行实现。

具体实现

以下是实现数组扁平化的8种方式:

1. 使用递归:

function flatten(arr) {let result = [];arr.forEach(item => {if (Array.isArray(item)) {result = result.concat(flatten(item));} else {result.push(item);}});return result;
}

2. 使用 reduce 方法:

function flatten(arr) {return arr.reduce((result, item) => {if (Array.isArray(item)) {result = result.concat(flatten(item));} else {result.push(item);}return result;}, []);
}

3. 使用扩展运算符:

function flatten(arr) {while (arr.some(item => Array.isArray(item))) {arr = [].concat(...arr);}return arr;
}

4. 使用 flat 方法(ES2019):

function flatten(arr) {return arr.flat(Infinity);
}

5. 使用 toString 和 split 方法:

function flatten(arr) {return arr.toString().split(',').map(item => +item);
}

6. 使用正则表达式和 JSON 方法:

function flatten(arr) {return JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']');
}

7. 使用堆栈:

function flatten(arr) {const stack = [...arr];const result = [];while (stack.length) {const next = stack.pop();if (Array.isArray(next)) {stack.push(...next);} else {result.unshift(next);}}return result;
}

8. 使用扩展运算符和递归:

function flatten(arr) {return [].concat(...arr.map(item => Array.isArray(item) ? flatten(item) : item));
}

这些方法都可以将多层嵌套的数组扁平化为一维数组。具体使用哪种方法取决于你的需求和代码环境。

封装

以下是将八种方法封装为各自的函数,并进行调用的示例:

// 1. 使用递归
function flattenByRecursion(arr) {let result = [];function flattenHelper(arr) {for (let i = 0; i < arr.length; i++) {if (Array.isArray(arr[i])) {flattenHelper(arr[i]);} else {result.push(arr[i]);}}}flattenHelper(arr);return result;
}// 2. 使用 reduce 方法
function flattenByReduce(arr) {return arr.reduce((acc, cur) => {return Array.isArray(cur) ? acc.concat(flattenByReduce(cur)) : acc.concat(cur);}, []);
}// 3. 使用扩展运算符
function flattenBySpreadOperator(arr) {while (arr.some(item => Array.isArray(item))) {arr = [].concat(...arr);}return arr;
}// 4. 使用 flat 方法(ES2019)
function flattenByFlat(arr) {return arr.flat(Infinity);
}// 5. 使用 toString 和 split 方法
function flattenByToString(arr) {return arr.toString().split(",").map(item => +item);
}// 6. 使用正则表达式和 JSON 方法
function flattenByRegexAndJSON(arr) {return JSON.parse("[" + JSON.stringify(arr).replace(/\[|\]/g, "") + "]");
}// 7. 使用堆栈
function flattenByStack(arr) {let result = [];let stack = [...arr];while (stack.length) {let next = stack.pop();if (Array.isArray(next)) {stack.push(...next);} else {result.unshift(next);}}return result;
}// 8. 使用扩展运算符和递归
function flattenBySpreadOperatorAndRecursion(arr) {return arr.reduce((acc, cur) => {return Array.isArray(cur) ? [...acc, ...flattenBySpreadOperatorAndRecursion(cur)] : [...acc, cur];}, []);
}// 调用示例
let nestedArray = [1, [2, [3, 4], 5], 6, [7]];
console.log(flattenByRecursion(nestedArray));
console.log(flattenByReduce(nestedArray));
console.log(flattenBySpreadOperator(nestedArray));
console.log(flattenByFlat(nestedArray));
console.log(flattenByToString(nestedArray));
console.log(flattenByRegexAndJSON(nestedArray));
console.log(flattenByStack(nestedArray));
console.log(flattenBySpreadOperatorAndRecursion(nestedArray));

你可以根据需要选择其中的某个方法进行调用,或者根据具体的需求进行修改和优化。

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

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

相关文章

【架构设计】如何设计一个高性能短链系统

一、前言 所谓系统设计&#xff0c;就是给一个场景&#xff0c;让你给出对应的架构设计&#xff0c;需要考虑哪些问题&#xff0c;采用什么方案解决。很多面试官喜欢出这么一道题来考验你的知识广度和逻辑思考能力。 虽然各个系统千差万别&#xff0c;但是设计思想基本一致&a…

【考研复习】24王道数据结构课后习题代码|2.3线性表的链式表示

文章目录 总结01 递归删除结点02 删除结点03 反向输出04 删除最小值05 逆置06 链表递增排序07 删除区间值08 找公共结点09 增序输出链表10 拆分链表--尾插11 拆分链表--头插12 删除相同元素13 合并链表14 生成含有公共元素的链表C15 求并集16 判断子序列17 判断循环链表是否对称…

Android Studio实现刮刮卡效果

代码和刮刮乐图片参考网络 实现效果 MainActivity import android.app.Activity; import android.os.Bundle;public class MainActivity extends Activity {Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentVi…

ruoyi-cloud微服务新建子模块

ruoyi-cloud微服务新建子模块 1、复制system模块 直接复制 modules下面已有的system模块&#xff0c;改名为 test 2、在modules下的 pom.xml文件中添加子模块 3、进入 test模块修改 pom.xml 把原有的system 修改成test 4、修改对应的包名、目录名和启动应用程序为test 5、修…

大学生口才培训需求分析

标题&#xff1a;大学生口才培训需求分析 摘要&#xff1a; 本论文旨在分析大学生口才培训的需求&#xff0c;通过对大学生口才培训的重要性、现状和挑战进行研究&#xff0c;并结合相关理论和实践经验&#xff0c;提出相应的培训需求和解决方案。通过本论文的研究&#xff0c…

介绍另外一个容器技术, Apptainer

一说到容器&#xff0c;我们往往会脱口而出&#xff0c; Docker&#xff0c; 实际上Docker 仅仅是Linux 容器化的一种&#xff0c; 今天介绍的Apptainer 就是另外一种容器技术。 那么Apptainer 具体是一个什么东西呢&#xff1f; 跟Docker 有什么区别呢&#xff1f; 首先&#…

【HarmonyOS】Java如何引用外部jar包

【关键字】 Java、引用jar包​ 【写在前面】 使用API6和API7开发HarmonyOS应用时&#xff0c;因为应用中只能引用SDK中开放的功能接口&#xff0c;但是部分jdk自带的接口功能在SDK中并未封装&#xff0c;要想在工程中使用jdk开放的接口功能&#xff0c;需要将jdk中的jar包通过…

Docker cp(CVE-2019-14271)漏洞复现与分析

安装 metarget安装有点问题&#xff0c;所以我们直接指定安装 可以用下面命令 查看包 apt-cache madison docker-ce 安装 apt-get install -y docker-ce5:19.03.0~3-0~ubuntu-bionic 原理 EXP metarget/writeups_cnv/docker-cve-2019-14271 at master Metarget/metarget G…

【TS第三讲】完善TS开发环境

文章目录 &#x1f31f; 写在前面&#x1f31f; ts-node&#x1f31f; nodemon&#x1f31f; nodemon文件类型&#x1f31f; nodemon文件范围&#x1f31f; 写在最后 &#x1f31f; 写在前面 &#x1f525;探索TypeScript世界&#xff0c;驭Vue3Ts潮流&#xff0c;开启前端之旅…

STM32--综述

文章目录 前言STM32简介STM32F103C8T6系统结构Keil软件安装注意事项新建工程操作流程 前言 本专栏将学习B站江协科技的STM32入门教程&#xff0c;通过自身理解和对老师的总结所写的博客专栏。 STM32简介 STM32是意法半导体&#xff08;STMicroelectronics&#xff09;公司推…

香山处理器跑仿真和跑FPGA两套环境配置过程小结

裸机ubuntu18.04上运行香山处理器&#xff08;南湖&#xff09;make verilog system program problem detected - sudo vi /etc/default/apport sudo apt install tree git cmake curl sudo apt install bison flex sudo apt install verilator sudo apt install default-jr…

intelJ IDEA\PHPStorm \WebStorm\PyCharm 通过ssh连接远程Mysql\Postgresql等数据库

最容易出错的地方是在general面板下的host&#xff0c;不应该填真实的host地址&#xff0c;而应该填localhost或者127.0.0.1 具体操作步骤见下图

Shopify平台Fulfillment业务模块升级

上图是销售订单、发货单与配送之间的关系图&#xff0c;销售订单可以创建多个发货单&#xff0c;多个发货单(不同销售订单)可以合并在一个配送订单进行发货 接口请求错误记录: 1. The api_client does not have the required permission(s). 2. Required parameter missing or…

特殊符号的制作 台风 示例 使用第三方工具 Photoshop 地理信息系统空间分析实验教程 第三版

特殊符号的制作 首先这是一个含有字符的&#xff0c;使用arcgis自带的符号编辑器制作比较困难。所以我们准备采用Adobe Photoshop 来进行制作符号&#xff0c;然后直接导入符号的图片文件作为符号 我们打开ps&#xff0c;根据上面的图片的像素长宽比&#xff0c;设定合适的高度…

FastAPI和Flask:构建RESTful API的比较分析

Python 是一种功能强大的编程语言&#xff0c;广泛应用于 Web 开发领域。FastAPI 和 Flask 是 Python Web 开发中最受欢迎的两个框架。本文将对 FastAPI 和 Flask 进行综合对比&#xff0c;探讨它们在语法和表达能力、生态系统和社区支持、性能和扩展性、开发工具和调试支持、安…

优橙内推黑龙江专场——5G网络优化(中高级)工程师

可加入就业QQ群&#xff1a;801549240 联系老师内推简历投递邮箱&#xff1a;hrictyc.com 内推公司1&#xff1a;中富通集团股份有限公司 内推公司2&#xff1a;北京电旗通讯技术股份有限公司 内推公司3&#xff1a;元道通信股份有限公司 中富通集团股份有限公司 中富通股…

ROS2系统学习番外篇2---用VSCode开发ROS2程序

在ROS2系统学习3—第一个“Hello World”程序—即工作空间创建与包创建中已经介绍了如何创建ROS的工作空间以及包。在开发大型工程时,往往需要在IDE下面进行开发,因此本篇介绍使用VSCode来搭建ROS2开发环境的方法。 首先用VSCode打开ROS2的工作空间。 使用快捷键编译ROS2 …

【springboot项目】在idea中启动报错合集

一、IDEA中报错 “Error running ‘Application‘: Command line is too long.“ 的解决办法 报错详情&#xff1a; Error running Application: Command line is too long.Shorten command line for Application or also for Spring Boot default configuration.报错原因&am…

Linux 目录结构

初学Linux&#xff0c;首先需要弄清Linux 标准目录结构 / root --- 启动Linux时使用的一些核心文件。如操作系统内核、引导程序Grub等。home --- 存储普通用户的个人文件 ftp --- 用户所有服务httpdsambauser1user2bin --- 系统启动时需要的执行文件&#xff08;二进制&#x…

【TypeScript】中关于 { 声明合并 } 的使用及注意事项

概念&#xff1a; 在TS中&#xff0c;如果定义了多个相同命名的函数&#xff0c;接口或者class 类&#xff0c;那么它们会自动合并成一个类型 函数的合并&#xff1a; 前面章节讲解的函数重载就是使用了定义多个函数的类型进行合并&#xff1a; function reverse(x: number):…