5種 JavaScript 方式實現數組扁平化
一、數組扁平化概念
數組扁平化是指將一個多維數組變為一維數組
[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]
二、實現
1. reduce
遍歷數組每一項,若值為數組則遞歸遍歷,否則concat
。
function flatten(arr) { return arr.reduce((result, item)=> { return result.concat(Array.isArray(item) ? flatten(item) : item); }, []); }
reduce
是數組的一種方法,它接收一個函數作為累加器,數組中的每個值(從左到右)開始縮減,最終計算為一個值。
reduce
包含兩個參數:回調函數,傳給total
的初始值
// 求數組的各項值相加的和: arr.reduce((total, item)=> { // total為之前的計算結果,item為數組的各項值 return total + item; }, 0);
2. toString & split
調用數組的toString
方法,將數組變為字符串然後再用split分割還原為數組
function flatten(arr) { return arr.toString().split(',').map(function(item) { return Number(item); }) }
因為split分割後形成的數組的每一項值為字符串,所以需要用一個map方法遍歷數組將其每一項轉換為數值型
3. join & split
和上面的toString
一樣,join
也可以將數組轉換為字符串
function flatten(arr) { return arr.join(',').split(',').map(function(item) { return parseInt(item); }) }
4. 遞歸
遞歸的遍歷每一項,若為數組則繼續遍歷,否則concat
function flatten(arr) { var res = []; arr.map(item => { if(Array.isArray(item)) { res = res.concat(flatten(item)); } else { res.push(item); } }); return res; }
5. 擴展運算符
es6
的擴展運算符能將二維數組變為一維
[].concat(...[1, 2, 3, [4, 5]]); // [1, 2, 3, 4, 5]
根據這個結果我們可以做一個遍歷,若arr
中含有數組則使用一次擴展運算符,直至沒有為止。
function flatten(arr) { while(arr.some(item=>Array.isArray(item))) { arr = [].concat(...arr); } return arr; }
總結:
到此這篇關於5種 JavaScript
方式實現數組扁平化的文章就介紹到這瞭,更多相關JavaScript
實現數組扁平化內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JS前端面試數組扁平化手寫flat函數示例
- JavaScript數據扁平化詳解
- js實現數組的扁平化
- JavaScript中數組flat方法的使用與實現方法
- JavaScript Reduce使用詳解