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

后言

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


目录
相关文章
|
2月前
|
JSON JavaScript 前端开发
Javascript基础 86个面试题汇总 (附答案)
该文章汇总了JavaScript的基础面试题及其答案,涵盖了JavaScript的核心概念、特性以及常见的面试问题。
46 3
|
2月前
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
12天前
|
前端开发 JavaScript 算法
使用 JavaScript 数组方法实现排序与去重
【10月更文挑战第21天】通过灵活运用 `sort()` 方法和 `filter()` 方法,我们可以方便地实现数组的排序和去重。同时,深入理解排序和去重的原理,以及根据实际需求进行适当的优化,能够更好地应对不同的情况。可以通过实际的项目实践来进一步掌握这些技巧,并探索更多的应用可能性。
93 59
|
3天前
|
JSON JavaScript 前端开发
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
本文介绍了JSONP的工作原理及其在解决跨域请求中的应用。首先解释了同源策略的概念,然后通过多个示例详细阐述了JSONP如何通过动态解释服务端返回的JavaScript脚本来实现跨域数据交互。文章还探讨了使用jQuery的`$.ajax`方法封装JSONP请求的方式,并提供了具体的代码示例。最后,通过一个更复杂的示例展示了如何处理JSON格式的响应数据。
13 2
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
|
2月前
|
JavaScript
js数组去重
js数组去重
103 55
|
21天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
27天前
|
前端开发 JavaScript 索引
JavaScript 数组常用高阶函数总结,包括插入,删除,更新,反转,排序等,如map、splice等
JavaScript数组的常用高阶函数,包括遍历、插入、删除、更新、反转和排序等操作,如map、splice、push、pop、reverse等。
17 0
|
1月前
|
JavaScript 索引
js数组去重的常见方法
js数组去重的常见方法
32 0
|
2月前
|
JavaScript 前端开发
用Javascript对二维数组DIY按汉语拼音的排序方法
用Javascript对二维数组DIY按汉语拼音的排序方法
|
3月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
37 0