- 当前位置：首页 >应用开发 >手写JS！各种姿势解数组去重和数组扁平化
手写JS！各种姿势解数组去重和数组扁平化
发布时间：2025-11-05 03:58:28 来源：云智核 作者：域名
前言
在JS的手写数组手写面试题中，关于数组的各种有很多，下面就来各种姿势解数组去重和扁平化吧。姿势组去重和
数组去重
数组去重在面试中是解数一道基础题，但仍然可以在其中挖掘许多js知识。扁平
ES6 最常用Set 去重
Set对象是手写数组值的集合，你可以按照插入的各种顺序迭代它的元素。 Set中的姿势组去重和元素只会出现一次，即 Set 中的解数元素是唯一的。
function unique(arr) { return Array.from(new Set(arr)) } let arr = [1,扁平 1, true, true, true, true, 15, 15]; console.log(unique(arr))// [ 1, true, true, 15 ] let unique2 = arr => [...new Set(arr)] console.log(unique2(arr));// [ 1, true, true, 15 ]双重for循环
外层循环元素，内层循环时比较值。手写数组
function unique(arr) { for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i] == arr[j]) { //第一个等同于第二个，各种splice方法删除第二个 arr.splice(j,姿势组去重和 1); j--; } } } return arr; } let arr = [1, 1, true, true, true, true, 15, 15]; console.log(unique(arr))// [ 1, true, true, 15 ]indexOf或includes去重
当数组内没有该元素时，企商汇indexOf返回-1，解数则把它push进新数组。扁平
function unique(arr) { var array = []; for (var i = 0; i < arr.length; i++) { if (array .indexOf(arr[i]) === -1) { array .push(arr[i]) } } return array; }includes() 方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。
function unique(arr) { var array = []; for (var i = 0; i < arr.length; i++) { if (!array.includes( arr[i]) ) { array .push(arr[i]) } } return array; }filter去重
原始数组中元素的索引等于当前索引值时返回，否则返回当前元素
function unique(arr) { var res = arr.filter(function(item, index, array) { return array.indexOf(item) === index }) return res }数组扁平化
数组扁平化是指将一个多维数组变为一维数组。
flat方法
flat()方法创建一个新数组，其中所有子数组元素都以递归方式连接到该数组中，直到达到指定的深度为止
const arr1 = [1, 2, [3, 4, [5, 6]]]; arr1.flat(2); // [1, 2, 3, 4, 5, 6] const arr2 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; arr2.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]ES6 拓展运算符
es6的扩展运算符能将二维数组变为一维，若arr中含有数组则使用一次扩展运算符，直至没有为止。
function flatten(arr) { while (arr.some(item => Array.isArray(item))) { arr = [].concat(...arr); } return arr; }toString方法+split方法
调用数组的toString方法，将数组变为字符串然后再用split分割还原为数组。split分割后形成的源码下载数组的每一项值为字符串，所以需要用一个map方法遍历数组将其每一项转换为数值型。
function flatten(arr) { console.log(arr.toString());// 1,2,3,4,5,6 console.log(arr.toString().split(,)); //[ 1, 2, 3, 4, 5, 6 ] return arr.toString().split(,).map(function(item) { return Number(item); }) } let ary = [1, [2, [3, [4, 5]]], 6]; console.log(flatten(ary)); // [ 1, 2, 3, 4, 5, 6 ]使用join方法可以实现和toString方法类似的效果。
递归
递归的遍历每一项，当为数组时则继续，不为数组则concat。
function flatten(arr) { var result = []; for (var i = 0, len = arr.length; i < len; i++) { if (Array.isArray(arr[i])) { result = result.concat(flatten(arr[i])) } else { result.push(arr[i]) } } return result; }reduce方法实现
reduce方法接收一个函数作为累加器，数组中的每个值(从左到右)开始缩减，最终计算为一个值。
function flatten(arr) { return arr.reduce((result, item)=> { return result.concat(Array.isArray(item) ? flatten(item) : item); }, []); } let ary = [1, [2, [3, [4, 5]]], 6]; console.log(flatten(ary)); // [ 1, 2, 3, 4, 5, 6 ]总结
关于数组去重和数组扁平化是面试中很容易问到的，这里分享了不同姿势的解法，有兴趣的小伙伴可以在下方评论区交流更多的知识!!
作者：_清水
链接：https://juejin.cn/post/6950307682737717261
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。亿华云计算
- 联想小新510si7（轻薄便携，细节出色，高效办公娱乐利器）
- 品味全城（探索城市美学，感受品味全城的独特魅力）
- 长虹七K电视的综合评价及用户体验
- 诺基亚928（揭秘诺基亚928的卓越性能及独特特点）
- 解决电脑开机显示英文Windows错误恢复的问题（从错误诊断到系统恢复，帮助您解决电脑开机故障）
- 通达信科的OA系统在办公效率提升中的作用（探讨通达信科的OA系统在企业管理中的优势与应用）
- i56代集成显卡的性能评估（一款性价比较高的集成显卡）
- iPadMini232G（极致便携，无限可能）
- 电脑打印显示格式错误如何解决？（探讨常见电脑打印显示格式错误及其解决方法）
- 腾龙15-30逆光功能全面解析（探索腾龙15-30逆光功能的特点和优势）
- 以MaliT860玩游戏的优势和劣势分析（探索MaliT860在游戏领域的性能表现及局限性）
- 以分期乐购买手机的优势与注意事项（以分期乐购买手机，让你轻松拥有心仪的智能手机）
- 小米Max的价格及评价（了解小米Max的价格、性能及用户评价）
- 魅族MX5（以魅族MX5怎么样为主题的详细评测）
- 应对电脑浏览器被强制修改主页的方法（保护你的浏览器免受恶意软件侵害）
- TCLP501M手机——性能出众，物超所值（一款实力派手机，让你物有所值）
- 黑爵机械键盘（高品质机械键盘，让你爱不释手）
- 高通8225Q（性能卓越，能够满足多种需求）
- 苹果XR电脑升级iOS教程（简明易懂的操作指南，让你的苹果XR电脑焕发新生）
- 卡西欧自动手表（探索卡西欧自动手表的多功能特性和精湛工艺）
随便看看
- Copyright © 2025 Powered by 手写JS！各种姿势解数组去重和数组扁平化,云智核 滇ICP备2023006006号-28sitemap