繁体   English   中英

React / ES6减少对象

[英]React/ES6 reduce object

我有以下用于特定日期锻炼的对象:

{
  "2019-03-02": [
    {
        "id": 1,
        "workout_day": "2019-03-02",
        "title": "Swimming",
        "description": "",
        "completed": true,
        "points": 5
    },
    {
        "id": 2,
        "workout_day": "2019-03-02",
        "title": "Running",
        "description": "",
        "completed": false,
        "points": 0
    },
    {
        "id": 3,
        "workout_day": "2019-03-02",
        "title": "Rowing",
        "description": "",
        "completed": true,
        "points": 3
    },
  ],
 "2019-03-05": [...]
}

我想获得一个新对象,该对象每天显示有多少锻炼,已经完成了多少锻炼以及总分,如下所示:

{
  "2019-03-02": {
    "workouts": 3,
    "workouts_completed": 2,
    "total_points": 8
  },
  "2019-03-05: {...}
}

但是,此刻我完全被困住了。 感谢帮助!

这会将您的数据缩减为您想要转换为的数据

 const data = { '2019-03-02': [{ id: 1, workout_day: '2019-03-02', title: 'Swimming', description: '', completed: true, points: 5 }, { id: 2, workout_day: '2019-03-02', title: 'Running', description: '', completed: false, points: 0 }, { id: 3, workout_day: '2019-03-02', title: 'Rowing', description: '', completed: true, points: 3 } ], '2019-03-03': [{ id: 1, workout_day: '2019-03-02', title: 'Swimming', description: '', completed: true, points: 7 }, { id: 2, workout_day: '2019-03-02', title: 'Running', description: '', completed: false, points: 0 }, { id: 3, workout_day: '2019-03-02', title: 'Rowing', description: '', completed: false, points: 3 } ] } const reducedData = Object.keys(data).reduce((acc, key) => { acc[key] = { workouts: data[key].length, workouts_completed: data[key].reduce((acc, item) => { if (item.completed) return acc + 1 return acc }, 0), total_points: data[key].reduce((acc, item) => { return acc + item.points }, 0) } return acc }, {}) console.log(reducedData) 

您有多种解决方案可以实现此目的。 这是结合Object.entries + Array.reduce

Object.entries(input).reduce((acc, [date, workouts]) => {
  const completed = workouts.filter(workout => workout.completed);

  return {
    ...acc,
    [date]: {
      workouts: workouts.length,
      workouts_completed: completed.length,
      total_points: completed.reduce((acc, workout) => acc + workout.points, 0),
    }
  };
}, {});

请注意,并非所有主要浏览器都提供Object.entries

这样就可以了。

我使用了Array.prototype.reduce和默认值的解构。

 var data = { "2019-03-02": [{ "id": 1, "workout_day": "2019-03-02", "title": "Swimming", "description": "", "completed": true, "points": 5 }, { "id": 2, "workout_day": "2019-03-02", "title": "Running", "description": "", "completed": false, "points": 0 }, { "id": 3, "workout_day": "2019-03-02", "title": "Rowing", "description": "", "completed": true, "points": 3 }, ], "2019-03-05": [{ "id": 1, "workout_day": "2019-03-02", "title": "Swimming", "description": "", "completed": false, "points": 0 }, { "id": 2, "workout_day": "2019-03-02", "title": "Running", "description": "", "completed": false, "points": 0 }, { "id": 3, "workout_day": "2019-03-02", "title": "Rowing", "description": "", "completed": true, "points": 8 }, ] }; var result = {}; for (let key in data) { result[key] = data[key].reduce(({ workouts = 0, workouts_completed = 0, total_points = 0 }, currentValue) => { return { workouts: workouts + 1, workouts_completed: currentValue.completed ? workouts_completed + 1 : workouts_completed, total_points: total_points + currentValue.points }; }, {}); } console.log(result); 

假设您的对象在一个名为json的对象中拥有特定日期的锻炼,则可以使用Object.keys()遍历所有键。 然后,您可以对此进行map并一次获取特定一天的锻炼。 然后,您可以使用它每天创建一个对象。 要计算诸如totalPoints类的totalPoints您将使用reduce求和。

Object.keys(json).map(key => {
    return {
        [key]: {
            workoutsCompleted: json[key].length,
            totalPoints: json[key].reduce((accum, workout) => accum + workout.points, 0)
        }
    };
});
 const result = {};

 for(const [workout_day, entries] of Object.entries(input)) {
   result[workout_day] = { 
     workouts: entries.length,
     workouts_completed: entries.reduce((acc, e) => acc + e.completed, 0),
     total_points: entries.reduce((acc, e) => acc + e.points, 0),
  };
}

Object.entries对于映射对象非常有用。

const data = {
  "2019-03-02": [
    {
        "id": 1,
        "workout_day": "2019-03-02",
        "title": "Swimming",
        "description": "",
        "completed": true,
        "points": 5
    },
    {
        "id": 2,
        "workout_day": "2019-03-02",
        "title": "Running",
        "description": "",
        "completed": false,
        "points": 0
    },
    {
        "id": 3,
        "workout_day": "2019-03-02",
        "title": "Rowing",
        "description": "",
        "completed": true,
        "points": 3
    },
  ],
 "2019-03-05": []
};

function makeReport (report, workout) {
  return {
    workouts: report.workouts + 1,
    workouts_completed: workout.completed ? report.workouts_completed + 1 : report.workouts_completed,
    total_points: report.total_points + workout.points
  };
}

const out = Object.entries(data).reduce(function (report, [date, workouts]) {
  return {
    ...report,
    [date]: workouts.reduce(makeReport, { workouts: 0, workouts_completed: 0, total_points: 0 })
  };
}, {});

console.log(out);

哪个日志:

{ '2019-03-02': { workouts: 3, workouts_completed: 2, total_points: 8 },
  '2019-03-05': { workouts: 0, workouts_completed: 0, total_points: 0 } }

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM