Question

我试图用另一个对象数组构建一个对象数组：

  const items = [
    {
      id: 'thing-1',
      size: {
        height: 50
      },
    },
    {
      id: 'thing-2',
      size: {
        height: 100
      }
    },
    {
      id: 'thing-3',
      size: {
        height: 500
      }
    },
    {
      id: 'thing-4',
      size: {
        height: 200
      }
    }
  ];

这是我的预期结果：

  const newList = [
    {id: 'thing-1', top: 0},
    {id: 'thing-2', top: 50},
    {id: 'thing-3', top: 150},
    {id: 'thing-4', top: 650},
  ];

基本上，如果所有物品都堆叠在一起，我会试图找到最高位置。在构建新列表时，它会计算每个项目的顶部位置（相对于项目堆栈）。因此，如果第一个项目位于堆栈顶部（从顶部开始为0）并且为50高，则第二个项目从顶部开始为50。最后一项的高度无关紧要。

我觉得在这种情况下可以使用reduce，但我不确定在这种情况下如何形成语法。

我尝试过这样的事情，但事情并不完全正确。另外，如果我可以做到这一点，而不是在减少范围之外创建一个空数组，那就更好了。

  const itemsReduced = [];

  items.reduce((acc, elm) => {
    itemsReduced.push({id: elm.id, top: acc + elm.size.height});
    return elm.size.height;
  });

  console.log(itemsReduced);

试过了，但这只是导致了这一点。

[
  {id: "thing-2", top: "[object Object]100"},
  {id: "thing-3", top: 600},
  {id: "thing-4", top: 700},
]

我正在考虑一个基本的循环，但它在迭代之前仍然需要项目的上下文。

Answer 1

以下是使用reduce

的简单解决方案

const items = [{id: 'thing-1', size: {height:  50}},
               {id: 'thing-2', size: {height: 100}},
               {id: 'thing-3', size: {height: 500}},
               {id: 'thing-4', size: {height: 200}}
              ];

var result = items.reduce((a, v) => {
  a.res.push({ id: v.id, top: a.i });
  a.i += v.size.height;
  return a;
}, { res: [], i: 0 } ).res;

console.log(JSON.stringify(result));

我只是使用一个对象作为reduce的初始化者，它有两个属性：res这是我们想要获得的结果数组，i是top的积累{1}}秒。
当对象在结尾处返回时，我只是得到它的res属性。

基于先前的值创建新的对象数组

1 个答案: