JS 数组拍平(多种方法)

news2024/12/29 9:23:46

前言

数组拍平(扁平化数组)是面试中常考查的知识点,之前发过一篇基础版的数组拍平 传送门

通过之后的学习,又了解了一些其他的数组拍平的操作,详情请看下面的文章


flat

flat 方法可以直接用于数组拍平,不传入参数时默认拍平一层
const arr = ["1", ["2", "3"], ["4", ["5", ["6"]], "7"]];
 
// 不传参数时,默认“拉平”一层
arr.flat(); // ["1", "2", "3", "4", ["5", ["6"]], "7"]
传入一个整数参数,整数即“拉平”的层数
传入 <=0 的整数将返回原数组,不“拉平”
Infinity 关键字作为参数时,无论多少层嵌套,都会转为一维数组
const arr = [1, [2, 3], [4, [5, [6]], 7]];
// 传入一个整数参数,整数即“拉平”的层数
arr.flat(2);
// [1, 2, 3, 4, 5, [6], 7]
 
// 传入 <=0 的整数将返回原数组,不“拉平”
arr.flat(0);
arr.flat(-10);
// [1, [2, 3], [4, [5, [6]], 7]];

// Infinity 关键字作为参数时,无论多少层嵌套,都会转为一维数组
arr.flat(Infinity);
// [", 2, 3, 4, 5, 6, 7]
如果原数组有空位,flat()方法会跳过空位。

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

toString

toString 方法是一个比较简单的方法,他是把数组每个元素转化成字符串之后直接拍平
然后通过 map 遍历每个元素,让其变成 Number 类型
const arr = [1, [2, 3], [4, [5, [6]], 7]];
arr.toString();
arr.toString().split(',');
arr.toString().split(',').map(item) => Number(item);


join

join 的操作和 toString 类似,最后也要通过 map 遍历每个元素,让其变成 Number 类型
const arr = [1, [2, 3], [4, [5, [6]], 7]];
arr.join();
arr.join().split(',');
arr.join().split(',').map(item) => Number(item);


+1

这个方法比较奇怪,应该是arr ‘+1’后转换为string类型的话会自动排平
let a = [1, 2, [3, [4, 5]]] + '1'

let a = [1, 2, [3, [4, 5]]] + ',1'


手写代码

简单数组拍平

在 ES2019 之前,可通过 reduce + concat 实现
由于 Array.prototype.concat 既可以连接数组又可以连接单项,十分巧妙
const flatten = (list) => list.reduce((a, b) => a.concat(b), []);

一个更简单的实现方式是 Array.prototype.concat 与 ... 运算符
const flatten = (list) => [].concat(...list);

深层数组拍平

如果要求深层数组打平,可以加一个判断,递归 调用函数
const flatten = (list) =>
  list.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);

优化上面的代码,加上自定义拍平的层数,默认为 1
function flatten(list, depth = 1) {
  if (depth === 0) return list;
  return list.reduce(
    (a, b) => a.concat(Array.isArray(b) ? flatten(b, depth - 1) : b),
    []
  );
}

文章如有错误,恳请大家提出问题,本人不胜感激 。 不懂的地方可以评论,我都会 一 一 回复

文章对大家有帮助的话,希望大家能动手点赞鼓励,大家未来一起努力 长路漫漫,道阻且长

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

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

相关文章

Elasticsearch集群搭建、优化及实践

文章目录一、Elasticsearch集群1、Elasticsearch集群概念2、Elasticsearch集群安装3、安装Kibana4、测试集群状态二、Elasticsearch优化1、磁盘选择2、分片策略3、内存设置三、Elasticsearch实践1、ES自动补全2、创建索引3、安装logstash导入数据4、项目搭建5、自动补全功能6、…

nginx七大核心应用场景详解 解决生产中的实际问题 二次开发扩展

nginx七大核心应用场景详解 & 解决生产中的实际问题1、nginx的安装与简单配置1.1、环境准备1.2、nginx基本操作指令&#xff1a;1.3、安装成系统服务1.4、conf 配置文件说明2、虚拟主机2.1、nginx多主机配置2.2、二级域名与短网址解析3、基于反向代理的负载均衡3.1、跳转到…

【Mysql索引】五种索引类型

目录前期准备实操实战主键索引 primary唯一索引 unique执行效果普通索引 noraml执行效果全文索引 fulltext执行效果组合索引执行效果前期准备 创建一个表&#xff0c;如果有测试的表也可以用&#xff08;把主键id设置为自增&#xff09;如果给字段添加的值有中文&#xff0c;需…

vercel和netlify部署代码并解决接口代理转发的问题(和Nginx功能一样)

前言 部署过程就不说了,部署完成后是这样子的 然后访问链接,无法访问 解决 依次点击 Settings–>Domains&#xff0c;在输入框中输入你的域名并点击 Add 按钮。 以此域名为例子demo.gshopfront.dreamlove.top为例,点击添加 我们前往域名管理系统,记录下绿色的值以腾讯云的…

Android Surface 分析+源码

Surface的创建涉及三个部分&#xff1a; App 进程 App需要将自己的内容显示在屏幕上&#xff0c;所以App负责发起Surface创建请求&#xff0c;创建好Surface后, 就可以直接可以在canvas上画图等&#xff0c;最终都会保存到Surface里的buffer里&#xff0c;最后由SurfaceFlinge…

使用docker搭建WordPress博客

文章目录一、前置条件二、拉取镜像三、安装工具及依赖1.安装2.升级pip3.获取docker-compose方法一另一种方法&#xff08;推荐&#xff09;四、创建容器&#xff0c;启用镜像&#xff0c;映射端口五、访问并设置一、前置条件 主机&#xff1a;20.0.0.142 安装docker docker的安…

