如何使用 JavaScript 将长数组拆分为较小的数组

How to split a long array into smaller arrays, with JavaScript

提问by Bill

I have an array of e-mails (it can be just 1 email, or 100 emails), and I need to send the array with an ajax request (that I know how to do), but I can only send an array that has 10 or less e-mails in it. So if there is an original array of 20 e-mails I will need to split them up into 2 arrays of 10 each. or if there are 15 e-mails in the original array, then 1 array of 10, and another array of 5. I'm using jQuery, what would be the best way to do this?

我有一组电子邮件（可以是 1 封电子邮件，也可以是 100 封电子邮件），我需要使用 ajax 请求发送该数组（我知道该怎么做），但我只能发送一个具有其中包含 10 封或更少的电子邮件。因此，如果有 20 封电子邮件的原始数组，我需要将它们分成 2 个数组，每个数组 10 个。或者，如果原始数组中有 15 封电子邮件，那么 1 个数组为 10，另一个数组为 5。我正在使用 jQuery，这样做的最佳方法是什么？

回答by jyore

Don't use jquery...use plain javascript

不要使用 jquery...使用普通的 javascript

var a = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

var b = a.splice(0,10);

//a is now [11,12,13,14,15];
//b is now [1,2,3,4,5,6,7,8,9,10];

You could loop this to get the behavior you want.

你可以循环这个以获得你想要的行为。

var a = YOUR_ARRAY;
while(a.length) {
    console.log(a.splice(0,10));
}

This would give you 10 elements at a time...if you have say 15 elements, you would get 1-10, the 11-15 as you wanted.

这一次会给你 10 个元素……如果你说 15 个元素，你会得到 1-10，你想要的 11-15。

回答by Blazemonger

var size = 10; var arrayOfArrays = [];
for (var i=0; i<bigarray.length; i+=size) {
     arrayOfArrays.push(bigarray.slice(i,i+size));
}
console.log(arrayOfArrays);

Unlike splice(), slice()is non-destructive to the original array.

不同于splice(),slice()对原始数组是非破坏性的。

回答by Claudio

Just loop over the array, splicing it until it's all consumed.

只需循环遍历数组，拼接它直到全部消耗完。

var a = ['a','b','c','d','e','f','g']
  , chunk

while (a.length > 0) {

  chunk = a.splice(0,3)

  console.log(chunk)

}

output

输出

[ 'a', 'b', 'c' ]
[ 'd', 'e', 'f' ]
[ 'g' ]

回答by Alexander Paramonov

You can use lodash: https://lodash.com/docs

您可以使用 lodash：https://lodash.com/docs

_.chunk(['a', 'b', 'c', 'd'], 2);
// → [['a', 'b'], ['c', 'd']]

回答by jfriend00

Assuming you don't want to destroy the original array, you can use code like this to break up the long array into smaller arrays which you can then iterate over:

假设您不想破坏原始数组，您可以使用这样的代码将长数组分解为较小的数组，然后您可以对其进行迭代：

var longArray = [];   // assume this has 100 or more email addresses in it
var shortArrays = [], i, len;

for (i = 0, len = longArray.length; i < len; i += 10) {
    shortArrays.push(longArray.slice(i, i + 10));
}

// now you can iterate over shortArrays which is an 
// array of arrays where each array has 10 or fewer 
// of the original email addresses in it

for (i = 0, len = shortArrays.length; i < len; i++) {
    // shortArrays[i] is an array of email addresss of 10 or less
}

回答by Justin

As a supplement to @jyore's answer, and in case you still want to keep the original array:

作为@jyore's answer的补充，如果您仍想保留原始数组：

var originalArray = [1,2,3,4,5,6,7,8];

var splitArray = function (arr, size) {

  var arr2 = arr.slice(0),
      arrays = [];

  while (arr2.length > 0) {
      arrays.push(arr2.splice(0, size));
  }

  return arrays;
}

splitArray(originalArray, 2);
// originalArray is still = [1,2,3,4,5,6,7,8];

回答by Nobita

Another implementation:

另一个实现：

const arr = ["H", "o", "w", " ", "t", "o", " ", "s", "p", "l", "i", "t", " ", "a", " ", "l", "o", "n", "g", " ", "a", "r", "r", "a", "y", " ", "i", "n", "t", "o", " ", "s", "m", "a", "l", "l", "e", "r", " ", "a", "r", "r", "a", "y", "s", ",", " ", "w", "i", "t", "h", " ", "J", "a", "v", "a", "S", "c", "r", "i", "p", "t"];

const size = 3; 
const res = arr.reduce((acc, curr, i) => {
  if ( !(i % size)  ) {    // if index is 0 or can be divided by the `size`...
    acc.push(arr.slice(i, i + size));   // ..push a chunk of the original array to the accumulator
  }
  return acc;
}, []);

// => [["H", "o", "w"], [" ", "t", "o"], [" ", "s", "p"], ["l", "i", "t"], [" ", "a", " "], ["l", "o", "n"], ["g", " ", "a"], ["r", "r", "a"], ["y", " ", "i"], ["n", "t", "o"], [" ", "s", "m"], ["a", "l", "l"], ["e", "r", " "], ["a", "r", "r"], ["a", "y", "s"], [",", " ", "w"], ["i", "t", "h"], [" ", "J", "a"], ["v", "a", "S"], ["c", "r", "i"], ["p", "t"]]

NB - This does not modify the original array.

注意 - 这不会修改原始数组。

Or, if you prefer a functional, 100% immutable (although there's really nothing bad in mutating in place like done above) and self-contained method:

或者，如果您更喜欢函数式的、100% 不可变的（尽管像上面所做的那样在原地改变确实没有什么不好）和自包含方法：

function splitBy(size, list) {
  return list.reduce((acc, curr, i, self) => {
    if ( !(i % size)  ) {  
      return [
          ...acc,
          self.slice(i, i + size),
        ];
    }
    return acc;
  }, []);
}

回答by tawnos178

Array.reduce could be inefficient for large arrays, especially with the mod operator. I think a cleaner (and possibly easier to read) functional solution would be this:

Array.reduce 对于大型数组可能效率低下，尤其是使用 mod 运算符。我认为一个更干净（并且可能更容易阅读）的功能解决方案是这样的：

const chunkArray = (arr, size) =>
  arr.length > size
    ? [arr.slice(0, size), ...chunkArray(arr.slice(size), size)]
    : [arr];

回答by Filipe Nicoli

I would like to share my solution as well. It's a little bit more verbose but works as well.

我也想分享我的解决方案。它有点冗长，但也有效。

var data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

var chunksize = 4;


var chunks = [];

data.forEach((item)=>{
  if(!chunks.length || chunks[chunks.length-1].length == chunksize)
  chunks.push([]);

  chunks[chunks.length-1].push(item);
});

console.log(chunks);

Output (formatted):

输出（格式化）：

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

回答by AFurlepa

Another method:

另一种方法：

var longArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var size = 2;

var newArray = new Array(Math.ceil(longArray.length / size)).fill("")
    .map(function() { return this.splice(0, size) }, longArray.slice());

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

This doesn't affect the original array as a copy, made using slice, is passed into the 'this' argument of map.

这不会影响原始数组，因为使用切片制作的副本被传递到 map 的“this”参数中。