扁平化

一、 什么是數組扁平化？

數組扁平化就是將一個多層嵌套的數組 (Arrary) 轉化為只有一層。

數組扁平化概念:數組扁平化是指將一個多維數組變為一維數組

// 多層嵌套 [1, 2, [3, 4]]// 一層 [1, 2, 3, 4]

二、 實現數組扁平化

var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]] console.log(arr.flat(Infinity))// 注意：flat和flatMap方法為ES2019(ES10)方法，目前還未在所有瀏覽器完全兼容。function flatten(arr) {var arr_flat = arr.flat(Infinity);return arr_flat } console.log(flatten(arr))

打印結果：

1. 遞歸實現

遞歸實現數組扁平化 遞歸的遍歷每一項，若為數組則繼續遍歷，否則concat

var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]] function flatten1(arr) {var res = [];arr.map(item => {if(Array.isArray(item)) {res = res.concat(flatten1(item));} else {res.push(item);}});return res; } console.log(flatten1(arr))

打印結果：

2. reduce

reduce:遍歷數組每一項，若值為數組則遞歸遍歷，否則concat。
reduce方法接受一個函數作為參數，這個函數作為一個累加器，從左到右遍歷 (升序) 整個類型數組，最后將結果匯總為單個值返回。

reduce方法還接受一個可選的參數initialValue，作為第一次調用 callback函數時的第一個參數的值。 如果沒有提供初始值，則將使用數組中的第一個元素。 在沒有初始值的空數組上調用 reduce 將報錯。

reducer 函數接收4個參數:

Accumulator (acc) (累計器)

Current Value (cur) (當前值)

Current Index (idx) (當前索引) 可選

Source Array (src) (源數組) 可選

reducer 函數的返回值分配給累計器，該返回值在數組的每個迭代中被記住，并最后成為最終的單個結果值。

var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]] function flatten4(arr) { return arr.reduce((result, item)=> {return result.concat(Array.isArray(item) ? flatten4(item) : item);}, []); } console.log(flatten4(arr))

打印結果：

reduce是數組的一種方法，它接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。
reduce包含兩個參數：回調函數，傳給total的初始值

// 求數組的各項值相加的和： arr.reduce((total, item)=> { // total為之前的計算結果，item為數組的各項值return total + item; }, 0);

3. 使用擴展運算符...

擴展運算符:es6的擴展運算符能將二維數組變為一維

some() 方法測試數組中的某些元素是否通過由提供的函數實現的測試，返回boolean值。

注意：對于放在空數組上的任何條件，此方法返回false。

console.log([].concat(...[1, 2, 3, [4, 5]]))

打印結果：

我們用這種方法只可以扁平一層，但是順著這個方法一直思考，我們可以寫出這樣的方法：

var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]] function flatten5(arr) {// 循環展開嵌套的數組，直到沒有嵌套while(arr.some(item=>Array.isArray(item))) {arr = [].concat(...arr);}return arr; } console.log(flatten5(arr))

打印結果：

4. 去重

數組去重要考慮的太多了，這里只簡單的用Set返回一個不重復的值

function flatten(arr) {// 循環展開嵌套的數組，直到沒有嵌套while(arr.some(item => Array.isArray(item))) {arr = [].concat(...arr);}return Array.from(new Set(arr));; }flatten([1, 1, 2, [3, [3, 5, 6], 4]]); // [1, 2, 3, 5, 6, 4]

5. toString & split

調用數組的toString方法，將數組變為字符串然后再用split分割還原為數組

var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]] function flatten2(arr) {return arr.toString().split(',').map(function(item) {// 因為split分割后形成的數組的每一項值為字符串，// 所以需要用一個map方法遍歷數組將其每一項轉換為數值型return Number(item);}) } console.log(flatten2(arr))

打印結果：

6. join & split:
和上面的toString一樣，join也可以將數組轉換為字符串

var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]] function flatten3(arr) {return arr.join(',').split(',').map(function(item) {return parseInt(item);}) } console.log(flatten3(arr))

打印結果：

總結

以上是生活随笔為你收集整理的JS----JavaScript中数组扁平化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。