如何返回映射函数中附加到对象的新声明的变量

Question

检查下面的代码

const responseData = {
students: [
{
id: 1,
classAttended: 'Level 4',
classRoomNo: '101',
attendance: '3',
marks: '50',
optIn: 'Y',
historyDataList: [
{
id: 6,
shivirdetails: {
id: 1,
year: '2016',
},
classAttended: 'Level 1',
classRoomNo: '108',
attendance: '5',
marks: '50',
optIn: 'Y',
},
],
},
{
id: 2,
classAttended: 'Level 3',
classRoomNo: '101',
attendance: '3',
marks: '50',
optIn: 'Y',
historyDataList: [
{
id: 8,
shivirdetails: {
id: 6,
year: '2016',
},
classAttended: 'Level 3',
classRoomNo: '101',
attendance: '5',
marks: '64',
optIn: 'Y',
},
],
},
],
};
const getHistoricalData = (student, year, key) => {
const { historyDataList } = student;
const res = historyDataList.map((historyData) => {
const {
shivirdetails,
shivirdetails: { year: shivirYear},
} = historyData;
if (shivirdetails && shivirYear == year && historyData[key]) {
return historyData[key];
}
});
return res[0]
};
const {students} = responseData
const result = students.map((student) => {
student.classRoomNo2016 = getHistoricalData(student, 2016, 'classRoomNo')
student.marks2016 = getHistoricalData(student, 2016, 'marks')
student.classAttended2016 = getHistoricalData(student, 2016, 'classAttended')
})
console.log(result)

结果产生未定义的结果。可能是因为在结果的映射函数中没有返回任何内容。我想知道如何返回student和附加在它后面的值。如果我控制台这些值，它们会给我正确的数据。但我无法返回它，这就是为什么我的结果显示两个未定义数组的原因。

Answer 1

您的map函数只是设置student对象中的值，但不返回任何内容。您可以使用student对象和spread操作符来修改和添加附加属性，并在map函数中作为响应对象返回。类似这样的东西：

const result = students.map((student) => ({...student, 
'classRoomNo2016' : getHistoricalData(student, 2016, 'classRoomNo'),
'marks2016' : getHistoricalData(student, 2016, 'marks'),
'classAttended2016' : getHistoricalData(student, 2016, 'classAttended')
}))

const responseData = {
students: [
{
id: 1,
classAttended: 'Level 4',
classRoomNo: '101',
attendance: '3',
marks: '50',
optIn: 'Y',
historyDataList: [
{
id: 6,
shivirdetails: {
id: 1,
year: '2016',
},
classAttended: 'Level 1',
classRoomNo: '108',
attendance: '5',
marks: '50',
optIn: 'Y',
},
],
},
{
id: 2,
classAttended: 'Level 3',
classRoomNo: '101',
attendance: '3',
marks: '50',
optIn: 'Y',
historyDataList: [
{
id: 8,
shivirdetails: {
id: 6,
year: '2016',
},
classAttended: 'Level 3',
classRoomNo: '101',
attendance: '5',
marks: '64',
optIn: 'Y',
},
],
},
],
};
const getHistoricalData = (student, year, key) => {
const { historyDataList } = student;
const res = historyDataList.map((historyData) => {
const {
shivirdetails,
shivirdetails: { year: shivirYear},
} = historyData;
if (shivirdetails && shivirYear == year && historyData[key]) {
return historyData[key];
}
});
return res[0]
};
const {students} = responseData
const result = students.map((student) => ({...student, 
'classRoomNo2016' : getHistoricalData(student, 2016, 'classRoomNo'),
'marks2016' : getHistoricalData(student, 2016, 'marks'),
'classAttended2016' : getHistoricalData(student, 2016, 'classAttended')
}))
console.log(result)

Answer 2

在您的map函数中，您没有任何返回语句，因此它不返回任何内容。在某些情况下，您可以在不使用return语句的情况下返回。

例如

const result2 = students.map((student) => getHistoricalData(student, 2016, 'classRoomNo'));

结果是["108", "101"]。这实际上是的一个简短版本

const result2 = students.map((student) => { return getHistoricalData(student, 2016, 'classRoomNo')});

因此，您不能使用return语句返回。

在您的情况下，据我所知，您希望返回一个应该有3个字段的对象(classRoomNo2016、marks2016、classAttented2016(。因此，您必须创建一个要返回的对象。

它应该看起来像这样：

const result = students.map((student) => {
student.classRoomNo2016 = getHistoricalData(student, 2016, 'classRoomNo');
student.marks2016 = getHistoricalData(student, 2016, 'marks');
student.classAttended2016 = getHistoricalData(student, 2016, 'classAttended');
const returnType = {classRoomNo2016:student.classRoomNo2016,   marks2016:student.marks2016, classAttended2016:student.classAttended};
return returnType;
});

Answer 3

如果值不追加，则可以使用JSON.parse(JSON.stringify())复制任何对象；

此外，在函数getHistoricalData中，如果条件不匹配，则不返回任何内容。您可以简单地返回undefined。

您可以在snipped中找到、调查并运行完全修复的代码。

const responseData = {
students: [
{
id: 1,
classAttended: 'Level 4',
classRoomNo: '101',
attendance: '3',
marks: '50',
optIn: 'Y',
historyDataList: [
{
id: 6,
shivirdetails: {
id: 1,
year: '2016',
},
classAttended: 'Level 1',
classRoomNo: '108',
attendance: '5',
marks: '50',
optIn: 'Y',
},
],
},
{
id: 2,
classAttended: 'Level 3',
classRoomNo: '101',
attendance: '3',
marks: '50',
optIn: 'Y',
historyDataList: [
{
id: 8,
shivirdetails: {
id: 6,
year: '2016',
},
classAttended: 'Level 3',
classRoomNo: '101',
attendance: '5',
marks: '64',
optIn: 'Y',
},
],
},
],
};
const getHistoricalData = (student, year, key) => {
const { historyDataList } = student;
const res = historyDataList.map((historyData) => {
const {
shivirdetails,
shivirdetails: { year: shivirYear},
} = historyData;
if (shivirdetails && shivirYear == year && historyData[key]) {
return historyData[key];
} else {
return undefined;
}
});
return res[0]
};
const {students} = responseData;
const result = students.map((student) => {
const cpStd = JSON.parse(JSON.stringify(student));
cpStd["classRoomNo2016"] = getHistoricalData(student, 2016, 'classRoomNo');
cpStd["marks2016"] = getHistoricalData(student, 2016, 'marks');
cpStd["classAttended2016"] = getHistoricalData(student, 2016, 'classAttended');
return cpStd;
})
console.log(result)