如何将对象数组拆分为块 [英] How to split array of objects into chunks

问题描述

我正在尝试将9个元素的数组拆分为3个数组的数组，每个数组包含3个元素.

Im trying to split my array of 9 elements into array of 3 arrays, each with 3 elements.

const data = [{
    name: 'a',
    surname: 'b'
  },
  {
    name: 'a',
    surname: 'b'
  },
  {
    name: 'a',
    surname: 'b'
  },
  {
    name: 'a',
    surname: 'b'
  },
  {
    name: 'a',
    surname: 'b'
  },
  {
    name: 'a',
    surname: 'b'
  },
  {
    name: 'a',
    surname: 'b'
  },
  {
    name: 'a',
    surname: 'b'
  },
  {
    name: 'a',
    surname: 'b'
  },
];

const chunks = Array(3).fill(Array());
data.forEach((value, index) => chunks[index % chunks.length].push(value));
console.log(chunks);

我不明白为什么要生成3个数组，每个数组中包含 9 个元素.

I can't understand why it's producing array of 3 arrays with 9 elements in each.

chunks[index%chunks.length].push(value)怎么了?

推荐答案

之所以会发生这种情况，是因为fill将相同的数组返回到每个元素，因此实际上推入这三个元素就是推到相同的引用.

This happens because fill is returning the same array to each element, hence pushing to either of the three is, in fact, pushing to the same reference.

在MDN文档中提及:

fill()方法使用静态值填充(修改)数组的所有元素，从开始索引(默认为零)到结束索引(默认数组长度).它返回修改后的数组.

The fill() method fills (modifies) all the elements of an array from a start index (default zero) to an end index (default array length) with a static value. It returns the modified array.

^- STATIC (静态)值. 在此处了解有关填充的更多信息

^-- a STATIC value. Read more about fill here

为了更加清楚，这是

const chunks = Array(3).fill(Array());

可以这样解释:

const chunks = new Array(3);
var arr = new Array();
for (var i = 0; i < chunks.length; i++) chunks.push(arr);

因此，基本上，该数组的相同引用被推到原始数组；因此，更改arr意味着更改其所有引用，因此chunks中的所有引用都指向同一个数组，因此都被更改"，这意味着它们都将指向相同的数组并共享相同的值

So, basically, the same reference of the array is pushed to the original array; hence, altering arr means altering all the references of it, so all the references in chunks are pointing to the same array, so all are "altered", meaning they all will point to the same array and share the same values.

您可以通过多种方式解决这个问题，我能想到的最快的方法是使用Array.from，如下所示，其中回调函数每次都会返回一个 new 数组.

You can solve that in many ways, the fastest I can think of is using Array.from as done below, where the callback returns a new array everytime.

const data = [
  {
    name: 'a',
    surname: 'b'
  },
  {
    name: 'a',
    surname: 'b'
  },
  {
    name: 'a',
    surname: 'b'
  },
  {
    name: 'a',
    surname: 'b'
  },
  {
    name: 'a',
    surname: 'b'
  },
  {
    name: 'a',
    surname: 'b'
  },
  {
    name: 'a',
    surname: 'b'
  },
  {
    name: 'a',
    surname: 'b'
  },
  {
    name: 'a',
    surname: 'b'
  },
];

const chunks = Array.from({length: 3}, (_) => []);
data.forEach((value, index) => chunks[index%chunks.length].push(value));
console.log(chunks);

相关代码说明

Array.from({length: 3}, (_) => []);

• Array.from从定义的属性列表中创建一个新数组.在这种情况下，它将创建一个长度为3的新数组.
• (_) => []是为分配数组中每个元素的值而调用的回调.在这种情况下，我只是返回一个 new 数组.也可以将其简化为:() => []

• Array.from creates a new array from the defined properties list. in this case, it creates a new array with length 3.
• (_) => [] is the callback invoked to assign the value of each element of the array. In that case, I'm just returning a new array. This could also be shortened to: () => []

就是这样.

这篇关于如何将对象数组拆分为块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！