多维数组转一维数组（降维的多种方式）

一 目录

不折腾的前端，和咸鱼有什么区别

目录
一 目录
二 前言
三 二维降一维
四 递归降维
五 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]]
复制代码

六 参考文献

返回目录

致敬在前端路上不断探索的大佬们，本篇文章参考自：

1. 《JavaScript 学习笔记 - 多维数组变为一维数组》 - MADAO是不会开花的
2. 《es6--javascript数组降维，从es5分析到es6，（详解reduce方法）欢迎补充》 - 程序喵timy
3. 《数组实例的-flat，flatMap》 - 阮一峰
4. 《Array.prototype.flat() - MDN

---

jsliang 广告推送：
也许小伙伴想了解下云服务器
或者小伙伴想买一台云服务器
或者小伙伴须要续费云服务器
欢迎点击 云服务器推广 查看！

jsliang 的文档库 由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.com/LiangJunron…上的做品创做。
本许可协议受权以外的使用权限能够从 creativecommons.org/licenses/by… 处得到。