数组中的flat方法如何实现

2024-03-19 06:52
文章标签 实现 数组 方法 flat

本文主要是介绍数组中的flat方法如何实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

那flat怎么来实现呢?

1、使用while循环

实现的代码如下:

        // 实现数组中的flat拉平函数let arr = [20, [6, 7, 8], [2, [9, 10]], 17]const flatten = function (arr) {while (arr.some(v => Array.isArray(v))) {arr = [].concat(...arr)}return arr;}console.log(flatten(arr)) // [20, 6, 7, 8, 2, 9, 10, 17]

2、使用数组中的map方法

        // 实现数组中的flat拉平函数let arr = [20, [6, 7, 8], [2, [9, 10]], 17]const flatten = function (arr) {return [].concat(...arr.map(v => Array.isArray(v) ? flatten(v) : v))}console.log(flatten(arr)) // [20, 6, 7, 8, 2, 9, 10, 17]

关于第二种方法的理解 最后的是

[].concat(...[20, [6, 7, 8], [2, 9, 10], 17]) // [20, 6, 7, 8, 2, 9, 10, 17]

扩展运算符会展开数组,相当于拉平一级。
concat方法合并数组,是往新数组中添加的数组成员,例如,[].concat(…[20, [6, 7, 8]])相当于[].concat(20, [6, 7, 8]),往[]这个空数组中添加的是数字20和[6, 7, 8]这个数组的成员6、7、8,所以[].concat(…[20, [6, 7, 8]])就相当于拉平了数组。

在用第二种方法时,我刚开始是有些不理解的,不过我推理了一下,确实是对的,其中的关键点在于递归调用、concat方法和扩展运算符的应用

最后,我们看一下concat的用法,
concat()方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
注意:合并的时候,添加的是数组成员,一定要谨记,如果不是数组,也当做成员,一起添加到新数组中。

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [7,8,9];
let num = 10;console.log(arr1.concat(arr2,arr3,num)); // [1,2,3,4,5,6,7,8,9,10]

我们再看一下这个例子:

let arr1 = [1,[2,3]];
let num = 10;console.log([].concat(arr1,num)); // [1,[2,3],10]console.log([].concat(...arr1,num)); // [1,2,3,10] 

可以看到因为使用了扩展运算符,所以最后打印的结果是不一样的。

这篇关于数组中的flat方法如何实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/825136

相关文章

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

Java进行日期解析与格式化的实现代码

《Java进行日期解析与格式化的实现代码》使用Java搭配ApacheCommonsLang3和Natty库,可以实现灵活高效的日期解析与格式化,本文将通过相关示例为大家讲讲具体的实践操作,需要的可以... 目录一、背景二、依赖介绍1. Apache Commons Lang32. Natty三、核心实现代

SpringBoot实现接口数据加解密的三种实战方案

《SpringBoot实现接口数据加解密的三种实战方案》在金融支付、用户隐私信息传输等场景中,接口数据若以明文传输,极易被中间人攻击窃取,SpringBoot提供了多种优雅的加解密实现方案,本文将从原... 目录一、为什么需要接口数据加解密?二、核心加解密算法选择1. 对称加密(AES)2. 非对称加密(R

基于Go语言实现Base62编码的三种方式以及对比分析

《基于Go语言实现Base62编码的三种方式以及对比分析》Base62编码是一种在字符编码中使用62个字符的编码方式,在计算机科学中,,Go语言是一种静态类型、编译型语言,它由Google开发并开源,... 目录一、标准库现状与解决方案1. 标准库对比表2. 解决方案完整实现代码(含边界处理)二、关键实现细

python通过curl实现访问deepseek的API

《python通过curl实现访问deepseek的API》这篇文章主要为大家详细介绍了python如何通过curl实现访问deepseek的API,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编... API申请和充值下面是deepeek的API网站https://platform.deepsee

SpringBoot实现二维码生成的详细步骤与完整代码

《SpringBoot实现二维码生成的详细步骤与完整代码》如今,二维码的应用场景非常广泛,从支付到信息分享,二维码都扮演着重要角色,SpringBoot是一个非常流行的Java基于Spring框架的微... 目录一、环境搭建二、创建 Spring Boot 项目三、引入二维码生成依赖四、编写二维码生成代码五

Oracle 通过 ROWID 批量更新表的方法

《Oracle通过ROWID批量更新表的方法》在Oracle数据库中,使用ROWID进行批量更新是一种高效的更新方法,因为它直接定位到物理行位置,避免了通过索引查找的开销,下面给大家介绍Orac... 目录oracle 通过 ROWID 批量更新表ROWID 基本概念性能优化建议性能UoTrFPH优化建议注

Pandas进行周期与时间戳转换的方法

《Pandas进行周期与时间戳转换的方法》本教程将深入讲解如何在pandas中使用to_period()和to_timestamp()方法,完成时间戳与周期之间的转换,并结合实际应用场景展示这些方法的... 目录to_period() 时间戳转周期基本操作应用示例to_timestamp() 周期转时间戳基

MyBatisX逆向工程的实现示例

《MyBatisX逆向工程的实现示例》本文主要介绍了MyBatisX逆向工程的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录逆向工程准备好数据库、表安装MyBATisX插件项目连接数据库引入依赖pom.XML生成实体类、

在 PyQt 加载 UI 三种常见方法

《在PyQt加载UI三种常见方法》在PyQt中,加载UI文件通常指的是使用QtDesigner设计的.ui文件,并将其转换为Python代码,以便在PyQt应用程序中使用,这篇文章给大家介绍在... 目录方法一:使用 uic 模块动态加载 (不推荐用于大型项目)方法二:将 UI 文件编译为 python 模