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

数组中的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方法如何实现

数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。 [1, 2, [3, 4]].flat() // [1, 2, 3, 4]那flat怎么来实现呢? 1、使用while循环 实现的代码…...

计算机考研|北航北理北邮怎么选?

北航985,北理985,北邮211 虽然北邮事211,但是北邮的计算机实力一点也不弱,学科评级,计算机是A 北航计算机评级也是A,北理的计算机评级是A- 所以,这三所学校在实力上来说,真的大差…...

面试算法-52-对称二叉树

题目 给你一个二叉树的根节点 root , 检查它是否轴对称。 示例 1: 输入:root [1,2,2,3,4,4,3] 输出:true 解 class Solution {public boolean isSymmetric(TreeNode root) {return dfs(root, root);}public boolean dfs(Tr…...

独立维基和验收测试框架 Fitnesse 入门介绍

拓展阅读 junit5 系列教程 基于 junit5 实现 junitperf 源码分析 Auto generate mock data for java test.(便于 Java 测试自动生成对象信息) Junit performance rely on junit5 and jdk8.(java 性能测试框架。压测测试报告生成。) Fitnesse 完全集成的独立维基和验收测试…...

AI 初创公司趋势:Y Combinator 最新批次的见解

总部位于硅谷的著名创业加速器 Y Combinator (YC) 最近宣布了其 2023 年冬季队列,不出所料,约 31% 的初创公司(269 家中有 80 家)拥有自我报告的 AI 标签。在这篇文章中,我分析了这批 20-25 家初创公司,以了…...

tts语音合成原理

TTS(Text-to-Speech,文本到语音)语音合成技术是一种将文本数据转换为可听见的语音输出的技术。它允许计算机和其他电子设备读出文字信息,使得用户可以通过听的方式接收信息。TTS技术在无障碍服务、智能助手、语音导航、有声读物等…...

轮转数组题解

链接:189. 轮转数组 - 力扣(LeetCode) 这个题目很简单,因为说到了 k 是一个非负数,那么我们就可以 求模的时候就不用考虑的下标还会越界了,往右边 移动 其实就是当前下标 ik ,为了保证它能头尾相接并且不越…...

sqllab第二十四关通关笔记

知识点: 二次注入 先埋一个炸弹,然后通过其他路径引爆它 查看界面发现是一个登录框,尝试进行登录框的注入发现这里不存在注入点 那么就注册一个新的账户吧 通过点击注册,进入注册面板,注册一个新的账户 用户名为 re…...

web前端之多行文本擦除效果、文本逐个显示或展示、创建元素标签、querySelector、createElement、appendChild、requestAnimationFrame

MENU 版本一(requestAnimationFrame)版本二(setTimeout)版本三(css) 版本一(requestAnimationFrame) 前言 window.requestAnimationFrame()告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数…...

一文解读ISO26262安全标准:功能安全管理

一文解读ISO26262安全标准:功能安全管理 1 安全生命周期1.1 概念阶段1.2 产品开发阶段1.3 生产发布后续阶段 2 安全管理的角色和职责3 安全活动的裁剪4 安全活动的评审5 安全活动的评估6 交付物 下文的表中,一些方法的推荐等级说明: “”表示…...

【华为OD机试】找座位【C卷|100分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 在一个大型体育场内举办了一场大型活动,由于疫情防控的需要, 要求每位观众的必须间隔至少一个空位才允许落座。 现在给出一排观众座位分布图,座位中存在已落座的观众,请计算出, 在不移…...

LarkXR上新了 | Apollo多终端与XR体验的优化创新

作为领先的数字平行世界产品技术提供方,「Paraverse平行云」一直致力于为企业和开发者提供企业级实时云渲染解决方案。其多终端接入产品LarkXR Apollo,基于底层Runtime技术,实现了在Windows、Linux、MacOS、Android、iOS等多种操作系统下&…...

车载电子电器架构 - 网络拓扑

车载电子电器架构 - 网络拓扑 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师 (Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 本就是小人物,输了就是输了,不要在意别人怎么看自己。江湖一碗茶,喝完再挣扎,出门靠…...

2024蓝桥杯每日一题(DFS)

备战2024年蓝桥杯 -- 每日一题 Python大学A组 试题一:奶牛选美 试题二:树的重心 试题三:大臣的差旅费 试题四:扫雷 试题一:奶牛选美 【题目描述】 听说最近两斑点的奶牛最受欢迎,…...

Docker 笔记(五)--链接

这篇笔记记录了Docker 的Link。 官方文档: Legacy container links - Communication across links 目录 参考Legacy container linksConnect using network port mappingConnect with the linking systemThe importance of naming Communication across linksEnviro…...

如何处理Android悬浮弹窗双击返回事件?

目录 1 前言 1.1 准备知识 1.2 问题概述 2 解决方案 3 代码部分 3.1 动态更新窗口焦点 3.2 窗口监听返回事件 3.3 判断焦点是否在窗口内部 3.4 窗口监听焦点移入/移出 4 注意事项 4.1 窗口范围 4.2 空隙处的返回事件处理 1 前言 1.1 准备知识 1)开发环…...

高可用篇_A Docker容器化技术_II Docker环境搭建和常见命令

原创作者:田超凡(程序员田宝宝) 版权所有,引用请注明原作者,严禁复制转载 Docker安装 Docker 要求 CentOS7 系统的内核版本在 3.10以上 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker 。 …...

Vue.js+SpringBoot开发食品生产管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 加工厂管理模块2.2 客户管理模块2.3 食品管理模块2.4 生产销售订单管理模块2.5 系统管理模块2.6 其他管理模块 三、系统展示四、核心代码4.1 查询食品4.2 查询加工厂4.3 新增生产订单4.4 新增销售订单4.5 查询客户 五、…...

Python面试笔记

Python面试笔记 PythonQ. Python中可变数据类型与不可变数据类型,浅拷贝与深拷贝详解Q. 解释什么是lambda函数?它有什么好处?Q. 什么是装饰器?Q. 什么是Python的垃圾回收机制?Q. Python内置函数dir的用法?Q…...

springboot 查看和修改内置 tomcat 版本

解析Spring Boot父级依赖 去到项目的根pom文件中&#xff0c;找到parent依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>${springboot.version}…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...