【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面试题】就讲到这里啦,谢谢大家的阅读。

              相关文章
              |
              25天前
              |
              JSON JavaScript 前端开发
              [JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
              本文介绍了JSONP的工作原理及其在解决跨域请求中的应用。首先解释了同源策略的概念,然后通过多个示例详细阐述了JSONP如何通过动态解释服务端返回的JavaScript脚本来实现跨域数据交互。文章还探讨了使用jQuery的`$.ajax`方法封装JSONP请求的方式,并提供了具体的代码示例。最后,通过一个更复杂的示例展示了如何处理JSON格式的响应数据。
              31 2
              [JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
              |
              2月前
              |
              自然语言处理 前端开发 JavaScript
              🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
              本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
              30 2
              |
              2月前
              |
              JavaScript 前端开发 测试技术
              JS都有哪些操作数组的方法
              JS都有哪些操作数组的方法
              25 3
              |
              2月前
              |
              JavaScript
              js删除数组中已知下标的元素
              js删除数组中已知下标的元素
              38 4
              |
              2月前
              |
              缓存 JavaScript 前端开发
              JavaScript中数组、对象等循环遍历的常用方法介绍(二)
              JavaScript中数组、对象等循环遍历的常用方法介绍(二)
              40 1
              |
              2月前
              |
              JavaScript 前端开发 Java
              【javaScript数组,函数】的基础知识点
              【javaScript数组,函数】的基础知识点
              25 5
              |
              2月前
              |
              Web App开发 JavaScript 前端开发
              前端Node.js面试题
              前端Node.js面试题
              |
              2月前
              |
              JavaScript 前端开发 API
              JS中数组的方法flat()怎么用
              JS中数组的方法flat()怎么用
              19 0
              |
              2月前
              |
              JavaScript 前端开发 索引
              JavaScript中数组、对象等循环遍历的常用方法介绍(一)
              JavaScript中数组、对象等循环遍历的常用方法介绍(一)
              26 0
              |
              2月前
              |
              前端开发 JavaScript 索引
              JavaScript 数组常用高阶函数总结,包括插入,删除,更新,反转,排序等,如map、splice等
              JavaScript数组的常用高阶函数,包括遍历、插入、删除、更新、反转和排序等操作,如map、splice、push、pop、reverse等。
              18 0