陣列分組chunk的一種寫法

看風景就發表於2018-10-11
陣列

lodash的_.chunk函式可以將陣列按照數量分成若干組，

例如：

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

會分成

[ [1,2,3], [4,5,6], [7,8,9], [10,11] ]

下面是一種 map + slice 的寫法

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

寫法分析：

1. 首先使用了 Array.apply(null, {length: xxxx}) 來生成一個指定長度的陣列，這裡注意

new Array(length) 生成的是 [undefined x length]，是一個長度為length的陣列，元素未被賦值，與[undefined, undefined, ...] length個undefined的陣列並不相同。

Array.apply(null, {length: xxxx}) 生成的是length個undefined的陣列，可以使用map

new Array(length).map 是不能正常執行的，可以使用fill，new Array(length).fill().map 可以得到預期結果

2. apply後面的引數可以是一個類陣列，甚至一個只包含length屬性的物件

3. 生成陣列之後，slice按照索引切割，返回陣列作為一項

 


出處：https://segmentfault.com/a/1190000007464770

相關文章