将数组拆分为块

Question

假设我有一个 Javascript 数组，如下所示：

["Element 1","Element 2","Element 3",...]; // with close to a hundred elements.

什么方法适合将数组分块（拆分）成许多较小的数组，比如说最多 10 个元素？

Answer 1

这是一个使用 reduce 的 ES6 版本

var perChunk = 2 // items per chunk    

var inputArray = ['a','b','c','d','e']

var result = inputArray.reduce((resultArray, item, index) => { 
  const chunkIndex = Math.floor(index/perChunk)

  if(!resultArray[chunkIndex]) {
    resultArray[chunkIndex] = [] // start a new chunk
  }

  resultArray[chunkIndex].push(item)

  return resultArray
}, [])

console.log(result); // result: [['a','b'], ['c','d'], ['e']]

您已准备好链接进一步的 map/reduce 转换。 您的输入数组保持不变

---

如果您喜欢较短但可读性较差的版本，您可以在混合中添加一些 concat 以获得相同的最终结果：

inputArray.reduce((all,one,i) => {
   const ch = Math.floor(i/perChunk); 
   all[ch] = [].concat((all[ch]||[]),one); 
   return all
}, [])

您可以使用余数运算符将连续的项目放入不同的块中：

const ch = (i % perChunk); 

Answer 2

js

function splitToBulks(arr, bulkSize = 20) {
    const bulks = [];
    for (let i = 0; i < Math.ceil(arr.length / bulkSize); i++) {
        bulks.push(arr.slice(i * bulkSize, (i + 1) * bulkSize));
    }
    return bulks;
}

console.log(splitToBulks([1, 2, 3, 4, 5, 6, 7], 3));

打字稿

function splitToBulks<T>(arr: T[], bulkSize: number = 20): T[][] {
    const bulks: T[][] = [];
    for (let i = 0; i < Math.ceil(arr.length / bulkSize); i++) {
        bulks.push(arr.slice(i * bulkSize, (i + 1) * bulkSize));
    }
    return bulks;
}

Answer 3

示例 未更改的源数组
并且不一次制作所有的块。 （节省内存！）

const array = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21];

const chunkSize = 4
for (var i = 0; i < array.length; i += chunkSize) {
    const chunk = array.slice(i, i + chunkSize);
    console.log('chunk=',chunk)
    // do whatever
}
console.log('src array didnt changed. array=',array)

Answer 4

array.slice 方法可以根据需要从数组的开头、中间或结尾提取切片，而无需更改原始数组。

var i,j, temporary, chunk = 10;
for (i = 0,j = array.length; i < j; i += chunk) {
    temporary = array.slice(i, i + chunk);
    // do whatever
}

Answer 5

const array = ['a', 'b', 'c', 'd', 'e'];
const size = 2;
const chunks = [];
while(array.length) {
  chunks.push(array.splice(0,size));
}
console.log(chunks);

Answer 6

这将是我对这个主题的贡献。我想.reduce() 是最好的方法。

var segment = (arr, n) => arr.reduce((r,e,i) => i%n ? (r[r.length-1].push(e), r)
                                                    : (r.push([e]), r), []),
        arr = Array.from({length: 31}).map((_,i) => i+1);
        res = segment(arr,7);
console.log(JSON.stringify(res));

但是上面的实现效率不是很高，因为.reduce() 贯穿了所有的arr 函数。一种更有效的方法（非常接近于最快的命令式解决方案）是迭代减少的（要分块的）数组，因为我们可以通过Math.ceil(arr/n); 提前计算它的大小。一旦我们有了像Array(Math.ceil(arr.length/n)).fill(); 这样的空结果数组，剩下的就是将arr 数组的切片映射到其中。

function chunk(arr,n){
  var r = Array(Math.ceil(arr.length/n)).fill();
  return r.map((e,i) => arr.slice(i*n, i*n+n));
}

arr = Array.from({length: 31},(_,i) => i+1);
res = chunk(arr,7);
console.log(JSON.stringify(res));

到目前为止一切都很好，但我们仍然可以进一步简化上面的代码片段。

var chunk = (a,n) => Array.from({length: Math.ceil(a.length/n)}, (_,i) => a.slice(i*n, i*n+n)),
    arr   = Array.from({length: 31},(_,i) => i+1),
    res   = chunk(arr,7);

console.log(JSON.stringify(res));

Answer 7

TypeScript 版本。演示的是 101 个随机 uid 分成 10 个组

const idArrayLengthLimit = 10;
const randomOneHundredOneIdArray = Array
    .from(Array(101).keys())
    .map(() => generateUid(5));

function generateUid(length: number) {
  const uidString: string[] = [];
  const uidChars = 'abcdefghijklmnopqrstuvwxyz0123456789';
  for (let i = 0; i < length; i++) {
    uidString
      .push(uidChars.charAt(Math.floor(Math.random() * uidChars.length)));
  }
  return uidString.join('');
}

