迭代对象数组中的第n个索引[重复]答案

【问题标题】：Iterate over nth amount of indexes in an array of objects [duplicate]迭代对象数组中的第n个索引[重复]
【发布时间】：2020-01-13 16:31:57
【问题描述】：

我正在尝试从下面的对象返回前 4 个网格值的总和（预期输出 5）

[
  {
    "id": 1,
    "grid": 1
  },
  {
    "id": 2,
    "grid": 2
  },
  {
    "id": 3,
    "grid": 1
  },
  {
    "id": 4,
    "grid": 1
  },
  {
    "id": 5,
    "grid": 1
  }
]



data.map(item => {
   console.log(item.grid);
});

.map 相对较新，我通常会使用 forwhile 迭代器，但想知道是否有人可以建议使用更 es6 样式的模式来解决问题。

【问题讨论】：

您可以结合使用 .slice 和 .reduce data.slice(0,4).reduce((acc, currV) => acc + currV.grid, 0) 更多信息请查看 How to find the sum of an array of numbers
如果要求和，可能.reduce 比.map 更好

标签： javascript

【解决方案1】：

您可以使用.slice() 将Array 切割成您想要的Elements，然后.reduce() 进行总结；使用Destructuring 获取grid 值

const data = [
  {"id": 1, "grid": 1},
  {"id": 2, "grid": 2},
  {"id": 3, "grid": 1},
  {"id": 4, "grid": 1},
  {"id": 5, "grid": 1}
];

const result = data.slice(0, 4).reduce((a, {grid}, i) => {
  return a += Number(grid);
}, 0);

console.log(result)

【讨论】：

【解决方案2】：

使用slice从数组中获取前4个对象，然后使用reduce对grid求和。

const input = [{
    "id": 1,
    "grid": 1
  },
  {
    "id": 2,
    "grid": 2
  },
  {
    "id": 3,
    "grid": 1
  },
  {
    "id": 4,
    "grid": 1
  },
  {
    "id": 5,
    "grid": 1
  }
];

console.log(input.slice(0, 4).reduce((a, {
  grid
}) => a + grid, 0));

【讨论】：