使用JavaScript Reduce生成对象

Question

我有一个数组[22, 44, 12, 9, 4, 23, 1, 11, 10, 5, 2, 123],我需要使用reduce来创建一个如下所示的对象:

{  
   numbersLessThanTen: [...],  
   numbersGreaterThanTen: [...]
}

我有解决方案,如下:

const listOfNumbers = [22, 44, 12, 9, 4, 23, 1, 11, 10, 5, 2, 123];


const groupedBySize = listOfNumbers.reduce((total, next) => {
  const less = total.numbersLessThanTen || [];
  const more = total.numbersGreaterThanTen || [];
  
  next > 10 ? total.numbersGreaterThanTen = [].concat(more, next) : total.numbersLessThanTen = [].concat(less, next);
  return total;
  
}, {});

我的问题是,为什么以下不起作用？它只返回初始值.当我使用.push()而不是.concat()时,它可以正常工作,但我真的很想知道为什么这种方式不起作用.谢谢!

const groupedBySize = listOfNumbers.reduce((total, next) => {
  // const less = total.numbersLessThanTen || [];
  // const more = total.numbersGreaterThanTen || [];
  
  next > 10 ? total.numbersGreaterThanTen.concat(next) : total.numbersLessThanTen.concat(next);
  return total;

}, {numbersGreaterThanTen: [], numbersLessThanTen:[]});

Answer 1

您的代码不起作用的原因是因为将concat()串联结果作为新数组返回。当您的reduce 函数运行时，串联工作已完成，但该串联的结果未分配给任何内容（即 中的字段total）。这就是输出结果与输入相同的原因 - 中的数组total实际上从未得到更新。以下内容来自MDN

concat 方法创建一个新数组，其中包含调用它的对象中的元素。

push()另一方面，该方法实际上会改变/更新它所调用的数组，添加您直接传递到该数组实例的任何数据。这意味着push()每次迭代调用时，数组total都会直接更新，这就是这种方法有效的原因：

Push 方法将值附加到数组中。