for (let i = 0; i < randomOneHundredOneIdArray.length; i++) {
 if(i % idArrayLengthLimit === 0){
     const result = randomOneHundredOneIdArray
       .filter((_,id) => id >= i && id < i + idArrayLengthLimit);
    // Observe result
    console.log(result);
 }
}

Answer 8

晚了，这是我的两分钱。就像很多人说的，我首先会想到类似的东西

chunker = (a,n) => [...Array(Math.ceil(a.length/n))].map((v,i) => a.slice(i*n, (i+1)*n))

但我更喜欢这里没有看到的是这个：

chunker = (n) => (r,v,i) => (c = Math.floor(i/n), (r[c] = r[c] || []).push(v), r)

console.log(arr.reduce(chunker(3), []))

有更长的变体

chunker = (a, n) => a.reduce((r,v,i) => {
  c = Math.floor(i/n); // which chunk it belongs to
  (r[c] = r[c] || []).push(v)
  return r
}, [])

console.log(chunker(arr, 3))

说明

1. 常见的答案会首先确定块的数量，然后根据块所在的位置和每个块的大小来获取原始数组的切片

2. chunker reducer 函数将遍历每个元素并将其放入相应评估的块的数组中。

性能几乎相同，就我所见，reduce 方法平均慢了 4%。

PS：reduce(ing) 的优点是可以轻松更改分组标准。在问题和示例中，标准是相邻单元格（并且映射使用切片）。但是您可能希望在“循环”中执行此操作，例如，使用 mod（% 运算符）或任何其他数学公式

重读它让我发现公式也可以是一个参数，导致更通用的解决方案，需要 2 个函数来实现答案：

splitter = (a, f) => a.reduce((r,v,i) => { // math formula and/or function
  c = f(v, i) || 0; // custom formula, receiving each value and index
  (r[c] = r[c] || []).push(v)
  return r
}, [])

chunker = (a, n) => splitter(a, (v,i) => Math.floor(i/n))

console.log(chunker(arr, 3))
console.log(splitter(arr, (v,i) => v % 2))  // is it even or odd?

稍加改动splitter 也可用于制作命名数组（也称为对象），函数返回字符串而不是数字 :)

Answer 9

您可以使用 Array.prototype.reduce 函数在一行中完成此操作。

let arr = [1,2,3,4];
function chunk(arr, size)
{
    let result = arr.reduce((rows, key, index) => (index % size == 0 ? rows.push([key]) : rows[rows.length-1].push(key)) && rows, []);
    return result;
}
        
console.log(chunk(arr,2));

Answer 10

这是一个示例，我将数组拆分为 2 个元素的块，只需从数组中拼接块直到原始数组为空。

    const array = [86,133,87,133,88,133,89,133,90,133];
    const new_array = [];

    const chunksize = 2;
    while (array.length) {
        const chunk = array.splice(0,chunksize);
        new_array.push(chunk);
    }

    console.log(new_array)

Answer 11

ECMA 6 中的单行

const [list,chunkSize] = [[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15], 6]

[...Array(Math.ceil(list.length / chunkSize))].map(_ => list.splice(0,chunkSize))

Answer 12

如果您不知道谁将使用您的代码（第三方、同事、您以后等），请尽量避免使用原生原型，包括 Array.prototype。

有一些方法可以安全地扩展原型（但不是在所有浏览器中），也有一些方法可以安全地使用从扩展原型创建的对象，但更好的经验法则是遵循Principle of Least Surprise 并完全避免这些做法。

如果您有时间，请观看 Andrew Dupont 在 2011 年的 JSConf 演讲，"Everything is Permitted: Extending Built-ins"，对这个主题进行很好的讨论。

但回到这个问题，虽然上面的解决方案可以工作，但它们过于复杂并且需要不必要的计算开销。这是我的解决方案：

function chunk (arr, len) {

  var chunks = [],
      i = 0,
      n = arr.length;

  while (i < n) {
    chunks.push(arr.slice(i, i += len));
  }

  return chunks;
}

// Optionally, you can do the following to avoid cluttering the global namespace:
Array.chunk = chunk;

Answer 13

派对迟到了，但我使用.join("") 将数组转换为一个巨大的字符串，然后使用正则表达式将.match(/.{1,7}/) 转换为最大长度为 7 的子字符串数组，从而解决了类似的问题。

const arr = ['abc', 'def', 'gh', 'ijkl', 'm', 'nopq', 'rs', 'tuvwx', 'yz'];
const arrayOfSevens = arr.join("").match(/.{1,7}/g);
// ["abcdefg", "hijklmn", "opqrstu", "vwxyz"]

看看它在与其他方法的速度测试中的表现会很有趣

Answer 14

