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数组扁平化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript中caller和callee详解

    javascript中caller和callee详解

    有些小伙伴可能会问caller,callee 是什么?在javascript 中有什么样的作用?那么本篇会对于此做一些基本介绍。希望能够对大家理解javascript中的callee与caller有所帮助。
    2015-08-08
  • javascript hasFocus使用实例

    javascript hasFocus使用实例

    hasFocus是document的特有方法.用来判断当前网页是否获得焦点.
    2010-06-06
  • 浅谈javascript中的闭包

    浅谈javascript中的闭包

    Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性。本文将以例子入手来介绍Javascript闭包的语言特性,并结合一点 ECMAScript语言规范来使读者可以更深入的理解闭包。
    2015-05-05
  • js实现多选项切换导航菜单的方法

    js实现多选项切换导航菜单的方法

    这篇文章主要介绍了js实现多选项切换导航菜单的方法,可实现动态生成多选项切换导航菜单的功能,是非常实用的技巧,需要的朋友可以参考下
    2015-02-02
  • 浅谈Javascript如何实现匀速运动

    浅谈Javascript如何实现匀速运动

    这篇文章主要介绍了浅谈Javascript如何实现匀速运动的方法及相关代码,需要的朋友可以参考下
    2014-12-12
  • js基本内容之引用、变量、打印、交互、定时器、demo操作实例

    js基本内容之引用、变量、打印、交互、定时器、demo操作实例

    在JavaScript中变量用于存储数据,并可以在程序执行过程中动态更改,变量可以存储各种类型的数据,如数字、字符串、对象、函数等,这篇文章主要介绍了js基本内容之引用、变量、打印、交互、定时器、demo操作的相关资料,需要的朋友可以参考下
    2025-08-08
  • js动态添加表格数据使用insertRow和insertCell实现

    js动态添加表格数据使用insertRow和insertCell实现

    这篇文章主要介绍了js动态添加表格数据并使用insertRow和insertCell实现,需要的朋友可以参考下
    2014-05-05
  • 微信小程序中获取设备信息的方法

    微信小程序中获取设备信息的方法

    这篇文章主要给大家介绍了关于微信小程序中获取设备信息的相关资料,微信小程序是一种在微信平台上运行的应用程序,它具有轻量化、便捷性和高兼容性的特点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • JavaScript使用 for...in 、 for...of 或者 forEach() 遍历元素的示例

    JavaScript使用 for...in 、 for...of 或者 forEach() 遍历元素的示例

    for...in 、 for...of 和 forEach 都是用于循环遍历集合元素的方法,但它们之间有一些重要的区别,本文通过实例代码介绍JavaScript使用 for...in 、 for...of 或者 forEach() 遍历元素的相关知识,感兴趣的朋友一起看看吧
    2023-09-09
  • Bootstrap源码解读下拉菜单(4)

    Bootstrap源码解读下拉菜单(4)

    这篇文章主要源码解读了Bootstrap下拉菜单,介绍了Bootstrap各式各样的下拉菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论