面试官:【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方法扁平化。如果您不需要考虑性能问题,那么递归方法和扩展运算符也是可行的选项。

后言

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


目录
相关文章
|
3天前
|
JavaScript
JS数组排序看懂这篇就够了
JS数组排序看懂这篇就够了
|
8天前
|
JavaScript 前端开发 数据管理
使用Sortable.js库 实现Vue3 elementPlus 的 el-table 拖拽排序
使用Sortable.js库 实现Vue3 elementPlus 的 el-table 拖拽排序
47 1
|
16天前
|
存储 算法 数据可视化
【模拟面试问答】深入解析力扣164题:最大间距(桶排序与排序方法详解)
【模拟面试问答】深入解析力扣164题:最大间距(桶排序与排序方法详解)
|
5天前
|
JavaScript 搜索推荐 算法
JS的三种排序方法,它们的原理
JS的三种排序方法,它们的原理
5 0
|
27天前
|
JavaScript
分享经典面试题:JS数组去重的多种方法
分享经典面试题:JS数组去重的多种方法
|
8天前
|
JavaScript 前端开发
js数组包对象格式怎么根据不同的键值使用sort排序一组数组
js数组包对象格式怎么根据不同的键值使用sort排序一组数组
|
1月前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
14 1
|
16天前
|
存储 算法 搜索推荐
深入解析力扣179题:最大数(自定义排序法详解及模拟面试问答)
深入解析力扣179题:最大数(自定义排序法详解及模拟面试问答)
|
16天前
|
存储 SQL 算法
LeetCode 83题:删除排序链表中的重复元素【面试】
LeetCode 83题:删除排序链表中的重复元素【面试】
|
16天前
|
数据采集 算法 数据挖掘
LeetCode 题目 80:删除排序数组中的重复项 II【算法面试高频题】
LeetCode 题目 80:删除排序数组中的重复项 II【算法面试高频题】