不折騰的前端,和鹹魚有什麼區別javascript
目錄 |
---|
一 目錄 |
二 前言 |
三 二維降一維 |
四 遞歸降維 |
五 flat() 降維 |
六 參考文獻 |
返回目錄php
在業務場景或者刷 LeetCode 的時候,曾經碰到屢次碰到一個問題:html
講起將多維轉成一維,忽然想起一個詞叫作【降維打擊】,下面將這種二維甚至多維的打成一維數組的方法,叫作【降維】前端
這篇文章和你一塊兒探討下轉換的方法~java
返回目錄git
咱們先來個簡單的:es6
不少時候,咱們的數組層次並無那麼深,只有個二維數組,因此咱們能夠了解下一些快捷的使用方法。github
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()
是 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()
方法首先使用映射函數映射每一個元素,而後將結果壓縮成一個新數組。
這裏不一一介紹,感興趣的能夠了解下。
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]]
複製代碼
致敬在前端路上不斷探索的大佬們,本篇文章參考自:
jsliang 廣告推送:
也許小夥伴想了解下雲服務器
或者小夥伴想買一臺雲服務器
或者小夥伴須要續費雲服務器
歡迎點擊 雲服務器推廣 查看!
jsliang 的文檔庫 由 梁峻榮 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議進行許可。
基於github.com/LiangJunron…上的做品創做。
本許可協議受權以外的使用權限能夠從 creativecommons.org/licenses/by… 處得到。