JS實(shí)現(xiàn)數(shù)組扁平化的8種方式總結(jié)
八種數(shù)組扁平化方法的使用場(chǎng)景和優(yōu)缺點(diǎn)
以下是八種數(shù)組扁平化方法的使用場(chǎng)景和優(yōu)缺點(diǎn)：
1. 使用遞歸
使用場(chǎng)景：當(dāng)需要對(duì)任意層級(jí)的嵌套數(shù)組進(jìn)行扁平化時(shí)，遞歸是一種簡(jiǎn)單且通用的方法。
優(yōu)點(diǎn)：簡(jiǎn)單易懂，適用于任意層級(jí)的嵌套數(shù)組。
缺點(diǎn)：可能存在性能問題，對(duì)于非常大的數(shù)組或多層嵌套的數(shù)組，遞歸可能導(dǎo)致堆棧溢出。
2. 使用 reduce 方法
使用場(chǎng)景：當(dāng)需要對(duì)數(shù)組進(jìn)行一系列操作，并將結(jié)果累積到一個(gè)新數(shù)組時(shí)，reduce 方法是一種常用的選擇。
優(yōu)點(diǎn)：代碼簡(jiǎn)潔，可以直接在 reduce 方法中處理扁平化邏輯。
缺點(diǎn)：對(duì)于非常大的數(shù)組或多層嵌套的數(shù)組，reduce 方法可能導(dǎo)致性能問題。
3. 使用擴(kuò)展運(yùn)算符
使用場(chǎng)景：當(dāng)需要快速將多層嵌套的數(shù)組扁平化為一維數(shù)組時(shí)，擴(kuò)展運(yùn)算符是一種簡(jiǎn)單且直觀的方法。
優(yōu)點(diǎn)：代碼簡(jiǎn)潔，易于理解和使用。
缺點(diǎn)：對(duì)于非常大的數(shù)組或多層嵌套的數(shù)組，擴(kuò)展運(yùn)算符可能導(dǎo)致性能問題。
4. 使用 flat 方法（ES2019）
使用場(chǎng)景：當(dāng)在支持 ES2019 的環(huán)境中，可以使用 flat 方法來扁平化數(shù)組。
優(yōu)點(diǎn)：代碼簡(jiǎn)潔，使用內(nèi)置方法，性能較好。
缺點(diǎn)：不適用于不支持 ES2019 的環(huán)境。
5. 使用 toString 和 split 方法
使用場(chǎng)景：當(dāng)需要將多層嵌套的數(shù)組轉(zhuǎn)換為字符串，并使用字符串方法進(jìn)行處理時(shí)，可以使用 toString 和 split 方法。
優(yōu)點(diǎn)：簡(jiǎn)單易懂，適用于簡(jiǎn)單的扁平化需求。
缺點(diǎn)：對(duì)于包含對(duì)象或字符串元素的數(shù)組，可能會(huì)出現(xiàn)不符合預(yù)期的結(jié)果。
6. 使用正則表達(dá)式和 JSON 方法
使用場(chǎng)景：當(dāng)需要將數(shù)組轉(zhuǎn)換為字符串，然后使用正則表達(dá)式和 JSON 方法進(jìn)行處理時(shí)，可以使用該方法。
優(yōu)點(diǎn)：適用于簡(jiǎn)單的扁平化需求。
缺點(diǎn)：對(duì)于包含對(duì)象或字符串元素的數(shù)組，可能會(huì)出現(xiàn)不符合預(yù)期的結(jié)果。
7. 使用堆棧
使用場(chǎng)景：當(dāng)需要手動(dòng)控制數(shù)組元素的處理順序時(shí)，可以使用堆棧方法。
優(yōu)點(diǎn)：可以靈活控制處理順序，適用于需要自定義處理邏輯的情況。
缺點(diǎn)：相對(duì)復(fù)雜，需要手動(dòng)處理堆棧和結(jié)果數(shù)組。
8. 使用擴(kuò)展運(yùn)算符和遞歸
使用場(chǎng)景：當(dāng)需要結(jié)合擴(kuò)展運(yùn)算符和遞歸來處理多層嵌套的數(shù)組時(shí)，可以使用該方法。
優(yōu)點(diǎn)：代碼簡(jiǎn)潔，結(jié)合了擴(kuò)展運(yùn)算符和遞歸的優(yōu)點(diǎn)。
缺點(diǎn)：對(duì)于非常大的數(shù)組或多層嵌套的數(shù)組，遞歸可能導(dǎo)致堆棧溢出。
根據(jù)具體的需求和代碼環(huán)境，選擇適合的方法來實(shí)現(xiàn)數(shù)組扁平化?？紤]性能、代碼復(fù)雜度和可讀性等因素，選擇最適合的方法進(jìn)行實(shí)現(xiàn)。
具體實(shí)現(xiàn)
以下是實(shí)現(xiàn)數(shù)組扁平化的8種方式：
1. 使用遞歸
function flatten(arr) {
let result = [];
arr.forEach(item => {
if (Array.isArray(item)) {
result = result.concat(flatten(item));
} else {
result.push(item);
}
});
return result;
}2. 使用 reduce 方法
function flatten(arr) {
return arr.reduce((result, item) => {
if (Array.isArray(item)) {
result = result.concat(flatten(item));
} else {
result.push(item);
}
return result;
}, []);
}3. 使用擴(kuò)展運(yùn)算符
function flatten(arr) {
while (arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
}4. 使用 flat 方法（ES2019）
function flatten(arr) {
return arr.flat(Infinity);
}5. 使用 toString 和 split 方法
function flatten(arr) {
return arr.toString().split(',').map(item => +item);
}6. 使用正則表達(dá)式和 JSON 方法
function flatten(arr) {
return JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']');
}7. 使用堆棧
function flatten(arr) {
const stack = [...arr];
const result = [];
while (stack.length) {
const next = stack.pop();
if (Array.isArray(next)) {
stack.push(...next);
} else {
result.unshift(next);
}
}
return result;
}8. 使用擴(kuò)展運(yùn)算符和遞歸
function flatten(arr) {
return [].concat(...arr.map(item => Array.isArray(item) ? flatten(item) : item));
}這些方法都可以將多層嵌套的數(shù)組扁平化為一維數(shù)組。具體使用哪種方法取決于你的需求和代碼環(huán)境。
封裝
以下是將八種方法封裝為各自的函數(shù)，并進(jìn)行調(diào)用的示例：
// 1. 使用遞歸
function flattenByRecursion(arr) {
let result = [];
function flattenHelper(arr) {
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
flattenHelper(arr[i]);
} else {
result.push(arr[i]);
}
}
}
flattenHelper(arr);
return result;
}
// 2. 使用 reduce 方法
function flattenByReduce(arr) {
return arr.reduce((acc, cur) => {
return Array.isArray(cur) ? acc.concat(flattenByReduce(cur)) : acc.concat(cur);
}, []);
}
// 3. 使用擴(kuò)展運(yùn)算符
function flattenBySpreadOperator(arr) {
while (arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
}
// 4. 使用 flat 方法（ES2019）
function flattenByFlat(arr) {
return arr.flat(Infinity);
}
// 5. 使用 toString 和 split 方法
function flattenByToString(arr) {
return arr.toString().split(",").map(item => +item);
}
// 6. 使用正則表達(dá)式和 JSON 方法
function flattenByRegexAndJSON(arr) {
return JSON.parse("[" + JSON.stringify(arr).replace(/\[|\]/g, "") + "]");
}
// 7. 使用堆棧
function flattenByStack(arr) {
let result = [];
let stack = [...arr];
while (stack.length) {
let next = stack.pop();
if (Array.isArray(next)) {
stack.push(...next);
} else {
result.unshift(next);
}
}
return result;
}
// 8. 使用擴(kuò)展運(yùn)算符和遞歸
function flattenBySpreadOperatorAndRecursion(arr) {
return arr.reduce((acc, cur) => {
return Array.isArray(cur) ? [...acc, ...flattenBySpreadOperatorAndRecursion(cur)] : [...acc, cur];
}, []);
}
// 調(diào)用示例
let nestedArray = [1, [2, [3, 4], 5], 6, [7]];
console.log(flattenByRecursion(nestedArray));
console.log(flattenByReduce(nestedArray));
console.log(flattenBySpreadOperator(nestedArray));
console.log(flattenByFlat(nestedArray));
console.log(flattenByToString(nestedArray));
console.log(flattenByRegexAndJSON(nestedArray));
console.log(flattenByStack(nestedArray));
console.log(flattenBySpreadOperatorAndRecursion(nestedArray));你可以根據(jù)需要選擇其中的某個(gè)方法進(jìn)行調(diào)用，或者根據(jù)具體的需求進(jìn)行修改和優(yōu)化。
到此這篇關(guān)于JS實(shí)現(xiàn)數(shù)組扁平化的8種方式總結(jié)的文章就介紹到這了,更多相關(guān)JS數(shù)組扁平化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用json對(duì)象轉(zhuǎn)化為key,value的對(duì)象數(shù)組
這篇文章主要介紹了使用json對(duì)象轉(zhuǎn)化為key，value的對(duì)象數(shù)組方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
js+canvas實(shí)現(xiàn)簡(jiǎn)單掃雷小游戲
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)簡(jiǎn)單掃雷小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
基于IE下ul li 互相嵌套時(shí)的bug,排查,解決過程以及心得介紹
昨天到今天上午都在查一個(gè)IE的bug，情形如下：通過異步請(qǐng)求獲取json數(shù)據(jù)，然后拼接成html代碼，最后使用innerHTML類似方法插入到文檔流中。在chrome下和IE8\9下均表現(xiàn)正常。結(jié)果已進(jìn)入IE7，瀏覽器就崩潰，更別提IE6了，也是一副死給你看的樣子。于是我就把這個(gè)bug定位于IE6\7，其實(shí)這時(shí)候我已經(jīng)陷入了這個(gè)固定思維模式中，浪費(fèi)了不少時(shí)間2013-05-05
基于JS實(shí)現(xiàn)經(jīng)典的井字棋游戲
井字棋作為我們?cè)谏蠈W(xué)時(shí)代必玩的一款連珠游戲，承載了很多人的童年記憶。本文我們就用HTML、css、js來實(shí)現(xiàn)一款井字棋游戲，感興趣的可以動(dòng)手嘗試一下2022-04-04
下面小編就為大家?guī)硪黄猨s重寫方法的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了小程序橫屏方案對(duì)比，實(shí)現(xiàn)橫屏的方案也有多種，但是每種方案都有一定的缺陷，恰巧最近也在橫屏方案上踩了不少坑，本文就一起來介紹一下吧2020-06-06
Javascript獲取CSS偽元素屬性的實(shí)現(xiàn)代碼
這篇文章主要介紹了Javascript獲取CSS偽元素屬性的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了JS數(shù)組去重的6種方法,結(jié)合完整實(shí)例形式總結(jié)分析了javascript針對(duì)數(shù)組去除重復(fù)項(xiàng)的相關(guān)原理與操作技巧,需要的朋友可以參考下2018-12-12
bootstrap——bootstrapTable實(shí)現(xiàn)隱藏列的示例
本篇文章主要介紹了bootstrapTable實(shí)現(xiàn)隱藏列的示例，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
基于Typescript與Axios的接口請(qǐng)求管理詳解
接口是一系列抽象方法的聲明,是一些方法特征的集合,這些方法都應(yīng)該是抽象的,需要由具體的類去實(shí)現(xiàn),然后第三方就可以通過這組抽象方法調(diào)用,讓具體的類執(zhí)行具體的方法,這篇文章主要給大家介紹了基于Typescript與Axios的接口請(qǐng)求管理的相關(guān)資料,需要的朋友可以參考下2021-09-09