时间戳

首页 > 解决方案 > 如何将对象数组拆分为块

javascript - 如何将对象数组拆分为块

问题描述

我试图将我的 9 个元素的数组拆分为 3 个数组的数组，每个数组有 3 个元素。

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 个元素。

有什么问题chunks[index%chunks.length].push(value)？

标签： javascriptarrays

解决方案

发生这种情况是因为fill将相同的数组返回给每个元素，因此推送到三个中的任何一个实际上是推送到相同的引用。

在 MDN 文档中提到：

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

^--静态值。在此处阅读有关填写的更多信息

为了更清楚，这是：

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都指向同一个数组，因此所有引用都被“更改”，这意味着它们都将指向同一个数组并共享相同的值。

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

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 的新数组。
  • (_) => []是为分配数组的每个元素的值而调用的回调。在这种情况下，我只是返回一个新数组。这也可以缩短为：() => []

就是这样。

推荐阅读