JS数组扁平化的方法合集(递归,while循环,flat)

 更新时间:2024年06月25日 08:24:47   作者:星辰中的维纳斯  
数组扁平化也是面试常考题之一,今天就和大家简单分享一下常见的数组扁平方法,这题其实主要考察的是递归思想,因为当数组里面嵌套非常多层数组的时候只能通过循环递归来进行扁平,本次分享主要也是分享本题的递归思想,需要的朋友可以参考下

前言

数组扁平化也是面试常考题之一,今天就和大家简单分享一下常见的数组扁平方法。这题其实主要考察的是递归思想,因为当数组里面嵌套非常多层数组的时候只能通过循环递归来进行扁平。本次分享主要也是分享本题的递归思想。话不多说,开始分享!

flat() 方法

第一个方法那必须是js自带的方法,flat 是 JavaScript 中 Array 对象的一个方法,它用于将多维数组扁平化,即把一个嵌套多层的数组转换为只有一层的数组。这个方法是在 ECMAScript 2019 (ES10) 中引入的。
flat 方法可以接受一个可选的参数 depth,用来指定扁平化的深度。

  • 不传参数或传 1 时,默认扁平化第一层嵌套数组。
  • 传入数字 n 表示将数组扁平化到第 n 层深度。
  • 如果传入 Infinity 作为参数,那么不管嵌套多深,都会被扁平化为一维数组。

下面是一些示例

let arr = [1,[2,[3,[4,5]]]];
// 只会扁平化一层
console.log(arr.flat(1));//[1,2,[3,[4,5]]]
// 扁平化两层
console.log(arr.flat(2));//[1,2,3,[4,5]]
// 全部扁平化
console.log(arr.flat(Infinity));//[1,2,3,4,5]

toString()方法

一个冷知识,数组的toString方法会把元素以逗号分隔,意思是无论你嵌套多少层,toString方法都能给你变成逗号分隔,刚好满足我们的要求扁平数组。

let arr = [1,[2,[3,[4,5]]]];
//toString方法变成字符串
console.log(arr.toString());//'1,2,3,4,5'
arr = arr.toString().split(",").map(function (item){
    return +item;
})

递归

这里简单介绍一下思路,当你遇到一个并不知到范围的数据(不知道嵌套了多少层的数组),只能使用循环或者是递归来进行所有范围的遍历,其中虽然递归相对循环性能较差因为要不断创建上下文入执行栈。但是不得不说递归真是太酷啦!

纯手写递归

let arr = [1,[2,[3,[4,5]]]];
function flatten(arr) {
    //创建一个数组,接受扁平化的数组
    let result = [];
    for(let i=0,len=arr.length;i<len;i++){
    // 如果子元素是数组
        if(Array.isArray(arr[i])){
        // 将 子元素扁平之后加入到结果数组里面
            result = result.concat(flatten(arr[i]));
        }else{
        // 子元素不是数组就直接添加
            result.push(arr[i]);
        }
    }
    return result;
}
console.log(flatten(arr));//[1,2,3,4,5]

reduce方法进行递归(代码较少)

这里怕有些小伙伴不知道reduce的用法这里简单介绍一下。 reduce函数会遍历每一个元素,每次遍历都会执行一个回调函数,该函数有两个参数,一个是上一次回调函数返回的值,还有一个参数就是当前元素的值。可以给初始值,不给的话就默认初始值为第一个元素,然后从第二个元素开始遍历。最后返回最后一次回调函数返回的值。下面是reduce的简单案例

let arr = [1,2];
console.log(arr.reduce((sum,nowVal)=>sum+nowVal))//    3
console.log(arr.reduce((sum,nowVal)=>sum+nowVal,4))//  4

简单了解reduce之后我们就来开始递归扁平数组

