数组中的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] 

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

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

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

相关文章

Centos7 安装postgresql14后无法连接数据库

1、数据库服务器允许外部访问5432端口。 2、postgresql.conf 3、pg_hba.conf a、制定某个IP(192.168.0.107)访问 b、指定ip段访问 允许10.1.1.0~10.1.1.255网段登录数据库 host all all 10.1.1.0/24 trust c、指定全网访问 host a…

高可用篇_A Docker容器化技术_V 基于DockerCompose实现容器编排

原创作者:田超凡(程序员田宝宝) 版权所有,引用请注明原作者,严禁复制转载 Docker Compose Sit pre prd环境 为什么需要使用Docker Compose Docker Compose 容器编排技术 容器编排技术 1.现在我们有一个springbo…

【Godot4.2】任意多边形或折线围绕任意点旋转

概述 在很多绘图软件中,都会有对于任意图形围绕给定的旋转中心旋转的基本操作。本节就基于Godot实现任意多边形(Polygon)或折线(Polyline)绕任意旋转中心(在图形内或外都可以)进行旋转。 基本…

linux 16进制写入

1.简单用法[推荐] echo 001122334455 | xxd -r -ps > test // 6 个字节xxd // xxd 命令用于用二进制或十六进制显示文件的内容 -r // 把xxd的十六进制输出内容转换回原文件的二进制内容 -ps // 以 postscript的连续十六进制转储输出,这也叫做纯十六进…

【Unity】CatlikeCoding SRP

Unity 自定义渲染管线 提示:基于CatlikeCoding SRP系列教程学习 学习链接:SRP 个人测试: Demo 相关记录以后有时间再更:

Acwing-基础算法课笔记之动态规划(线性DP)

Acwing-基础算法课笔记之动态规划(线性DP) 一、数字三角形1、概述2、闫氏dp分析法代码示例 二、最长上升子序列1、概述2、闫氏dp分析法3、过程模拟4、代码演示 三、最长上升子序列强化版1、概述2、代码示例 四、最长公共子序列(LCS&#xff0…

[NCNN学习笔记]-0

1、前言 经过前面对NEON基础的学习,对NEON有了一定的了解, 现在正准备逐步开始学习NCNN,关于NCNN的入门介绍可以参考如下链接。 2 、学习NCNN 下面会逐步学习NCNN中src/layer/arm 文件夹中关于NEON的代码,只提取部分关于NEON的…

JS01-JavaScript基础

JavaScript基础 引入js方式 直接使用 <script>alert("Hello javascript!") </script>引入外部文件 <script src"../js/01.js"></script>数组 let name [甘雨,申鹤,钟离] console.log(name) console.log(name[0])数字类型 let a…

你开发的系统国际化了吗?

亲爱的朋友们&#xff0c;周一好&#xff0c;新的一周&#xff0c;精神满满。 在开发Spring Boot应用时&#xff0c;接口的参数校验是一个重要的环节&#xff0c;它确保了数据的完整性和准确性。而国际化处理则使得应用能够支持多种语言&#xff0c;提升了用户体验。 一、参数…

ev多域名ssl证书2000元一年送一月

多域名SSL证书是一种特殊的数字证书产品。多域名SSL证书可以同时保护多个独立的域名站点&#xff0c;这些域名站点可以是多个主域名、子域名&#xff0c;多域名SSL证书可以为它们提供传输数据加密服务以及身份认证服务。EV多域名SSL证书具有更高的安全性&#xff0c;所以一些金…

蓝桥集训之母亲的牛奶

蓝桥集训之母亲的牛奶 核心思想&#xff1a; 暴搜 bfs/dfs bfs: 将每种情况搜索一遍 #include <cstdio>#include <algorithm>#include <cstring>#include <iostream>using namespace std;const int N 21;int A,B,C;struct Node{int a,b,c;}q[N*N*…

深入了解主播美颜技术:从美颜SDK到实时美颜算法

在当今数字化时代&#xff0c;直播行业蓬勃发展&#xff0c;成为了人们日常生活中不可或缺的一部分。而在直播中&#xff0c;主播的形象对于吸引观众、提升观看体验至关重要。为了呈现更加美好的形象&#xff0c;主播们常常会借助美颜技术。从最初的美颜SDK到如今的实时美颜算法…

PS学习-对象选择抠图,覆盖

之前使用通道抠图抠大树 对象 选择 ctrlj 水平居中 选区羽化 选择加选按住shift&#xff0c;减选按住alt 单个选择按住shift是变正方形&#xff0c;或者椭圆变成圆 覆盖 想把天空都变成白色 选区羽化ctrlj 复制粘贴几个往上放 复制了十来个&#xff0c;遮住就行 首先存储为PS…

二叉搜索树题目:将有序链表转换为二叉搜索树

文章目录 题目标题和出处难度题目描述要求示例数据范围 前言解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;将有序链表转换为二叉搜索树 出处&#xff1a;109. 将有序链表转换为二叉搜索树 难度 5 级 题目描述 要求 …

SPA单页面有哪些优缺点

单页面应用&#xff08;SPA&#xff09;作为一种现代化的Web应用程序架构&#xff0c;在当今互联网时代越来越受到开发者和用户的欢迎。它通过在加载应用程序时只加载一次页面&#xff0c;实现页面内容的动态更新&#xff0c;带来了许多优势和挑战。本文将深入探讨SPA的优点和缺…

【数据库】MySQL表的增删改查

文章目录 一、CRUD二、2. 新增&#xff08;Create&#xff09; 一、CRUD 注释&#xff1a;在SQL中可以使用“–空格描述”来表示注释说明 CRUD 即增加(Create)、查询(Retrieve)、更新(Update)、删除(Delete)四个单词的首字母缩写 二、2. 新增&#xff08;Create&#xff09; …

【kaggle竞赛】从手写图像数据集中正确识别数字

1. 题目&#xff1a; 在本次比赛中&#xff0c;您的目标是从数以万计的手写图像数据集中正确识别数字。 1.1. Goal 目标✨ 本次比赛的目标是拍摄手写个位数的图像&#xff0c;并确定该数字是什么。 对于测试集中的每个标签&#xff0c;您都应该预测正确的标签。 本次比赛的…

SpringCloudLoadBalancer入门与实战系列

目录 一、什么是LoadBalancer&#xff1f; 1.1 负载均衡的分类 1.2 负载均衡策略 二、 为什么要学习 Spring Cloud Balancer &#xff1f; 三、 Spring Cloud LoadBalancer 内置的两种负载均衡策略 3.1 轮询负载均衡策略&#xff08;默认的&#xff09; 3.2 随机负载均衡…

科研学习|研究方法——案例研究方法

目录 1.案例研究的起源 2.案例研究的说服力 2.1 外界质疑 2.1.1 样本数量太小 2.1.2 选择的样本带有偏倚 2.1.3 选择的案例太少 2.1.4 无法验证 2.2 重要作用 2.2.1 激发研究 2.2.2 启发灵感 2.2.3 提供佐证 3.案例研究的内容 4.案例研究质量的评价 5.案例研究的优缺点 6.MI…

wsl or 虚拟机 安装

1.wsl2安装 WSL全称Windows Subsystem for Linux&#xff0c;是微软开发的适用于Linux的Windows子系统 如今已经有两代了&#xff1a; 所以用的多的还是wsl2。 安装前需要先去设置启用或关闭Windows功能&#xff1a; 打开适用于linux的子系统和虚拟机平台。 Microsoft Store里…