JavaScript 數組分組的實現

Coly 發布于2019-08-20 12:14 / 1943人閱讀

摘要：今天回答了的問題生產嵌套數組也就是對數組分組更好的寫法。實現像這種，目標數組長度和原數組長度不一致的情況，函數式寫法很容易想到函數。小結數組分組是一個很簡單的問題，有很多種方法來處理。

今天回答了 @_bleach 的問題：JS生產嵌套數組（也就是對數組分組）更好的寫法?；卮鸬倪^程中對 lodash _.chunk() 產生了好奇，所以分析了一下它的源碼，再加上我自己的解決方案，收集了如下一些方案，分享給大家

按慣例，我還是使用 es6 語法，在 Node7 中實驗通過

數據和參數和期望結果

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
const groupByNum = 3;

RxJS

因為最近在學習 RxJs，所以順手做了個 RxJs 解決方案。但這不是重點。不了解或者很了解 RxJs 的請忽略。

RxJava 很火，其實 ReactiveX 有很多種語言的實現，JavaScript 的實例就是 RxJs，建議學習的同學直接上 5.0 Beta。不過 RxJs 主要用于異步流處理，所以需要通過回調函數來使用結果。

const Rx = require("rxjs");
const out = Rx.Observable.from(data)
    .bufferCount(groupByNum)
    .toArray()
    .do((result) => {
        console.log(result)
    })
    .subscribe();

上面的 do() 一句可以直接寫成 do(console.log)，寫成現在這樣的目的是為了讓大家看到計算結果在哪。

_.chunk() 實現

lodash 提供了大量數據處理的方法，_.chunk() 專為分組而生

const _ = require("lodash");
const result = _.chunk(data, groupByNum);

_.chunk() 的源碼

在 node 環境也，通過 npm 安裝 lodash 之后就能在 node_modules/lodash 目錄下找到源碼文件 chunk.js

npm install lodash

所以完整的源碼不貼了，只看下關鍵的那一句

  while (index < length) {
    result[resIndex++] = baseSlice(array, index, (index += size));
  }

baseSlice() 是 lodash 對 Array.prototype.slice() 的兼容性實現，可以直接當 slice() 來看。看了這個源碼，我有了函數式寫法的思路，后面通過 slice() + map() 實現部分詳述。

reduce() 實現

像這種，目標數組長度和原數組長度不一致的情況，函數式寫法很容易想到 reduce() 函數。只可惜單純的 reduce() 做不出來（在 data.length 不能被 groupByNum 整除的時候）

function groupArray(data, cols) {
    const r = data.reduce((r, t) => {
        r.current.push(t);
        if (r.current.length === cols) {
            r.list.push(r.current);
            r.current = [];
        }
        return r;
    }, { list: [], current: [] });

    if (r.current.length) {
        r.list.push(r.current);
    }

    return r.list;
}

const result = groupArray(data, groupByNum);

reduce() 的初始化對象是 { list: [], current: [] }，其中 list 是要得計算出來的結果，而 current 是中間變量，用于生成每個組。

最后由于不有保證 data.length 一定被 groupByNum 整除，所以可能會有一個未完成的 current 沒被 push 到 list 當中，所以專門進行了一個判斷和處理。因此不能寫成函數式寫法，有些遺憾。

forEach() 實現

既然不能用函數式寫法，那 forEach() 或者 for ... of 實現就會更容易理解一些。

function groupArray(data, cols) {
    const list = [];
    let current = [];

    // for (t of data) {
    data.forEach(t => {
        current.push(t);
        if (current.length === cols) {
            list.push(current);
            current = [];
        }
    });
    // }    // for (t of data)

    if (current.length) {
        list.push(current);
    }
    return list;
}

slice() + map() 實現

看到了 _.chunk() 的源碼，讓我產生了函數式寫法的靈感，相比上面的解決方案，更難于理解，不過語法看起來很酷

