面试官:【js多维数组扁平化去重并排序】

简介: 面试官:【js多维数组扁平化去重并排序】

前言


hello world欢迎来到前端的新世界


😜当前文章系列专栏:JavaScript

🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹

💖感谢大家支持!您的观看就是作者创作的动力


方法一

使用递归方法扁平化——性能较差

function flatten(arr) {
  return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []);
}
let multiArr = [1, 2, [3, 4, [5, 6], 7], [8, 9]];
let flatArr = flatten(multiArr);
let uniqueArr = [...new Set(flatArr)];
let sortedArr = uniqueArr.sort((a, b) => {return a - b});
console.log(sortedArr);

这种方法使用了递归来扁平化整个数组,可以处理任意多层的嵌套数组。但是,对于非常大的多维数组,递归方法的性能会很差。


方法二

使用ES6的扩展运算符扁平化——性能较差

let multiArr = [1, 2, [3, 4, [5, 6], 7], [8, 9]];
let flatArr = [].concat(...multiArr);
let uniqueArr = [...new Set(flatArr)];
let sortedArr = uniqueArr.sort((a, b) => {return a - b});
console.log(sortedArr);

这种方法使用了ES6的扩展运算符将多维数组扁平化为一维数组,然后使用Set进行去重。但是,它仍然需要创建一个新的数组,因此对于非常大的多维数组,它的性能也不是很好。


方法三

使用reduce方法扁平化——性能较好

let multiArr = [1, 2, [3, 4, [5, 6], 7], [8, 9]];
let flatArr = multiArr.reduce((acc, val) => {
  return acc.concat(Array.isArray(val) ? val.flat() : val);
}, []);
let uniqueArr = [...new Set(flatArr)];
let sortedArr = uniqueArr.sort((a, b) => {return a - b});
console.log(sortedArr);

这种方法使用了reduce方法对多层嵌套的数组进行扁平化。由于使用了原生的Array.prototype.flat方法,因此它的性能相对较快。但是,需要注意的是flat方法可能无法在所有环境下使用。


方法四

使用迭代方法扁平化——性能最佳

let multiArr = [1, 2, [3, 4, [5, 6], 7], [8, 9]];
let queue = [...multiArr];
let flatArr = [];
while(queue.length > 0) {
  let node = queue.shift();
  if(Array.isArray(node)) {
    queue.unshift(...node);
  } else if(node !== undefined) {
    flatArr.push(node);
  }
}
let uniqueArr = [...new Set(flatArr)];
let sortedArr = uniqueArr.sort((a, b) => {return a - b});
console.log(sortedArr);

这种方法使用了迭代方法扁平化数组,没有使用任何递归,也不需要重新分配内存。这使得它在处理大型多维数组时具有更好的性能。


总结

最优解决方案是使用迭代方法扁平化,因为它具有最好的性能,并且不会产生与内存分配相关的问题。但是,如果您需要兼容一些老的浏览器或运行时环境,您可以使用reduce方法扁平化。如果您不需要考虑性能问题,那么递归方法和扩展运算符也是可行的选项。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力


目录
相关文章
|
JSON JavaScript 前端开发
Javascript基础 86个面试题汇总 (附答案)
该文章汇总了JavaScript的基础面试题及其答案,涵盖了JavaScript的核心概念、特性以及常见的面试问题。
739 3
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
自然语言处理 JavaScript 前端开发
当面试官再问我JS闭包时,我能答出来的都在这里了。
闭包(Closure)是前端面试中的高频考点,广泛应用于函数式编程中。它不仅指函数内部定义的函数,还涉及内存管理、作用域链和垃圾回收机制。闭包可以让函数访问其外部作用域的变量,但也可能引发内存泄漏等问题。通过合理使用闭包,可以实现模块化、高阶函数和回调函数等应用场景。然而,滥用闭包可能导致代码复杂度增加、调试困难以及潜在的性能问题。为了避免这些问题,开发时应谨慎处理闭包,避免不必要的嵌套,并及时清理不再使用的变量和监听器。
508 16
当面试官再问我JS闭包时,我能答出来的都在这里了。
|
12月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
12月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
前端开发 JavaScript 算法
使用 JavaScript 数组方法实现排序与去重
【10月更文挑战第21天】通过灵活运用 `sort()` 方法和 `filter()` 方法,我们可以方便地实现数组的排序和去重。同时,深入理解排序和去重的原理,以及根据实际需求进行适当的优化,能够更好地应对不同的情况。可以通过实际的项目实践来进一步掌握这些技巧,并探索更多的应用可能性。
437 59
|
JavaScript
js数组去重
js数组去重
246 56
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
前端开发 JavaScript 索引
JavaScript 数组常用高阶函数总结,包括插入,删除,更新,反转,排序等,如map、splice等
JavaScript数组的常用高阶函数,包括遍历、插入、删除、更新、反转和排序等操作,如map、splice、push、pop、reverse等。
468 0
|
JavaScript 索引
js数组去重的常见方法
js数组去重的常见方法
207 0