以 object 作为初始值的数组归约

Question

谁能在下面的示例中解释reduce function 发生了什么，我有一个带键的 object 和空 arrays 作为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) )

Answer 1

您的reduce function 解释说：

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

...将要...

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

这个片段：

const {
    muscles
} = curr;

...从 object curr （它是exercises数组的一个元素）中提取muscles属性到恒定muscles 。

然后，这个：

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

...创建一个新数组，将相同肌肉的前一个数组（位于（刚刚解构的） muscles变量指向的累加器对象的属性中）传播（ ...语法）到其中，并将curr acc附加到结束; 最后用新数组替换acc[muscles]中的旧数组（ muscles指向的属性）。

最后，它return s acc ，以保留它以供下一次迭代。

所以 function 返回一个 object，其中数组的元素按其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: []}
...

Answer 2

展开语法， acc[muscles] = [...acc[muscles], curr]等于acc[muscles] = acc[muscles].concat(curr) curr例如将当前锻炼添加到关键muscles组