你可以拿这个 ES6 chunk 函数，好用：

const chunk = (array, size) =>
  Array.from({length: Math.ceil(array.length / size)}, (value, index) => array.slice(index * size, index * size + size));

const itemsPerChunk = 3;
const inputArray = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

const newArray = chunk(inputArray, itemsPerChunk);
console.log(newArray.length); // 3,

document.write(JSON.stringify(newArray)); //  [ [ 'a', 'b', 'c' ], [ 'd', 'e', 'f' ], [ 'g' ] ]

Answer 15

单线

const chunk = (a,n)=>[...Array(Math.ceil(a.length/n))].map((_,i)=>a.slice(n*i,n+n*i));

对于打字稿

const chunk = <T>(arr: T[], size: number): T[][] =>
  [...Array(Math.ceil(arr.length / size))].map((_, i) =>
    arr.slice(size * i, size + size * i)
  );

演示

const chunk = (a,n)=>[...Array(Math.ceil(a.length/n))].map((_,i)=>a.slice(n*i,n+n*i));
document.write(JSON.stringify(chunk([1, 2, 3, 4], 2)));

按组数分块

const part=(a,n)=>[...Array(n)].map((_,i)=>a.slice(i*Math.ceil(a.length/n),(i+1)*Math.ceil(a.length/n)));

对于打字稿

const part = <T>(a: T[], n: number): T[][] => {
  const b = Math.ceil(a.length / n);
  return [...Array(n)].map((_, i) => a.slice(i * b, (i + 1) * b));
};

演示

const part = (a, n) => {
    const b = Math.ceil(a.length / n);
    return [...Array(n)].map((_, i) => a.slice(i * b, (i + 1) * b));
};

document.write(JSON.stringify(part([1, 2, 3, 4, 5, 6], 2))+'<br/>');
document.write(JSON.stringify(part([1, 2, 3, 4, 5, 6, 7], 2)));

Answer 16

使用Array.prototype.reduce()的另一种解决方案：

const chunk = (array, size) =>
  array.reduce((acc, _, i) => {
    if (i % size === 0) acc.push(array.slice(i, i + size))
    return acc
  }, [])

// Usage:
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const chunked = chunk(numbers, 3)
console.log(chunked)

此解决方案与solution by Steve Holgado 非常相似。然而，由于这个解决方案没有利用数组扩展，也没有在 reducer 函数中创建新数组，因此它比其他解决方案更快（参见 jsPerf test）并且主观上更具可读性（更简单的语法）。

在每 nth 次迭代（其中 n = size；从第一次迭代开始），累加器数组 (acc) 会附加一大块数组 (array.slice(i, i + size)) 然后返回。在其他迭代中，累加器数组按原样返回。

如果size 为零，则该方法返回一个空数组。如果size 为负，则该方法返回损坏的结果。因此，如果您的情况需要，您可能需要对负或非正 size 值做一些事情。

---

如果在您的情况下速度很重要，一个简单的for 循环会比使用reduce() 更快（请参阅jsPerf test），并且有些人可能会发现这种样式也更具可读性：

function chunk(array, size) {
  // This prevents infinite loops
  if (size < 1) throw new Error('Size must be positive')

  const result = []
  for (let i = 0; i < array.length; i += size) {
    result.push(array.slice(i, i + size))
  }
  return result
}

Answer 17

我是这样解决的：

const chunks = [];
const chunkSize = 10;
for (let i = 0; i < arrayToSplit.length; i += chunkSize) {
  const tempArray = arrayToSplit.slice(i, i + chunkSize);
  chunks.push(tempArray);
}

Answer 18

我在 jsperf.com 中测试了不同的答案。结果在那里可用：https://web.archive.org/web/20150909134228/https://jsperf.com/chunk-mtds

最快的功能（在 IE8 上有效）是这个：

function chunk(arr, chunkSize) {
  if (chunkSize <= 0) throw "Invalid chunk size";
  var R = [];
  for (var i=0,len=arr.length; i<len; i+=chunkSize)
    R.push(arr.slice(i,i+chunkSize));
  return R;
}

Answer 19

如果这对任何人都有用，这可以在 RxJS 6 中非常简单地完成：

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
from(arr).pipe(bufferCount(3)).subscribe(chunk => console.log(chunk));

输出：[1, 2, 3] [4, 5, 6] [7, 8, 9] [10, 11, 12] [13, 14, 15] [16]

Answer 20

使用生成器

function* chunks(arr, n) {
  for (let i = 0; i < arr.length; i += n) {
    yield arr.slice(i, i + n);
  }
}

let someArray = [0,1,2,3,4,5,6,7,8,9]
console.log([...chunks(someArray, 2)]) // [[0,1],[2,3],[4,5],[6,7],[8,9]]

Answer 21

我建议使用 lodash。分块是那里许多有用的功能之一。 说明：

