一 目錄
不折騰的前端，和鹹魚有什麼區別
| 目錄 |
|---|
| 一 目錄 |
| 二 前言 |
| 三 二維降一維 |
| 四 遞迴降維 |
| 五 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：
或者檢視 阮一峰 大佬的 ES6 講解：
這裡大致講下這個方法：
- 入參：
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() - MDN
jsliang 廣告推送：
也許小夥伴想了解下雲伺服器
或者小夥伴想買一臺雲伺服器
或者小夥伴需要續費雲伺服器
歡迎點選 雲伺服器推廣 檢視！
jsliang 的文件庫 由 樑峻榮 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議進行許可。
基於github.com/LiangJunron…上的作品創作。
本許可協議授權之外的使用許可權可以從 creativecommons.org/licenses/by… 處獲得。