使用映射到jsx打印对象的属性？答案

【问题标题】：Print object's property using map to jsx?使用映射到jsx打印对象的属性？
【发布时间】：2023-03-04 00:20:02
【问题描述】：

我有这组数据

const data = [{
    date: '2017-1-1',
    abc: 1,
    def: 2
},{
    date: '2017-1-2',
    abc: 3,
    def: 6
}]

如何打印

on date of 2017-1-1
abc is equal to 1 and def is equal to 2

on date of 2017-1-2
abc is equal to 3 and def is equal to 6

我一直坚持将 abc 和 def 属性输出到 jsx。如果我做 data.map(o => o.abc) 我可以得到 1 但如何使用地图获取属性？或者我应该使用Object.keys 和forEach？？

我不能硬编码 abc 或 def 因为它可能有其他新属性。

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

使用模板文字。类似：

data.map(o => `on date of ${o.date} abc is equal to ${o.abc} and def is equal to ${o.def}`)

【讨论】：

【解决方案2】：

使用 forEach 代替 map，因为您对获取新数组不感兴趣

尝试以下解决方案

const data = [{
    date: '2017-1-1',
    abc: 1,
    def: 2
},{
    date: '2017-1-2',
    abc: 3,
    def: 6
}];

data.forEach(function(item){
    var output = [];
    Object.keys(item).forEach(function(key) {
    if(key !== "date")
        output.push(key +" is equal to "+item[key]);
});

console.log("on date of "+item.date+" "+ output.join(" and "));
})

【讨论】：

@Debabrata，请再读一遍，因为我提到我不需要数组，因此我不想使用地图
@CeciliaChan，我已经更新了动态键值对的解决方案
@Debabrata，你在开玩笑吗，清除你的事实，forEach 返回 undefined 并且 map 返回 Array
@CeciliaChan，这是你所期望的吗？