前端JavaScript篇之实现一个将多维数组展示的方法有哪些,分别是?

目录

  • 实现一个将多维数组展示的方法有哪些,分别是?
    • 方法一:递归展开成一维数组
    • 方法二:嵌套展示结构
    • 方法三:ES6新增的数组扩展方法 `flat()`
    • 方法四:`apply()` 结合 `concat()` 使用以展开成一维数组
    • 方法五:使用 `reduce()` 结合 `concat()` 方法展开多维数组
    • 方法六:使用递归的方法进行展开
    • 方法七:使用 `toString()` 和 `split(',')` 方法展开多维数组
    • 方法八:使用 `reduce()` 和 `concat()` 方法结合递归展开多维数组
    • 方法九:利用重写原型的另一种方法
    • 方法十:ES6 扩展运算符


实现一个将多维数组展示的方法有哪些,分别是?

方法一:递归展开成一维数组

思路:

  • 创建一个递归函数,负责将多维数组展开成一维数组。
  • 遍历数组元素,对于每个元素,如果是数组则递归展开,否则添加到结果数组中。

详细说明:

function flattenArray(arr) {
  return arr.reduce((result, item) => {
    return result.concat(Array.isArray(item) ? flattenArray(item) : item)
  }, [])
}

// 示例多维数组
const multiDimensionalArray = [1, [2, [3, 4]], [5, 6], [7, [8, 9, [10, 11]]]]

// 展开多维数组并输出结果
console.log(flattenArray(multiDimensionalArray))

参考效果:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

请添加图片描述

方法二:嵌套展示结构

思路:

  • 创建一个递归函数,递归地展示多维数组的层次结构。
  • 使用缩进或其他方式表示数组的层次。

详细说明:

function displayMultiDimensionalArray(arr, depth = 0) {
  let result = ''

  for (let item of arr) {
    result += '  '.repeat(depth)

    if (Array.isArray(item)) {
      result += '[' + displayMultiDimensionalArray(item, depth + 1) + ']'
    } else {
      result += item
    }

    result += '\n'
  }

  return result
}

// 示例多维数组
const multiDimensionalArray = [1, [2, [3, 4]], [5, 6], [7, [8, 9, [10, 11]]]]

// 展示多维数组的层次结构并输出结果
console.log(displayMultiDimensionalArray(multiDimensionalArray))

参考效果:

1
  [2
    [3
      4]
  ]
  [5
    6]
  [7
    [8
      9
      [10
        11]
    ]
  ]

请添加图片描述

方法三:ES6新增的数组扩展方法 flat()

思路:

  • 使用 flat() 方法直接将多维数组展开成一维数组。

详细说明:

// 示例多维数组
const multiDimensionalArray = [1, [2, [3, 4]], [5, 6], [7, [8, 9, [10, 11]]]]

// 使用 flat() 方法展开多维数组并输出结果
console.log(multiDimensionalArray.flat())

参考效果:

[1, 2, [3, 4], 5, 6, 7, [8, 9, [10, 11]]]

请添加图片描述

方法四:apply() 结合 concat() 使用以展开成一维数组

思路:

  • 使用 apply() 方法调用 concat(),结合传递数组作为参数,实现展开。

详细说明:

// 示例多维数组
const multiDimensionalArray = [1, [2, [3, 4]], [5, 6], [7, [8, 9, [10, 11]]]]

// 使用 apply() 结合 concat() 方法展开多维数组并输出结果
console.log([].concat.apply([], multiDimensionalArray))

参考效果:

[1, 2, [3, 4], 5, 6, 7, [8, 9, [10, 11]]]

请添加图片描述

方法五:使用 reduce() 结合 concat() 方法展开多维数组

思路:

  • 使用 reduce() 方法遍历数组,将每个子数组通过 concat() 方法连接起来。

详细说明:

// 示例多维数组
const multiDimensionalArray = [1, [2, [3, 4]], [5, 6], [7, [8, 9, [10, 11]]]]

// 使用 reduce() 结合 concat() 方法展开多维数组并输出结果
const flattenedArray = multiDimensionalArray.reduce((result, current) => result.concat(current), [])
console.log(flattenedArray)

参考效果:

[1, 2, [3, 4], 5, 6, 7, [8, 9, [10, 11]]]

请添加图片描述

方法六:使用递归的方法进行展开

思路:

  • 创建一个递归函数,负责将多维数组展开成一维数组。
  • 遍历数组元素,对于每个元素,如果是数组则递归展开,否则添加到结果数组中。

详细说明:

function flattenArray(arr) {
  return arr.reduce((result, item) => {
    return result.concat(Array.isArray(item) ? flattenArray(item) : item)
  }, [])
}

// 示例多维数组
const multiDimensionalArray = [1, [2, [3, 4]], [5, 6], [7, [8, 9, [10, 11]]]]

// 使用递归方法展开多维数组并输出结果
console.log(flattenArray(multiDimensionalArray))

参考效果:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

请添加图片描述

方法七:使用 toString()split(',') 方法展开多维数组

