试图了解用于对象映射的reduce函数吗？

Question

I'm going through this tutorial and it is using reduce to take a Array<Student> and turn it into a { [key: string]: Array<string | number> } { [key: string]: Array<string | number> } it has this expression in it. This is the first time I have seen something like this so I want to check if I understand it right. This is the entire expression:

    export interface Student {
        id: string;
        name: string;
        sex: 'Male' | 'Female';
        standard: number;
        quarterlyScore: number;
        halfyearlyScore: number;
        annualScore: number;
    }

    export function getStudentGraphData(students:Array<Student>): { [key: string]: Array<string |number> } {
        return students.reduce((
            { names: nArray, quarterly: qArray,halfyearly: hArray, annual: aArray },
            { name, quarterlyScore, halfyearlyScore,annualScore }) => {
            return {
                names: [...nArray, name],
                quarterly: [...qArray,quarterlyScore],
                halfyearly: [...hArray,halfyearlyScore],
                annual: [...aArray, annualScore]
            };
        }, { names: [], quarterly: [], halfyearly: [, annual: [] });
    }

IIUC this is the part we want to reduce to (The return value):

 { names: nArray, quarterly: qArray, halfyearly: hArray, annual: aArray }

This is the student object:

{ name, quarterlyScore, halfyearlyScore, annualScore }

This is the actual reduction. It takes the array from the previous step and blows it up into the new array using the spread ( ... ) operator and then puts the parameter from the student object, like name at the end of the new array

return {
            names: [...nArray, name],
            quarterly: [...qArray, quarterlyScore],
            halfyearly: [...hArray, halfyearlyScore],
            annual: [...aArray, annualScore]
        };

This is the initial value of the return value:

{ names: [], quarterly: [], halfyearly: [], annual: [] }

Did I get that right approximately?

Answer 1

Did I get that right approximately?

Yes. Each call to the reduce callback creates a new object with the arrays from the original object expanded into new arrays that also have the name (etc.) of each object being visited. So for every entry in students , the code creates and throws away five objects (the container object and four arrays).

The for-of version, without all those temporary objects, would be:

const names = [];
const quarterly = [];
const halfyearly = [];
const annual = [];
for (const { name, quarterlyScore, halfyearlyScore, annualScore } of students) {
    names.push(name);
    quarterly.push(quarterlyScore);
    halfyearly.push(halfyearlyScore);
    annual.push(annualScore);
}
return {names, quarterly, halfyearly, annual};

Or you could do four map calls, if the students array isn't so long that it matters that you're making four passes through it instead of one (which it usually isn't):

return {
    names: students.map(({name}) => name),
    quarterly: students.map(({quarterlyScore}) => quarterlyScore),
    halfyearly: students.map(({halfyearlyScore}) => halfyearlyScore),
    annual: students.map(({annualScore}) => annualScore)
};

Answer 2

Your solution is over-complicated, even for the reduce technique you use. The main culprit is the renaming you do of the accumulator properties, only to rename them again when you return a new accumulator. Easier is to just keep the accumulator names, especially as they don't conflict with your item property names.

This version cleans up that, removes the TS annotations (which you might have to add back; but they do tend to clutter things up), and replaces the outer function declaration with an arrow:

 const getStudentGraphData = (students) => students.reduce( ( { names, quarterly, halfyearly, annual }, { name, quarterlyScore, halfyearlyScore, annualScore } ) => ({ names: [...names, name], quarterly: [...quarterly, quarterlyScore], halfyearly: [...halfyearly, halfyearlyScore], annual: [...annual, annualScore] }), { names: [], quarterly: [], halfyearly: [], annual: [] } ) const students = [{id: 1, name: 'Barney', sex: 'Male', quarterlyScore: 83, halfyearlyScore: 88, annualScore: 91}, {id: 2, name: 'Betty', sex: 'Female', quarterlyScore: 92, halfyearlyScore: 89, annualScore: 95}, {id: 3, name: 'Fred', sex: 'Male', quarterlyScore: 69, halfyearlyScore: 73, annualScore: 68}, {id: 4, name: 'Wilma', sex: 'Female', quarterlyScore: 85, halfyearlyScore: 78, annualScore: 80}] console.log(getStudentGraphData(students)) 

But sometimes the right abstraction can clean things up on its own. Here's another version that ends up working more like the multiple map versions, but abstracts that to a more declarative function:

 const collect = (fields) => (objs) => Object.entries(fields).reduce( (a, [k, v]) => ({...a, [k]: objs.map(o => o[v])}), {} ) const getStudentGraphData = collect({ names: 'name', quarterly: 'quarterlyScore', halfyearly: 'halfyearlyScore', annual: 'annualScore', }) const students = [{id: 1, name: 'Barney', sex: 'Male', quarterlyScore: 83, halfyearlyScore: 88, annualScore: 91}, {id: 2, name: 'Betty', sex: 'Female', quarterlyScore: 92, halfyearlyScore: 89, annualScore: 95}, {id: 3, name: 'Fred', sex: 'Male', quarterlyScore: 69, halfyearlyScore: 73, annualScore: 68}, {id: 4, name: 'Wilma', sex: 'Female', quarterlyScore: 85, halfyearlyScore: 78, annualScore: 80}] console.log(getStudentGraphData(students)) 

The collect function might be useful in other places in a codebase, but even if it's not, the now more declarative version of getStudentGraphData might make it worth adding collect .

The only API question I had in creating collect was how to decide whether the target names ( names , quarterly , etc.) should be the keys and the source name ( name , quarterlyScore , etc.) the values of the configuration object or vice versa. This feels slightly more correct, but either version makes getStudentGraphData much more understandable.

Update

For some reason, this has been stuck in my head. I keep thinking about what sort of API something like collect should have. While I'm pretty happy with that last version, here is a significantly different one, and one which allows for no confusion about what is being collected and what those results are called:

 const collect = field => { let fields = [[field, field]] const fn = (objs) => fields.reduce( (a, [k, v]) => ({...a, [k]: objs.map(o => o[v])}), {} ) fn.and = (field) => { fields.push([field, field]) return fn } fn.as = (field) => { fields[fields.length - 1][0] = field return fn; } return fn; } const getStudentGraphData = collect('id') .and('name') .and('quarterlyScore').as('quarterly') .and('halfyearlyScore').as('halfyearly') .and('annualScore').as('annual') const students = [{id: 1, name: 'Barney', sex: 'Male', quarterlyScore: 83, halfyearlyScore: 88, annualScore: 91}, {id: 2, name: 'Betty', sex: 'Female', quarterlyScore: 92, halfyearlyScore: 89, annualScore: 95}, {id: 3, name: 'Fred', sex: 'Male', quarterlyScore: 69, halfyearlyScore: 73, annualScore: 68}, {id: 4, name: 'Wilma', sex: 'Female', quarterlyScore: 85, halfyearlyScore: 78, annualScore: 80}] console.log(getStudentGraphData(students)) 

This is a somewhat unusual technique I've only used a few times in production code, but it works well, and the definition of getStudentGraphData is about as readable as I can imagine.

---

My take on reduce is that it is powerful and necessary, but I try not to use it if I can use map , filter , find , some , every , or the like. Those give clear explanations of what you're doing in the code. reduce is more like a for -loop: often not self-explanatory.

Answer 3

Would be cool to see answers that are more efficient and more elegant.

I guess a more efficient (not sure about "elegant") approach would be to make a generic function that abstracts the computation at hand and doesn't limit itself to a particular data structure. For example:

 let collect = objects => { let res = {}; for (let obj of objects) for (let [k, v] of Object.entries(obj)) res[k] = (res[k] || []).concat(v) return res; }; // students = [ {id:1, name:'1', sex:'X', standard: 1, propName: 11, anotherSillyPropName:111,}, {id:2, name:'2', sex:'Y', standard: 2, propName: 22, anotherSillyPropName:222,}, {id:3, name:'3', sex:'Z', standard: 3, propName: 33, anotherSillyPropName:333,}, ] console.log(collect(students)) 

Note that our collect doesn't know anything about "students" and their "scores", it simply transposes a matrix of values. So you can reuse it everywhere you need such functionality.

On a general note, if your domain-specific functions like getStudentGraphData tend to grow longer than a couple of lines, it's a strong indication that the underlying computation must be factored out and separated from the specific problem domain.