const result = Array.apply(null, {
    length: Math.ceil(data.length / groupByNum)
}).map((x, i) => {
    return data.slice(i * groupByNum, (i + 1) * groupByNum);
});

Array.apply() 是為了生成一個長度為 Math.ceil(data.length / groupByNum) 的數組作為 map() 的源，map() 不需要這個源的數據，只需要這個源每個數組的 index。

Math.ceil() 用于保證在除法計算有余數的時候對商 +1，即循環次數 +1。

然后在算得的循環次數中，通過 slice 返回每一段結果，通過 map() 映射出來，最終生成需要的結果。

小結

數組分組是一個很簡單的問題，有很多種方法來處理。本文并不是想告訴大家如何處理這個問題，而是將我處理問題的思路分享出來，希望能對處理各種數據問題帶來一點點啟發。

云服務器 GPU云服務器二維數組分組數組分組php php數組怎么分組 javascript分組匹配

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80868.html

JavaScript 實現數組更多的高階函數

摘要：實現數組更多的高階函數吾輩的博客原文場景雖說人人平等，但有些人更加平等。若是有一篇適合萌新閱讀的自己實現數組更多操作的文章，情況或許會發生一些變化。類似于的初始值，但它是一個函數，避免初始值在所有分組中進行累加。 JavaScript 實現數組更多的高階函數吾輩的博客原文: https://blog.rxliuli.com/p/fc... 場景雖說人人平等，但有些人更加平等。為...

aervon 2019-08-23 18:31 評論0 收藏0
JavaScript中的那些坑

摘要：序列化為字符串之后它的各個屬性已經被解除了引用，重新相當于創建了一個新的對象。類似于的，的命令行終端?；舅悸泛瘮档氖褂靡约皡f議。多行注釋的陷阱由于正則表達式字面量的存在,多行注釋可能會產生陷阱,例如以下程序將拋出錯誤: /* var a = /h*/.test(hello); */ 正則結束前的那個星號將被解析為注釋結束符,從而.被認為是不合法的.所以盡量避免使用多行注釋整型 ...

ivyzhang 2019-08-20 10:25 評論0 收藏0
排序算法的Javascript實現

摘要：排序加了的插入排序。分別以索引數為的元素為起點，將其看做不同的組，，，為一組，，為一組依次分組，按照組為單位進行插入排序。各組都已經插入排序一輪過后，將除以向下取整，再進行分組并將各組分別進行插入排序，直到為。 1.冒泡排序：比較相鄰的兩個數，如果前一個數大于后一個數，就將這兩個數換位置。每一次遍歷都會將本次遍歷最大的數冒泡到最后。為了將n個數排好序，需要n-1次遍歷。如果某次遍歷...

fredshare 2019-08-22 18:29 評論0 收藏0
javascript 正則命名分組

摘要：早已實現了正則命名分組提案，只是我們很少使用，本文將介紹的正則命名分組。所有這些問題，都可以通過正則命名分組來解決。該名稱必須是合法的標識符。前言以往我們只是習慣于通過數組下標來訪問正則匹配到的分組，但分組達到4、5個時，標識起來就會非常麻煩。V8早已實現了正則命名分組提案，只是我們很少使用，本文將介紹JS的正則命名分組。以往的做法假設要使用正則匹配一個日期的年月日，以往我們會...

Galence 2019-08-26 12:00 評論0 收藏0
玩轉javascript RegExp對象

摘要：玩轉對象中的正則表達式的正則表達式語法極大地借鑒了另一種腳本語言的正則表達式語法對象是的一個內置對象，與，類似。創建對象可通過構造函數創建。當要根據用戶輸入來構造正則表達式時，必須采用構造函數方式。如與被看做相同的字符模式。玩轉javascript RegExp對象 js中的正則表達式 js的正則表達式語法極大地借鑒了另一種腳本語言Perl的正則表達式語法.RegExp對象是js的一...

alexnevsky 2019-08-21 16:20 評論0 收藏0