5種 JavaScript 方式實現(xiàn)數(shù)組扁平化
更新時間：2021年09月30日 16:56:00 作者：張雨凡
這篇文章主要介紹5種 JavaScript 方式實現(xiàn)數(shù)組扁平化，雖說只有5種方法，但是核心只有一個就是遍歷數(shù)組arr，若arr[i]為數(shù)組則遞歸遍歷，直至arr[i]不為數(shù)組然后與之前的結果concat。 想具體了解的小伙伴那請看下面文章內容吧
一、數(shù)組扁平化概念
數(shù)組扁平化是指將一個多維數(shù)組變?yōu)橐痪S數(shù)組
[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]
二、實現(xiàn)
1. reduce
遍歷數(shù)組每一項，若值為數(shù)組則遞歸遍歷，否則concat。
function flatten(arr) {
return arr.reduce((result, item)=> {
return result.concat(Array.isArray(item) ? flatten(item) : item);
}, []);
}
reduce是數(shù)組的一種方法，它接收一個函數(shù)作為累加器，數(shù)組中的每個值（從左到右）開始縮減，最終計算為一個值。
reduce包含兩個參數(shù)：回調函數(shù)，傳給total的初始值
// 求數(shù)組的各項值相加的和：
arr.reduce((total, item)=> { // total為之前的計算結果，item為數(shù)組的各項值
return total + item;
}, 0);
2. toString & split
調用數(shù)組的toString方法，將數(shù)組變?yōu)樽址缓笤儆胹plit分割還原為數(shù)組
function flatten(arr) {
return arr.toString().split(',').map(function(item) {
return Number(item);
})
}
因為split分割后形成的數(shù)組的每一項值為字符串，所以需要用一個map方法遍歷數(shù)組將其每一項轉換為數(shù)值型
3. join & split
和上面的toString一樣，join也可以將數(shù)組轉換為字符串
function flatten(arr) {
return arr.join(',').split(',').map(function(item) {
return parseInt(item);
})
}
4. 遞歸
遞歸的遍歷每一項，若為數(shù)組則繼續(xù)遍歷，否則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的擴展運算符能將二維數(shù)組變?yōu)橐痪S
[].concat(...[1, 2, 3, [4, 5]]); // [1, 2, 3, 4, 5]
根據(jù)這個結果我們可以做一個遍歷，若arr中含有數(shù)組則使用一次擴展運算符，直至沒有為止。
function flatten(arr) {
while(arr.some(item=>Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
}
總結：
到此這篇關于5種 JavaScript 方式實現(xiàn)數(shù)組扁平化的文章就介紹到這了,更多相關JavaScript 實現(xiàn)數(shù)組扁平化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
HTML TO JavaScript 轉換...2006-06-06
http proxy 對網(wǎng)絡請求進行代理使用詳解
這篇文章主要為大家介紹了http proxy 對網(wǎng)絡請求進行代理使用詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09 
這篇文章主要為大家介紹了前端JS圖片懶加載原理方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02 
JavaScript的模塊化開發(fā)框架Sea.js上手指南
Sea.js的目的是追求簡單的代碼書寫和組織方式,Sea.js并沒有過多功能而是主要對前端程序的部署結構作出約束,下面我們就來看一下JavaScript的模塊化開發(fā)框架Sea.js上手指南:
2016-05-05 
小程序開發(fā)實戰(zhàn)：實現(xiàn)九宮格界面的導航的代碼實現(xiàn)
本篇文章主要介紹了小程序開發(fā)實戰(zhàn)：實現(xiàn)九宮格界面的導航的代碼實現(xiàn)，具有一定的參考價值，有興趣的可以了解一下。
2017-01-01 
這篇文章主要介紹了 微信小程序 Buffer緩沖區(qū)的詳解的相關資料,需要的朋友可以參考下
2017-07-07 
這篇文章主要介紹了微信小程序 網(wǎng)絡請求(GET請求)詳解的相關資料,需要的朋友可以參考下
2016-11-11 
這篇文章主要為大家介紹了autojs繪畫實現(xiàn)六邊形示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01 
Ctrl+Enter提交內容信息...
2006-06-06