npm i --save lodash

包含在您的项目中：

import * as _ from 'lodash';

用法：

const arrayOfElements = ["Element 1","Element 2","Element 3", "Element 4", "Element 5","Element 6","Element 7","Element 8","Element 9","Element 10","Element 11","Element 12"]
const chunkedElements = _.chunk(arrayOfElements, 10)

您可以在这里找到我的示例： https://playcode.io/659171/

Answer 22

纯javascript中的一行：

function chunks(array, size) {
  return Array.apply(0,{length: Math.ceil(array.length / size)}).map((_, index) => array.slice(index*size, (index+1)*size))
}

// The following will group letters of the alphabet by 4
console.log(chunks([...Array(26)].map((x,i)=>String.fromCharCode(i + 97)), 4))

Answer 23

使用Array.prototype.splice() 拼接，直到数组有元素。

Array.prototype.chunk = function(size) {
    let result = [];
    
    while(this.length) {
        result.push(this.splice(0, size));
    }
        
    return result;
}

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.chunk(2));

更新

Array.prototype.splice() 填充原始数组，执行chunk() 后，原始数组 (arr) 变为 []。

因此，如果您想保持原始数组不变，请将arr 数据复制并保留到另一个数组中并执行相同的操作。

Array.prototype.chunk = function(size) {
  let data = [...this];  
  let result = [];
    
    while(data.length) {
        result.push(data.splice(0, size));
    }

    return result;
}

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log('chunked:', arr.chunk(2));
console.log('original', arr);

P.S：感谢@mts-knn 提及此事。

Answer 24

如果您使用的是 Underscore JS，只需使用：

var result = _.chunk(arr,elements_per_chunk)

无论如何，大多数项目已经使用下划线作为依赖项。

Answer 25

Neat and clean easy to understand

 let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
 let len = nums.length ;

    const chunkArr = (arr, chunkNo) => {
      let newArr = [];
      for(let i = 0; i < len; i++){
        if(nums[0] !== "" && nums[0] !== undefined ){
          let a = nums.splice(0,chunkNo) ; 
          newArr.push(a);
        }
      }
       return newArr ;
    }
    console.log(chunkArr(nums, 5));

Answer 26

这个问题可能有很多解决方案。

我最喜欢的一个是：

function chunk(array, size) {
    const chunked = [];

    for (element of array){
        let last = chunked[chunked.length - 1];

        if(last && last.length != size){
            last.push(element)
        }else{
            chunked.push([element])
        }
    }
   
    return chunked;
}


function chunk1(array, size) {
    const chunked = [];

    let index = 0;

    while(index < array.length){
        chunked.push(array.slice(index,index+ size))
        index += size;
    }
    return chunked;
}

console.log('chunk without slice:',chunk([1,2,3,4,5,5],2));
console.log('chunk with use of slice funtion',chunk1([1,2,3,4,5,6],2))

Answer 27

为此 https://www.npmjs.com/package/array.chunk 创建了一个 npm 包

var result = [];

for (var i = 0; i < arr.length; i += size) {
  result.push(arr.slice(i, size + i));
}
return result;

当使用TypedArray时

var result = [];

for (var i = 0; i < arr.length; i += size) {
  result.push(arr.subarray(i, size + i));
}
return result;

Answer 28

有很多答案，但这是我使用的：

const chunk = (arr, size) =>
  arr
    .reduce((acc, _, i) =>
      (i % size)
        ? acc
        : [...acc, arr.slice(i, i + size)]
    , [])

// USAGE
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
chunk(numbers, 3)

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

首先，在将索引除以块大小时检查余数。

如果有余数，则返回累加器数组。

如果没有余数，则索引可被块大小整除，因此从原始数组中取出一个切片（从当前索引开始）并将其添加到累加器数组中。

因此，reduce 的每次迭代返回的累加器数组如下所示：

// 0: [[1, 2, 3]]
// 1: [[1, 2, 3]]
// 2: [[1, 2, 3]]
// 3: [[1, 2, 3], [4, 5, 6]]
// 4: [[1, 2, 3], [4, 5, 6]]
// 5: [[1, 2, 3], [4, 5, 6]]
// 6: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
// 7: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
// 8: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
// 9: [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]]

Answer 29

这是我使用的，它可能不是超级快，但它紧凑而简单：

let chunksplit = (stream, size) => stream.reduce((chunks, item, idx, arr) => (idx % size == 0) ? [...chunks, arr.slice(idx, idx + size)] : chunks, []);
//if the index is a multiple of the chunksize, add new array

let testArray = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22];

document.write(JSON.stringify( chunksplit(testArray, 5) ));
//using JSON.stringify for the nested arrays to be shown

Answer 30

使用来自 lodash 的块

lodash.chunk(arr,<size>).forEach(chunk=>{
  console.log(chunk);
})