六种方式实现数组扁平化,总有一个适合你

简介: 扁平化在日常的工作中我们也会经常用到,也是面试时经常考的一道题,今天总结一下常见和不常见的数组扁平化的几种方式数组的扁平化其实就是将一个嵌套多层的数组 array(嵌套可以是任何层数)转换为只有一层的数组。其实就是把多维的数组“拍平”,输出最后的一维数组。

比如现在有一个叫flatten的函数可以实现这个功能,调用它就能实现这样的效果

var arr = [1, [2, [3, 4,5]]];
console.log(flatten(arr)); // [1, 2, 3, 4,5]


01、使用递归实现


普通的递归思路很容易理解,就是通过循环递归的方式,一项一项地去遍历,遍历过程中发现元素还是数组的时候进行递归操作,继续往下遍历,利用递归程序的方法,来实现数组的每一项的连接。

把数组的结果通过数组的 concat 方法拼接到最后要返回的 result 数组上,那么最后输出的结果就是扁平化后的数组。

// 方法1
var arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
    let result = [];
    for(let i = 0; i < arr.length; i++) {
        if(Array.isArray(arr[i])) {
            result = result.concat(flatten(arr[i]));
        } else {
            result.push(arr[i]);
        }
    }
    return result;
}
flatten(arr);  //  [1, 2, 3, 4,5]


02、使用 reduce函数迭代实现


通过递归的方式我们可以发现扁平化的本质就是对数组的每一项进行处理,那么我们也可以利用reduce 来实现数组的拼接,reduce 的第一个参数用来返回最后累加的结果,思路和递归是一样的,只不过使用它之后代码变得更简洁了

var arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
    return arr.reduce(function(prev, next){
        return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
}
console.log(flatten(arr));//  [1, 2, 3, 4,5]


03、使用 扩展运算符实现


采用了扩展运算符和 some 的方法也能达到数组扁平化的目的

可以先用数组的 `some` 方法把数组中仍然是数组的元素过滤出来,然后执行 `concat` 操作,利用 ES6 的展开运算符,将其拼接到原数组中,最后返回原数组
var arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten(arr)); //  [1, 2, 3, 4,5]

上面几种方式都带有递归循环的思路来实现数组扁平化,除此之外还有其他方式能实现数组扁平化


04、使用 splittoString 实现

由于数组会默认带一个 toString 的方法,所以可以把数组直接转换成逗号分隔的字符串,然后再用 split 方法把字符串重新转换为数组

var arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
    return arr.toString().split(',');
}
console.log(flatten(arr)); //  [1, 2, 3, 4,5]
复制代码


05、使用 ES6 中的 flat实现


ES6中有一个flat方法,可以直接实现数组的扁平化

arr.flat([depth])

depth 是 flat 的参数,可传也可以不传;depth 是可以传递数组的展开深度(默认不填、数值是 1),即展开一层数组。数也可以传进 Infinity,代表不论多少层都要展开。

var arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
  return arr.flat(Infinity);
}
console.log(flatten(arr)); //  [1, 2, 3, 4,5]

对数组的嵌套层数不确定的时候,最好直接使用 Infinity


06、使用正则和 JSON 实现


使用JSON.stringify 的方法先把数组转换为字符串,然后通过正则表达式过滤掉字符串中的数组的方括号,最后再利用 JSON.parse 把它转换成数组。

var arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
  let str = JSON.stringify(arr);
  str = str.replace(/(\[|\])/g, '');
  str = '[' + str + ']';
  return JSON.parse(str); 
}
console.log(flatten(arr)); //  [1, 2, 3, 4,5]



目录
相关文章
|
存储 Kubernetes Cloud Native
一文搞懂云原生架构
目前,每个 IT 资源或产品都作为服务提供。而且伴随云计算的滚滚浪潮,云原生(CloudNative)的概念应运而生,云原生很火,火得一塌糊涂,都0202年了,如果还不懂云原生,那真的out了。因此,云原生软件开发成为每个企业的关键要求,无论其规模和性质如何。在加入云计算潮流之前,了解什么是云原生架构以及如何为云原生应用程序需求设计正确的架构非常重要。
一文搞懂云原生架构
|
存储 缓存 前端开发
灵魂拷问-前端的作用--性能优化篇
作者最近在尝试对负责的平台进行性能优化,本文整理了些前端性能优化的一些常见策略。
|
10月前
|
存储 缓存 JavaScript
一文带你了解vuex和使用(2024年11月)
欢迎来到我的博客,我是自学前端两年半的大一学生,熟悉JavaScript与Vue,正向全栈发展。本篇介绍了Vuex,Vue.js的状态管理模式,包括其核心概念如state、getter、mutation、action及模块化使用,通过集中管理状态确保应用状态的可预测变化。文章详细解析了Vuex的工作原理,特别是与Vue的computed属性和响应式系统的集成,以及如何在实际项目中搭建和使用Vuex。如果你觉得有帮助,欢迎关注,我将持续更新更多技术文章。🎉🎉🎉
962 0
技术经验分享:Cascader级联选择器Element的使用和总结
技术经验分享:Cascader级联选择器Element的使用和总结
229 0
|
机器学习/深度学习 存储 算法
NumPy 与 SciPy:Python 科学计算库的比较
【8月更文挑战第30天】
568 5
|
前端开发 数据可视化
前端轮询问题之使用setInterval进行轮询时遇到问题如何解决
前端轮询问题之使用setInterval进行轮询时遇到问题如何解决
319 0
|
小程序 开发者
解决微信小程序因为包太大无法上传:uniapp分包
解决微信小程序因为包太大无法上传:uniapp分包
622 0
|
JavaScript 前端开发
JS的6种继承方式
JS的6种继承方式
144 0
|
JavaScript
type和interface的异同?
type和interface的异同?
351 0
|
SQL Java API
【flink番外篇】1、flink的23种常用算子介绍及详细示例(2)- keyby、reduce和Aggregations
本文主要介绍Flink 的3种常用的operator(keyby、reduce和Aggregations)及以具体可运行示例进行说明
【flink番外篇】1、flink的23种常用算子介绍及详细示例(2)- keyby、reduce和Aggregations