資訊專欄INFORMATION COLUMN
摘要：根據(jù)需求的特點(diǎn)，數(shù)組展開需要進(jìn)行迭代和遞歸?；卮鹞恼麻_頭的問題將多重?cái)?shù)組轉(zhuǎn)化成單層數(shù)組的過程就是數(shù)組展開，也叫作數(shù)組扁平化一循環(huán)加遞歸最簡單的思路循環(huán)中判斷，如果子元素是數(shù)組則遞歸。
前言
首先什么是數(shù)組展開？
假如現(xiàn)在有這樣一個(gè)需求：將后臺(tái)的一個(gè)多重 List 數(shù)據(jù)，展開成一個(gè) List 后，并去重后排序；
["a", "b", ["c", "d"], [["d"],"e"], "f"] => ["a", "b", "c", "d", "e"];
數(shù)組去重我們前面在《JS專題之?dāng)?shù)組去重》已經(jīng)講過了，那么前一步的多重?cái)?shù)組展開成單層數(shù)組，該如何處理呢？
這就來到我們所要探討的數(shù)組展開了。
根據(jù)需求的特點(diǎn)，數(shù)組展開需要進(jìn)行迭代和遞歸。
回答文章開頭的問題:
將多重?cái)?shù)組轉(zhuǎn)化成單層數(shù)組的過程就是數(shù)組展開，也叫作數(shù)組扁平化（flatten）一、循環(huán)加遞歸
最簡單的思路：循環(huán)中判斷，如果子元素是數(shù)組則遞歸。
function flatten(origin) {
var result = [];
for(var i = 0; i< origin.length; i++) {
var item = origin[i];
if(Array.isArray(item)) {
result = result.concat(flatten(item))
} else {
result.push(item);
}
}
return result;
}
var arr = ["a", "b", ["c", "d"], [["d"],"e"], "f"];
flatten(arr); // ["a", "b", "c", "d", "d", "e", "f"]
二、toString()
數(shù)組的原型對(duì)象上有一個(gè)方法，toString, 它能把數(shù)組的所以元素轉(zhuǎn)化成用逗號(hào)隔開的字符串。
var arr = [1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"];
arr.toString() // "1,2,3,4,a,b,c,d,d,e,f"
// 所以，利用 split 先把字符串轉(zhuǎn)化為單層數(shù)組，再進(jìn)行處理。
const flatten = (origin) => origin.toString().split(","); // ["1", "2", "3", "4", "a", "b", "c", "d", "d", "e", "f"]
由于 toString 轉(zhuǎn)化為字符串的時(shí)候，不會(huì)區(qū)分字符串和數(shù)字類型，在進(jìn)行區(qū)分?jǐn)?shù)據(jù)類型的時(shí)候要注意。
三、split上面的方法，我們用 toString() 將數(shù)組轉(zhuǎn)化為字符串，那么我們也可以用 split 來做：
var arr = [1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"];
function flatten(arr) {
return arr.join(",").split(",");
}
console.log(flatten(arr))。 // ["1", "2", "3", "4", "a", "b", "c", "d", "d", "e", "f"]
同樣，這種字符串和數(shù)組互轉(zhuǎn)的過程，不適合多種數(shù)據(jù)類型同時(shí)處理。
四、reduce我們注意到其實(shí)數(shù)組扁平化其實(shí)就是“迭代 + 拼接（累加） + 遞歸”的過程，數(shù)組 reduce 方法既可以迭代又可以累加，適合做數(shù)組扁平化。
function flatten(origin){
return origin.reduce(function(init, item){
return init.concat(Array.isArray(item) ? flatten(item) : item)
}, [])
}
var arr = [1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"];
console.log(flatten(arr)) // [1, 2, 3, 4, "a", "b", "c", "d", "d", "e", "f"]
五、some + concat
some 會(huì)遍歷數(shù)組的每一個(gè)元素，判斷是否有元素都滿足條件，最后返回布爾值。some 一旦返回真值后，其后的元素就不會(huì)繼續(xù)監(jiān)測(cè)。
function flatten(origin) {
while (origin.some(item => Array.isArray(item))){
origin = [].concat.apply([], origin);
}
return origin;
}
var arr = [1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"];
console.log(flatten(arr)) // [1, 2, 3, 4, "a", "b", "c", "d", "d", "e", "f"]
六、some + 擴(kuò)展運(yùn)算符
ES6 擴(kuò)展運(yùn)算符...可以將兩重?cái)?shù)組轉(zhuǎn)換為單層數(shù)組:
[].concat(...[1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"]); // [1, 2, 3, Array(1), "a", "b", "c", "d", Array(1), "e", "f"]
// 利用 some 方法，我們可以實(shí)現(xiàn)多重轉(zhuǎn)換為單層：
function flatten(origin) { while(origin.some(item=> Array.isArray(item))) {
origin = [].concat(...origin);
} return origin;
}
var arr = [1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"];
console.log(flatten(arr)) // [1, 2, 3, 4, "a", "b", "c", "d", "d", "e", "f"]
總結(jié)
數(shù)組扁平化其實(shí)就是利用元素迭代 + 元素拼接（疊加）+ 遞歸調(diào)用來對(duì)數(shù)組進(jìn)行處理，達(dá)到將多層數(shù)組轉(zhuǎn)換為單層數(shù)組的過程。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101543.html
摘要：專題系列第十八篇，講解遞歸和尾遞歸定義程序調(diào)用自身的編程技巧稱為遞歸。然而非尾調(diào)用函數(shù)，就會(huì)創(chuàng)建多個(gè)執(zhí)行上下文壓入執(zhí)行上下文棧。所以我們只用把階乘函數(shù)改造成一個(gè)尾遞歸形式，就可以避免創(chuàng)建那么多的執(zhí)行上下文。 JavaScript 專題系列第十八篇，講解遞歸和尾遞歸 定義 程序調(diào)用自身的編程技巧稱為遞歸(recursion)。 階乘 以階乘為例： function factorial(n...
摘要：將元素作為對(duì)象的鍵，默認(rèn)鍵對(duì)應(yīng)的值為如果對(duì)象中沒有這個(gè)鍵，則將這個(gè)元素放入結(jié)果數(shù)組中去。 前言 數(shù)組去重在日常開發(fā)中的使用頻率還是較高的，也是網(wǎng)上隨便一抓一大把的話題，所以，我寫這篇文章目的在于歸納和總結(jié)，既然很多人都在提的數(shù)組去重，自己到底了解多少呢。又或者是如果自己在開發(fā)中遇到了去重的需求，自己能想到更好的解決方案嗎。 這次我們來理一理怎么做數(shù)組去重才能做得最合適，既要考慮兼容性，...
一、什么是數(shù)組扁平化 扁平化，顧名思義就是減少復(fù)雜性裝飾，使其事物本身更簡潔、簡單，突出主題。 數(shù)組扁平化，對(duì)著上面意思套也知道了，就是將一個(gè)復(fù)雜的嵌套多層的數(shù)組，一層一層的轉(zhuǎn)化為層級(jí)較少或者只有一層的數(shù)組。 Ps: flatten 可以使數(shù)組扁平化，效果就會(huì)如下： const arr = [1, [2, [3, 4]]]; console.log(flatten(arr)); // [1, ...
摘要：不過的實(shí)現(xiàn)中，多了很多細(xì)節(jié)上的判斷，比如第一個(gè)參數(shù)是否是布爾值，是否是一個(gè)對(duì)象，不傳參數(shù)時(shí)的默認(rèn)值等。 JavaScritp 專題系列第七篇，講解如何從零實(shí)現(xiàn)一個(gè) jQuery 的 extend 函數(shù) 前言 jQuery 的 extend 是 jQuery 中應(yīng)用非常多的一個(gè)函數(shù)，今天我們一邊看 jQuery 的 extend 的特性，一邊實(shí)現(xiàn)一個(gè) extend! extend 基本用...
閱讀 2582·2023-04-26 00:57
閱讀 946·2021-11-25 09:43
閱讀 2249·2021-11-11 16:55
閱讀 2293·2019-08-30 15:53
閱讀 3623·2019-08-30 15:52
閱讀 1496·2019-08-30 14:10
閱讀 3405·2019-08-30 13:22
閱讀 1238·2019-08-29 11:18
