我在完成 FullStackOpen 練習時遇到了真正的麻煩，它需要向頁面呈現一些資料。給出下一個代碼，我必須渲染Parts每個課程Course的數量，并減少Parts/Exersices渲染每個課程的練習總數。
我無法到達 Parts 物件陣列的內部
{
name: "Half Stack application development",
id: 1,
parts: [
{
name: "Fundamentals of React",
exercises: 10,
id: 1,
},
{
name: "Using props to pass data",
exercises: 7,
id: 2,
},
{
name: "State of a component",
exercises: 14,
id: 3,
},
{
name: "Redux",
exercises: 11,
id: 4,
},
],
},
{
name: "Node.js",
id: 2,
parts: [
{
name: "Routing",
exercises: 3,
id: 1,
},
{
name: "Middlewares",
exercises: 7,
id: 2,
},
],
},
];```
uj5u.com熱心網友回復：
對于陣列的每個元素，這并不難：
- 零件數是
currentElement.parts.length - 可以使用計算練習數
Array.reduce
const data = [
{
name: "Half Stack application development",
id: 1,
parts: [{
name: "Fundamentals of React",
exercises: 10,
id: 1,
},
{
name: "Using props to pass data",
exercises: 7,
id: 2,
},
{
name: "State of a component",
exercises: 14,
id: 3,
},
{
name: "Redux",
exercises: 11,
id: 4,
},
],
},
{
name: "Node.js",
id: 2,
parts: [{
name: "Routing",
exercises: 3,
id: 1,
},
{
name: "Middlewares",
exercises: 7,
id: 2,
},
],
},
];
const res = []
for (const course of data) {
const tmpObj = {
courseName: course.name,
parts: course.parts.length,
exercises: course.parts.reduce((a,b) => a b.exercises, 0)
}
res.push(tmpObj)
}
console.log(res)uj5u.com熱心網友回復：
如果您想要每門課程的練習總數，則需要按名稱減少每個練習；并且對于每個零件串列，減少練習次數。
const main = () => {
const courseData = courses.map(({ name, parts }) => ({
name,
parts: parts.length,
exercises: parts.reduce((sum, { exercises }) => sum exercises, 0)
}));
console.log(courseData);
};
const courses = [{
name: "Half Stack application development",
id: 1,
parts: [
{ name: "Fundamentals of React" , exercises: 10 , id: 1 },
{ name: "Using props to pass data" , exercises: 7 , id: 2 },
{ name: "State of a component" , exercises: 14 , id: 3 },
{ name: "Redux" , exercises: 11 , id: 4 }
],
}, {
name: "Node.js",
id: 2,
parts: [
{ name: "Routing" , exercises: 3 , id: 1 },
{ name: "Middlewares" , exercises: 7 , id: 2 }
],
}];
main();.as-console-wrapper { top: 0; max-height: 100% !important; }轉載請註明出處，本文鏈接：https://www.uj5u.com/net/520872.html
上一篇：如何獲得多個物件中整數的總和？