思路:

  • 使用 toString() 将数组转换成逗号分隔的字符串。
  • 使用 split(',') 将字符串按逗号分割成数组。

详细说明:

// 示例多维数组
const multiDimensionalArray = [1, [2, [3, 4]], [5, 6], [7, [8, 9, [10, 11]]]];

// 使用 toString() 和 split(',') 方法展开多维数组并输出结果
const flattenedArray = multiDimensionalArray.toString().split(',').map(item => +item || item);
console.log(flattenedArray);

参考效果:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

请添加图片描述

方法八:使用 reduce()concat() 方法结合递归展开多维数组

思路:

  • 使用 reduce() 方法遍历数组,对每个元素进行判断,如果是数组则递归展开,否则直接添加到结果数组中。

详细说明:

// 示例多维数组
const multiDimensionalArray = [1, [2, [3, 4]], [5, 6], [7, [8, 9, [10, 11]]]]

// 使用 reduce() 和 concat() 方法结合递归展开多维数组并输出结果
const flattenArray = arr => arr.reduce((result, item) => result.concat(Array.isArray(item) ? flattenArray(item) : item), [])
console.log(flattenArray(multiDimensionalArray))

参考效果:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

请添加图片描述

方法九:利用重写原型的另一种方法

思路:

  • 通过重写数组原型,在原型上添加 flatten() 方法。
  • flatten() 方法中,使用 reduce() 方法遍历数组,递归地将多维数组展开。

详细说明:

// 重写数组原型添加 flatten 方法
Array.prototype.flatten = function () {
  return this.reduce((result, item) => result.concat(Array.isArray(item) ? item.flatten() : item), [])
}

// 示例多维数组
const multiDimensionalArray = [1, [2, [3, 4]], [5, 6], [7, [8, 9, [10, 11]]]]

// 使用重写原型的方法展开多维数组并输出结果
console.log(multiDimensionalArray.flatten())

参考效果:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

请添加图片描述

方法十:ES6 扩展运算符

思路:

  • 使用 ES6 扩展运算符 ...,结合递归,逐层展开多维数组。

详细说明:

// 示例多维数组
const multiDimensionalArray = [1, [2, [3, 4]], [5, 6], [7, [8, 9, [10, 11]]]]

// 使用 ES6 扩展运算符展开多维数组并输出结果
const flattenArray = arr => [].concat(...arr.map(item => (Array.isArray(item) ? flattenArray(item) : item)))

console.log(flattenArray(multiDimensionalArray))

参考效果:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

这些方法都能够方便地展开多维数组,可以根据个人偏好选择使用。

持续学习总结记录中,回顾一下上面的内容:
实现一个将多维数组展示的方法有哪些,分别是?
方法一:递归展开成一维数组
方法二:嵌套展示结构
方法三:ES6新增的数组扩展方法 flat()
方法四:apply() 结合 concat() 使用以展开成一维数组
方法五:使用 reduce() 结合 concat() 方法展开多维数组
方法六:使用递归的方法进行展开
方法七:使用 toString()split(',') 方法展开多维数组
方法九:利用重写原型的另一种方法
方法十:ES6 扩展运算符

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

快速排序|超详细讲解|入门深入学习排序算法

快速排序介绍 快速排序(Quick Sort)使用分治法策略。 它的基本思想是:选择一个基准数,通过一趟排序将要排序的数据分割成独立的两部分;其中一部分的所有数据都比另外一部分的所有数据都要小。然后,再按此方法对这两部分数据分别进…

低密度奇偶校验码LDPC(五)——译码算法概述

一、译码算法概述 二、置信传播原理 Bayesian点兵问题 Turbo原理

【CSS3】flex布局实践篇 | 7种常见网页布局方案

1、垂直居中 垂直居中一度是前端面试时必问知识点。 目前的垂直解决方案 使用了 从负外边距 到 display:table-cell 等荒谬的奇技淫巧,包括全高的伪元素。这些方法是又复杂又难写。 不知道大家第一次使用flex布局做什么,反正我是用来做垂直居中&#xf…

2023 IoTDB Summit:华润电力技术研究院副院长郭为民《新型时序数据库在智能发电领域的应用探索与展望》...

12 月 3 日,2023 IoTDB 用户大会在北京成功举行,收获强烈反响。本次峰会汇集了超 20 位大咖嘉宾带来工业互联网行业、技术、应用方向的精彩议题,多位学术泰斗、企业代表、开发者,深度分享了工业物联网时序数据库 IoTDB 的技术创新…

【python】在python中使用单元测试unittest

在python中使用单元测试unittest 大家好,欢迎来到我的技术乐园!今天,我们将一起踏入Python单元测试的奇妙旅程,探索这个让我们的代码更可靠、更强壮的令人愉快的世界。 前言:为什么单元测试如此重要? 在我…

分布式搜索引擎_学习笔记_2