let arr = [1,[2,[3,[4,5]]]];
function flatten(arr){
    // 和普通递归相同,这里只不过是缩减了代码,思想一致
    return arr.reduce((result,nowValue)=>
    Array.isArray(nowValue)?result.concat(flatten(nowValue)):result.concat(nowValue),[]);
}
console.log(flatten(arr));// [1,2,3,4,5]

while循环

虽然递归真的很好用,但是还是要介绍一下循环。本文运用到了数组的结构方法,JavaScript中的解构是一种允许您从数组或对象中提取数据并将其分配给变量的表达式。这种特性是ES6(ECMAScript 2015)引入的,极大地提高了代码的简洁性和可读性。 这里也是简单举个例子:

let arr = [1,2,3,[4,5]];
let [first,...rest]=arr;//first就是1,这里的rest就会存储剩下的元素[2,3,[4,5]]

那么接下来就是数组扁平啦!

let arr = [1,[2,[3,[4,5]]]];
function flatten(arr){
    let result = [];
    while(arr.length!=0){
        // 将arr的第一个元素取出,剩下的存入rest数组中
        let [first,...rest] = arr;
        if(Array.isArray(first)){
        //如果是数组,那么就将first进行解构将里面的元素逐一添加到arr中,
        //相当于将first里面的元素降了一个层级,rest必须进行解构添加
        // 否则将会将rest里面的元素层级提升
        arr = [...first,...rest];
        }else{
        //如果第一个元素不是数组,就添加到结果数组中
        result.push(first);
        //这里相当与将第一个元素剔除,下次遍历取rest数组第一个元素
        arr =[...rest];
        }
    }
    return result;
}
console.log(flatten(arr));// [1,2,3,4,5]

结语

到此这篇关于JS数组扁平化的方法合集(递归,while循环,flat)的文章就介绍到这了,更多相关JS数组扁平化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 利用JS实现浏览器的title闪烁

    利用JS实现浏览器的title闪烁

    经常可以看见的title里面的消息提示,下面是JS的一种实现方法,需要的朋友可以参考下
    2013-07-07
  • JavaScript判断数组的方法总结与推荐

    JavaScript判断数组的方法总结与推荐

    这篇文章主要给大家介绍了关于JavaScript判断数组方法的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-02-02
  • JS区分Object与Aarry的六种方法总结

    JS区分Object与Aarry的六种方法总结

    下面小编就为大家带来一篇JS区分Object与Aarry的六种方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • javascript中this的四种用法

    javascript中this的四种用法

    在javascript当中每一个function都是一个对象,所以在这个里var temp=this 指的是function当前的对象。this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。
    2015-05-05
  • JavaScript版DateAdd和DateDiff函数代码

    JavaScript版DateAdd和DateDiff函数代码

    VBScript中有两个非常好用的日期操作函数:DateAdd用来给日期添加指定时间间隔,DateDiff用来返回两个日期的时间间隔。可惜的是JavaScript没有,不过我们可以写一个函数来实现,一样的,呵呵
    2012-03-03
  • javascript的动态加载、缓存、更新以及复用(一)

    javascript的动态加载、缓存、更新以及复用(一)

    在做OA、MIS、ERP等信息管理类的项目,经常会遇到引用很多js文件,这就需要用到动态加载、缓存、更新以及复用等技术,下面我们来讨论下
    2014-06-06
  • 使用apifm-wxapi快速开发小程序过程详解

    使用apifm-wxapi快速开发小程序过程详解

    这篇文章主要介绍了使用apifm-wxapi快速开发小程序过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子

    layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子

    今天小编就为大家分享一篇layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 基于JavaScript构建一个动态博客应用

    基于JavaScript构建一个动态博客应用

    这篇文章主要为大家详细介绍了如何基于JavaScript构建一个动态博客应用,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • 微信小程序scroll-view横向滑动嵌套for循环的示例代码

    微信小程序scroll-view横向滑动嵌套for循环的示例代码

    这篇文章主要介绍了微信小程序scroll-view横向滑动嵌套for循环的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论