代码之家 › 专栏 › 技术社区 › gib

如何将对象数组拆分为块

arrays javascript

gib · 技术社区 · 5 年前

我试着把我的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);

我不明白为什么它要用九每个元素中的元素。

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

3 回复 | 直到 5 年前

briosheje 5 年前

fill 将同一数组返回给每个元素,因此推送到三个元素中的任何一个实际上就是推送到同一个引用。

MDN文件中提到:

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

^—A 静态的 价值。 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 它们都指向同一个数组,因此都被“修改”,这意味着它们都指向同一个数组并共享相同的值。

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}, (_) => []);

从定义的属性列表中创建新数组。在本例中,它将创建一个长度为3的新数组。
(_) => [] 是调用回调函数来分配数组中每个元素的值。如果是这样的话,我只想返回一个新的阵列。这也可以缩短为: () => []

就这样。

Nina Scholz 5 年前

可以按索引和所需大小对数组进行切片。

var 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' }],
    chunks = [],
    size = 3,
    i = 0;
    
while (i < data.length) chunks.push(data.slice(i, i += size));

console.log(chunks);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Yevhen Horbunkov 5 年前

以防万一,你可能会对可行的解决方案感兴趣 3 times faster ,查看我的方法:

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 chunkArr = (arr, size) => arr.reduceRight((res,_,__,self) => [...res, self.splice(0, size)],[]);

console.log(chunkArr(data,3));

.as-console-wrapper {min-height: 100%}

Jan 5 年前

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

你已经用同一个数组对象的3倍填充了chunks数组。详细说明:

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

基本上在foreach被调用:

data.forEach((value, index) => chunk.push(value));

更改为:

const chunks = Array(3).fill(1).map(() => []);