分布式搜索引擎_学习笔记_2 在昨天的学习中,我们已经导入了大量数据到elasticsearch中,实现了elasticsearch的数据存储功能。但elasticsearch最擅长的还是搜索和数据分析。 所以今天,我们研究下elasticsearch的数据搜索功能。我们会分别使用…

探索微服务治理:从发展到实践构建高效稳定的系统|服务注册与发现技术解析

随着软件行业的不断发展,微服务架构凭借其高度的灵活性、可扩展性和可维护性,逐渐成为企业应用的主流架构风格。然后微服务架构的复杂性也带来了一系列的挑战,其中之一就是如何有效地管理和治理微服务。本文灸哥给你详细介绍和服务治理相关的…

Python笔记(二)—— Python判断语句

2.1 布尔类型和比较运算符 布尔类型用于表示:真和假 比较运算符用于计算:真和假 1. 布尔(bool)表示现实生活中的逻辑,即真和假 True表示真False表示假 True本质上是一个数字记作1,False记作0 定义变…

检测CUDA 是否能访问GPU时回应速度慢【笔记】

SUPWEMICRO 418G-Q20X12 维护记录: 两台设备均已安装CUDA与Pytorch,在检测CUDA 是否能访问GPU,执行torch.cuda.is_available()命令时,一台设备速度秒回应True,但另外一台设备回应速度慢(1分钟左右&#xff…

【HarmonyOS应用开发】ArkUI 开发框架-进阶篇-管理组件状态(九)

管理组件状态 一、概述 在应用中,界面通常都是动态的。下图所示,在子目标列表中,当用户点击目标一,目标一会呈现展开状态,再次点击目标一,目标一呈现收起状态。界面会根据不同的状态展示不一样的效果。 Ar…

Linux一些实用操作

学习笔记,记录以下课程中关于Linux的一些实用操作。黑马程序员新版Linux零基础快速入门到精通,全涵盖linux系统知识、常用软件环境部署、Shell脚本、云平台实践、大数据集群项目实战等_哔哩哔哩_bilibili 目录 1 各类小技巧(快捷键&#xff…

【RT-DETR有效改进】 利用Damo-YOLO的RepGFPN改进特征融合层(高效重参数化Neck)

👑欢迎大家订阅本专栏,一起学习RT-DETR👑 一、本文介绍 本文给大家带来的改进机制是Damo-YOLO的RepGFPN(重参数化泛化特征金字塔网络),利用其优化RT-DETR的Neck部分,可以在不影响计算量的同时大幅度涨点(亲测在小目标和大目标检测的数据集上效果均表现良好涨点幅…

gitlab-runner注册到gitlab时报错:ERROR: Registering runner... failed xxxxxxxx

天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。…

【Java】Springboot入门

学习目标 基于SpringBoot框架的程序开发步骤 熟练使用SpringBoot配置信息修改服务器配置 基于SpringBoot的完成SSM整合项目开发 一、SpringBoot简介 1. 入门案例 问题导入 SpringMVC的HelloWord程序大家还记得吗? SpringBoot是由Pivotal团队提供的全新框架&…

STM32低功耗模式

一、低功耗模式介绍 STM32 的低功耗模式有 3 种: 1)睡眠模式(CM3 内核停止,外设仍然运行) 2)停止模式(所有时钟都停止) 3)待机模式(1.8V 内核电源关闭) 在这三种低功耗模式中&#…

摄影分享|基于Springboot的摄影分享网站设计与实现(源码+数据库+文档)

摄影分享网站目录 目录 基于Springboot的摄影分享网站设计与实现 一、前言 二、系统功能设计 三、系统实现 1、用户信息管理 2、图片素材管理 3、视频素材管理 4、公告信息管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐…

Unity_Timeline使用说明

Unity_Timeline使用说明 首先要找到工具吧?Unity2023.1.19f1c1打开如下: (团结引擎没找见哪儿打开,可能是引擎问题吧?有知道的同学可以告诉我在哪儿打开) Timelime使用流程: 打开之后会提示您…

全流程机器视觉工程开发(四)PaddleDetection C++工程化应用部署到本地DLL以供软件调用

前言 我们之前跑了一个yolo的模型,然后我们通过PaddleDetection的库对这个模型进行了一定程度的调用,但是那个调用还是基于命令的调用,这样的库首先第一个不能部署到客户的电脑上,第二个用起来也非常不方便,那么我们可…

node.js(nest.js控制器)学习笔记

nest.js控制器: 控制器负责处理传入请求并向客户端返回响应。 为了创建基本控制器,我们使用类和装饰器。装饰器将类与所需的元数据相关联,并使 Nest 能够创建路由映射(将请求绑定到相应的控制器)。 1.获取get请求传参…

什么可以用手机蓝牙控制LED???#串口通信【下】

什么可以用手机蓝牙控制LED???#串口通信【下】 前言预备知识1.小白玩串口控制的ASSII避坑1.1问题引入1.2解决问题 2.串口支持单词型指令控制2.1实现串口支持单词型指令控制的核心思路2.2利用字符数组来承接单词型指令2.3利用strstr函数来查找…