【前端学习】—多种方式实现数组拍平(十一)

简介: 【前端学习】—多种方式实现数组拍平(十一)

一、数组拍平

数组拍平也叫数组扁平化、数组拉平、数组降维,指的是把多维数组转化为一维数组。

二、使用场景

复杂场景下的数据处理(echarts做大屏数据展示)

三、如何实现数组拍平

四、代码演示

const array =[1,2,3,4,[5,6],[7,8]];
//reduce实现
function flatten(array){
    return array.reduce(function(prev,current){
        return prev.concat(Array.isArray(current)?flatten(current):current)
    },[])
}
const result=flatten(array);
console.log(`result`,result);//result [1, 2, 3, 4,5, 6, 7, 8]
//flat实现
function flatten(array){
    return array.flat(Infinity);
}
const result1=flatten(array)
console.log(`result1`,result);//result1 [1, 2, 3, 4,5, 6, 7, 8]
//while函数
function flatten(array){
    while(array.some(Array.isArray)){
        array=[].concat(...array)
    }
    return array;
}
const result2=flatten(array);
console.log(result2);// [1, 2, 3, 4,5, 6, 7, 8]


相关文章
|
28天前
|
前端开发 JavaScript 开发者
【前端开发者的福音】彻底改变你编码习惯的神奇数组迭代技巧——从基础到进阶,解锁 JavaScript 数组迭代的N种姿势!
【8月更文挑战第23天】在Web前端开发中,数组是JavaScript中最常用的数据结构之一,掌握高效的数组迭代方法至关重要。本文详细介绍了多种数组迭代技巧:从基础的`for`循环到ES6的`for...of`循环,再到高阶方法如`forEach`、`map`、`filter`、`reduce`及`some`/`every`等。这些方法不仅能提高代码的可读性和维护性,还能有效优化程序性能。通过具体的示例代码,帮助开发者更好地理解和运用这些迭代技术。
25 0
|
1月前
|
前端开发 Java 编译器
【前端学java】如何从前端视角快速学习Maven
【8月更文挑战第12天】如何从前端视角快速学习Maven
40 2
【前端学java】如何从前端视角快速学习Maven
|
1月前
|
存储 前端开发 JavaScript
【前端学java】一篇文章带你精通java 中的数组(10)
【8月更文挑战第10天】一篇文章带你精通java 中的数组
12 3
【前端学java】一篇文章带你精通java 中的数组(10)
|
1月前
|
前端开发 JavaScript API
前端框架Vue------>第二天学习(1)插槽
这篇文章介绍了Vue框架中插槽(slot)的概念和用法,以及如何在组件中使用自定义事件进行父子组件间的通信。
前端框架Vue------>第二天学习(1)插槽
|
1月前
|
JSON 前端开发 JavaScript
前端框架Vue------>第一天学习(3)
这篇文章是关于使用Vue框架进行前端开发的教程,重点介绍了如何使用Axios实现异步通信和表单输入的双向数据绑定。
前端框架Vue------>第一天学习(3)
|
1月前
|
前端开发 JavaScript API
前端框架Vue------>第一天学习(2) v-if
这篇文章介绍了Vue框架中条件渲染的用法,包括`v-if`、`v-else-if`指令的使用,以及列表渲染和事件监听的基本实现。
前端框架Vue------>第一天学习(2) v-if
|
1月前
|
设计模式 JavaScript 前端开发
前端框架Vue------>第一天学习、Vue学习的路径、Vue官网(1)
这篇文章是关于Vue框架的学习指南,涵盖了前端知识体系、MVVM模式、创建第一个Vue程序以及Vue实例的生命周期等基础知识。
前端框架Vue------>第一天学习、Vue学习的路径、Vue官网(1)
|
23天前
|
前端开发 算法 网络协议
如何学习计算机基础知识,打好前端和网络安全的基础
如何学习计算机基础知识,打好前端和网络安全的基础
31 4
|
1月前
|
前端开发 JavaScript
前端网站学习大全
这篇文章提供了前端网站开发学习的资源大全,涵盖了HTML常用标签和CSS常用样式,以及如何使用`<meta>`标签提供页面元信息和`lang`属性定义内容语言等基础知识。
前端网站学习大全
|
1月前
|
前端开发 JavaScript
前端框架Vue------>第三天学习(1)
这篇文章介绍了Vue框架的组件基础和计算属性的概念,通过示例代码展示了如何定义可复用的Vue组件和使用计算属性来声明性地描述依赖其他值的数据。