时间戳

首页 > 解决方案 > 以对象为初始值的数组减少

javascript - 以对象为初始值的数组减少

问题描述

任何人都可以在下面的示例中解释reduce函数发生了什么，我有一个带有键和空数组的对象作为reduce方法的初始值，我想在 reduce 方法中逐步解释

initExercises = {
  shoulders: [],
  chest: [],
  arms: [],
  back: [],
  legs: []
}

exercises = [

  {
    id: "overhead-press",
    title: "Overhead Press",
    description: "Delts exercise...",
    muscles: "shoulders"
  },

  {
    id: "dips",
    title: "Dips",
    description: "Triceps exercise...",
    muscles: "arms"
  },

  {
    id: "barbell-curls",
    title: "Barbell Curls",
    description: "Biceps exercise...",
    muscles: "arms"
  },

  {
    id: "bench-press",
    title: "Bench Press",
    description: "Chest exercise...",
    muscles: "chest"
  },

  {
    id: "pull-ups",
    title: "Pull Ups",
    description: "Back and biceps exercise...",
    muscles: "back"
  },

  {
    id: "deadlifts",
    title: "Deadlifts",
    description: "Back and leg exercise...",
    muscles: "back"
  },

  {
    id: "squats",
    title: "Squats",
    description: "Legs exercise...",
    muscles: "legs"
  }

];


console.log(
  exercises.reduce((acc, curr) => {
    const {
      muscles
    } = curr;
    acc[muscles] = [...acc[muscles], curr] //what's happening here?
    return acc;
  }, initExercises)
)

标签： javascript

解决方案

你的reduce功能解释：

exercises.reduce((acc, curr)=>{ /*...*/ }, initExercises)

...将要...

  • 放入,放入initExercises_accexercises[0]curr
  • 然后将前一次迭代的返回值放入acc并将当前元素放入curr
  • 最后，它返回最后一次迭代的返回值。

这个片段：

const {
    muscles
} = curr;

muscles...从对象curr（它是数组的一个元素）中提取属性exercises到常量muscles。

然后，这个：

acc[muscles] = [...acc[muscles], curr]

...创建一个新数组，将相同肌肉的前一个数组（位于由（刚刚解构的）变量指向的 umulator 对象的属性 中）传播（...语法）到其中，并在末尾附加 ent 对象；最后用该新数组替换（由 指向的属性）中的旧数组。accmusclescurracc[muscles]muscles

最后，它return是accumulator，为下一次迭代保留它。

因此该函数返回一个对象，其中数组的元素按其muscles属性分组。

详细迭代：

# | acc           | curr                         | muscles       | [...acc[muscles], curr]                           | return value
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
0 | initExercises | {id: "overhead-press", ... } | "shoulders"   | [{id: "overhead-press", ... }]                    | {shoulders: [{id: "overhead-press", ... }], chest: [], arms: [], back: [], legs: []}
1 | return of #0  | {id: "dips", ... }           | "arms"        | [{id: "dips", ... }]                              | {shoulders: [{id: "overhead-press", ... }], chest: [], arms: [{id: "dips", ... }], back: [], legs: []}
2 | return of #1  | {id: "barbell-curls", ... }  | "arms"        | [{id: "dips", ... }, {id: "barbell-curls", ... }] | {shoulders: [{id: "overhead-press", ... }], chest: [], arms: [{id: "dips", ... }, {id: "barbell-curls", ... }], back: [], legs: []}
...

推荐阅读