SQL-刷题技巧-删除重复记录

一. 原题呈现 牛客 SQL236. 删除emp_no重复的记录&#xff0c;只保留最小的id对应的记录。 描述&#xff1a; 删除emp_no重复的记录&#xff0c;只保留最小的id对应的记录。 drop table if exists titles_test; CREATE TABLE titles_test (id int(11) not null primary key…

Matlab论文插图绘制模板第80期—羽状图(Feather)

在之前的文章中&#xff0c;分享了很多Matlab线图的绘制模板&#xff1a; 进一步&#xff0c;再来分享一种特殊的线图&#xff1a;羽状图。 先来看一下成品效果&#xff1a; 特别提示&#xff1a;Matlab论文插图绘制模板系列&#xff0c;旨在降低大家使用Matlab进行科研绘图的…

2.2 分治法的基本思想

分治法的基本思想是将一个规模为n的问题分解为化个规模较小的子问题&#xff0c;这些子问题互相独立且与原问题相同。递归地解这些子问题&#xff0c;然后将各子问题的解合并得到原问题的解。它的一般的算法设计模式如下&#xff1a;divide-and-conquer(P) { if ( P < no) a…

SRS4.0 源码分析- RTC模块相关类

前言 本文介绍SRS4.0涉及RTC模块的C类&#xff0c;主要包括RTC Server和Session相关的。 SrsGoApiRtcPlay 处理webrtc client的播放请求&#xff0c;解析client的offer&#xff0c;并且生成server的answer&#xff0c;并且为这次请求创建一个session。SrsRtcServer 监听udp端…

如何实现沉浸式旅游与非物质文化遗产的共同发展

中国非物质文化遗产资源丰富&#xff0c;是世界上非物质文化遗产数量最多的国家。丰富多样的资源为非物质文化遗产旅游业的建设提供了良好的基础。非物质文化遗产旅游是基于非物质文化遗产资源开发的文化旅游消费形式。文化资源包括各民族代代相传的传统文化表现形式。非物质文…

【面试题】Vue面试题整理

1. v-show 和 v-if 的区别&#xff1f; v-if 指令用于条件渲染&#xff0c;它会根据表达式的值的真假来决定是否渲染元素。如果表达式的值为 false&#xff0c;则该元素不会被渲染并且也不会保留在 DOM 中。v-show 指令用于条件展示&#xff0c;它不会从 DOM 中删除元素&#…

Windows openssl-1.1.1d vs2017编译

工具&#xff1a; 1. perl&#xff08;https://strawberryperl.com/&#xff09; 2. nasm&#xff08;https://nasm.us/&#xff09; 3. openssl源码&#xff08;https://www.openssl.org/&#xff09; 可以自己去下载 或者我的网盘提供下载&#xff1a; 链接&#xff1a;…

Redis List 底层三种数据结构原理剖析

1. Redis List 是什么作为 Java 开发者的你&#xff0c;看到这个词并不陌生。在 Java 开发中几乎每天都会使用这个数据结构。Redis 的 List 与 Java 中的 LinkedList 类似&#xff0c;是一种线性的有序结构&#xff0c;可以按照元素被推入列表中的顺序来存储元素&#xff0c;能…

2023年第九周总周结 | 开学第一周

为什么要做周总结&#xff1f; 1.避免跳相似的坑 2.客观了解上周学习进度并反思&#xff0c;制定可完成的下周规划 一、上周问题解决情况 不满却又喜欢“受害者”身份项目导向学习进展困难&#xff0c;进而产生挫败焦虑作息调整→学习时长变少and变碎 二、这周存在问题 and 反…

Tomcat 配置文件数据库密码加密

几年前研究过Tomcat context.xml 中数据库密码改为密文的内容&#xff0c;因为当时在客户云桌面代码没有留备份也没有文章记录&#xff0c;最近项目又提出了这个需求就又重新拾起来学习一下。在网上找了一些资料&#xff0c;自己也大概试了一下&#xff0c;目前功能是实现了。参…

SpringCloud系列(十五)[分布式搜索引擎篇] - 结合实际应用场景学习并使用 RestClient 客户端 API

前面的文章具体介绍了是索引库及文档的一些基本操作指令, 指令还是挺简单的; 那么实际应用场景下, 我们是如何操作 ElasticSearch 的呢?  其实 ElasticSearch 官方已经为我们提供了各种不同语言的客户端, 目的就是为了来操作 ElasticSearch, 这些客户端的本质就是组装 DSL 语…

vmware虚拟机与树莓派4B安装ubuntu1804 + ros遇到的问题

如题所示&#xff0c;本人在虚拟机上安装ubuntu1804&#xff0c;可以很容易安装&#xff0c;并且更换系统apt源和ros源&#xff0c;然后安装ros&#xff0c;非常顺利&#xff0c;但是在树莓派4B上安装raspiberry系统就遇到了好多问题。 树莓派我烧录的是这个镜像&#xff1a;ub…

ASO优化之选择最佳关键词

ASO的关键字排名是指针对特定的关键词在应用商店搜索结果中所形成的位置。虽然这看起来很简单&#xff0c;但应用商店排名不仅仅是位置&#xff0c;应用的排名统计数据都要考虑进去。 应用商店搜索结果因国家/地区而异&#xff0c;这就意味着如果我们从不同的国家或地区进行搜…

经典文献阅读之--Lifelong SLAM(变化环境中Lifelong定位建图)

0. 简介 商场、超市等大多数现实场景的环境随时都在变化。不考虑这些变化的预建地图很容易变得过时。因此&#xff0c;有必要拥有一个最新的环境模型&#xff0c;以促进机器人的长期运行。为此《A General Framework for Lifelong Localization and Mapping in Changing Envir…