多维数组转一维数组（降维的多种方式） |
您所在的位置：网站首页 › java二维数组变成一维数组 › 多维数组转一维数组（降维的多种方式） |
多维数组转一维数组（降维的多种方式）
|
一 目录
不折腾的前端，和咸鱼有什么区别 目录 一 目录 二 前言 三 二维降一维 四 递归降维 五 flat() 降维 六 参考文献 二 前言返回目录 在业务场景或者刷 LeetCode 的时候，曾经碰到多次碰到一个问题： 如何将二维甚至多维的数组转换成一维数组？讲起将多维转成一维，突然想起一个词叫做【降维打击】，下面将这种二维甚至多维的打成一维数组的方法，叫做【降维】 这篇文章和你一起探讨下转换的方法~ 三 二维降一维返回目录 我们先来个简单的： 二维数组如何降级成一维数组？很多时候，我们的数组层次并没有那么深，只有个二维数组，所以我们可以了解下一些快捷的使用方法。 reduce() 二维降一维 const oldArr = [1, 2, [3, 4]]; const newArr = oldArr.reduce((prev, curr) => (prev.concat(curr)), []); console.log(newArr); // [1, 2, 3, 4] 复制代码concat() 二维将一维 const oldArr = [1, 2, [3, 4]]; const newArr = [].concat(...oldArr); const newnewArr = Array.prototype.concat.apply([], oldArr); console.log(newArr); // [1, 2, 3, 4] console.log(newnewArr); // [1, 2, 3, 4] 复制代码flat() 二维降一维 const oldArr = [1, 2, [3, 4]]; const newArr = oldArr.flat(); console.log(newArr); // [1, 2, 3, 4] 复制代码四 递归降维返回目录 既然二维降一维的小伙伴们看过之后，我们就可以进一步了解多维降一维数组了。 我们先了解下通过递归降维。 关于递归降维，这里有两个方法： forEach 递归 reduce 递归下面一一分析： forEach 递归降维 const oldArr = [ 1, [ 2, [3], [4, 5, 6], [7, 8, 9], 10, 11, ], 12, 13, 14, [15, 16, 17], ]; const newArr = []; const ergodic = (arr) => { arr.forEach((item) => { if (Array.isArray(item)) { ergodic(item); } else { newArr.push(item); } }) } ergodic(oldArr, newArr); console.log(newArr); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17 ] 复制代码Array.isArray() 用于确定传递的值是否是一个 Array，返回 true 或者 false。 在这个递归方法中，我们判断每一项是不是数组。 如果是，则进一步递归，直到其不是为止。 如果不是，则用新数组接收它。 reduce 递归降维 const oldArr = [ 1, [ 2, [3], [4, 5, 6], [7, 8, 9], 10, 11 ], 12, 13, 14, [15, 16, 17], ]; const ergodic = (arr) => arr.reduce((prev, curr, index, list) => { if (Array.isArray(curr)) { return prev.concat(...ergodic(curr)); } return prev.concat(curr); }, []); const newArr = ergodic(oldArr); console.log(newArr); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17 ] 复制代码 提问：请说出 reduce 对应的 4 个参数代表什么？ 五 flat() 降维返回目录 flat() 是 ES6 提供的一个将嵌套的数组 “拉平” 的方法。 flat 降维 const oldArr = [ 1, [ 2, [3], [4, 5, 6], [7, 8, 9], 10, 11 ], 12, 13, 14, [15, 16, 17], ]; const newArr = oldArr.flat(Infinity); console.log(newArr); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17 ] 复制代码关于 flat()，更多的可以查阅 MDN： developer.mozilla.org/zh-CN/docs/…或者查看 阮一峰 大佬的 ES6 讲解： es6.ruanyifeng.com/?search=一维&…这里大致讲下这个方法： 入参：arr.flat(depth)。 这个 depth 即拉平几层的意思，就好比： // 二维数组：默认拉平一层 [1, 2, [3, 4, [5]]].flat(); // [1, 2, 3, 4, [5]] // 四维数组：设置拉平两层 [1, 2, [3, 4, [5, [6, 7]]]].flat(2); // [1, 2, 3, 4, 5, [6, 7]] // 设置拉平所有层 [1, 2, [3, 4, [5]]].flat(Infinity); // [1, 2, 3, 4, 5] 复制代码 注意事项：值得注意的是：使用 flat() 拉平数组过程中，会移除数组的空项： [1, 2, , 4, 5].flat(); // [1, 2, 4, 5] 复制代码 扩展了解：在你运用 flat() 自如的时候，不妨了解下它的同辈 flatMap()？ 阮一峰 - flatMap：es6.ruanyifeng.com/?search=一维&… MDN - flatMap：developer.mozilla.org/zh-CN/docs/…flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。 这里不一一介绍，感兴趣的可以了解下。 flatMap() 使用 const arr = [1, 2, 3, 4]; arr.flatMap(x => x * 2); // [2, 4, 6, 8] arr.flatMap(x => [[x * 2]]) // [[2], [4], [6], [8]] 复制代码六 参考文献返回目录 致敬在前端路上不断探索的大佬们，本篇文章参考自： 《JavaScript 学习笔记 - 多维数组变为一维数组》 - MADAO是不会开花的 《es6--javascript数组降维，从es5分析到es6，（详解reduce方法）欢迎补充》 - 程序喵timy 《数组实例的-flat，flatMap》 - 阮一峰 《Array.prototype.flat() - MDNjsliang 广告推送： 也许小伙伴想了解下云服务器 或者小伙伴想买一台云服务器 或者小伙伴需要续费云服务器 欢迎点击 云服务器推广 查看！
|
【本文地址】
今日新闻 |
推荐新闻 |