多維數組轉一維數組（降維的多種方式）

一 目錄

不折騰的前端，和鹹魚有什麼區別

目錄
一 目錄
二 前言
三 二維降一維
四 遞歸降維
五 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… 處得到。