【JS面试题】用四种方式实现数组扁平化你会吗

简介: 今天来介绍面试中被频繁问到的问题:数组扁平化

假设有这样一个数组,数组内部嵌套了两层甚至更多数组


    let arr = [1, 2, [3, 4, [6, 7]]]


    在我们面对复杂的逻辑问题时,可能需要遍历该数组中所有的元素,包括嵌套数组内的各个元素。


    这样的话我们在遍历数组时还需要判断是否还有嵌套的数组,这难免会对性能有所影响。所以我们可以将所有的元素都放在同一层次上,即数组内没有嵌套数组


      let arr = [1, 2, 3, 4, 6, 7]


      看到这样的需求,你能想到多少种方法来实现呢?那么就让我来给你讲解四种常用的方式吧~


      1


      第一种方式可以直接使用ES6提供的新函数 flat( )


        function flatArr1(arr) {    return arr.flat(Infinity)}


        2


        第二种方式可以使用正则,将除了两端的 [ ] 符号,将其它所有内部嵌套函数的 [ ] 符号给去掉,即可实现数组扁平化的需求


          function flatArr2(arr) {  return JSON.parse('[' + JSON.stringfy(arr).replace(/\[|\]/g, '') + ']') }


          3


          第三种方式可以使用 reduce( ) 函数来对数组进行递归处理


            function flatArr3(arr) {  return arr.reduce((a, b) = > {    return a.concat(Array.isArray(b) ? flatArr3(b) : b)  }, [])  }


            4


            第四种方式就是通过暴力的递归来进行数组扁平化


              function flatArr4(arr) {  // 用于存放扁平化后的数组元素  let new_arr = []    // 定义一个递归函数  function innerArr(v) {    for(let i = 0; i < v.length; i ++) {      let item = v[i]      // 判断是否为数组,是则递归遍历;否则直接添加到new_arr中      if(Array.isArray(item)) {        innerArr(item)      } else {        new_arr.push(item)      }    }  }    innerArr(arr)    return new_arr}


              今天的【JS面试题】就讲到这里啦,谢谢大家的阅读。

              相关文章
              |
              27天前
              |
              前端开发 JavaScript
              前端 js 经典:数组常用方法总结
              前端 js 经典:数组常用方法总结
              27 0
              |
              2天前
              |
              JavaScript 前端开发 索引
              深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
              深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
              |
              2天前
              JS-函数封装数组求和案例
              JS-函数封装数组求和案例
              |
              2天前
              |
              存储 JavaScript 前端开发
              JavaScript数组
              JavaScript数组
              |
              5天前
              |
              JavaScript 前端开发 索引
              JavaScript基础-数组操作:增删改查
              【6月更文挑战第11天】本文介绍了JavaScript数组的增删改查操作,包括查询(索引访问、indexOf、lastIndexOf、includes)、修改(直接赋值、splice)、添加(push、unshift、splice)和删除(pop、shift、splice)。同时,文章列举了三个易错点:数组越界、splice参数理解不清及修改原数组与返回值混淆,并提供了相应的避免策略。通过代码示例展示了各种操作的用法,强调理解方法特性和实践的重要性,以提升数组操作效率。
              |
              6天前
              |
              数据采集 算法 数据挖掘
              LeetCode 题目 80:删除排序数组中的重复项 II【算法面试高频题】
              LeetCode 题目 80:删除排序数组中的重复项 II【算法面试高频题】
              |
              10天前
              |
              JavaScript 前端开发
              JavaScript删除数组中指定元素3种方法例子
              JavaScript删除数组中指定元素3种方法例子
              |
              11天前
              |
              存储 JavaScript 前端开发
              【经典算法】LeetCode350:两个数组的交集 II(Java/C/Python3/JavaScript实现含注释说明,Easy)
              【经典算法】LeetCode350:两个数组的交集 II(Java/C/Python3/JavaScript实现含注释说明,Easy)
              8 1
              |
              12天前
              |
              JSON JavaScript 数据格式
              1.js动态的往json数据添加新属性和值 2.JSON 和 JS 对象互转 3.对象转化为数组
              1.js动态的往json数据添加新属性和值 2.JSON 和 JS 对象互转 3.对象转化为数组
              15 0
              |
              17天前
              |
              JavaScript
              分享经典面试题:JS数组去重的多种方法
              分享经典面试题:JS数组去重的多种方法