如何使用 .map() 获取对象数组中的键

Question

所以这里我有一个这样的数组

[{"facebook":"https://facebook.com"}, {"instagram":"https://instagram.com"}]

现在我想将键显示为图标名称，将值显示为 href 链接。

socials.map((social, index) => { 
    return(
        <View key={index}>
             <Icon name={social.facebook} onPress={() => {}} />
        </View>
    ); 
})

如何在不选择特定键名称的情况下将键分配给图标名称？谢谢。

Answer 1

使用 Object.keys() -

let data = [{"facebook":"https://facebook.com"}, {"instagram":"https://instagram.com"}]
data.forEach(social => console.log(Object.keys(social)[0]));

在这里，我使用 .forEach() 而不是 .map() 只是为了记录密钥的名称，但想法与 .map() 相同。

Answer 2

如果socials是你的初始数据数组，那么我会执行以下操作：

socials.map((social, index) =>
    (
        <View key={index}>
             <Icon name={Object.keys(social)[0]} onPress={() => {}} />
        </View>
    )
)

Answer 3

您可以将 Object.keys 与map方法一起使用。Object.keys 返回它自己的属性数组。因此Object.keys(item)[0]将给出每个对象的密钥。

var social = [{
  "facebook": "https://facebook.com"
}, {
  "instagram": "https://instagram.com"
}]
var x = social.map(function(item) {
  return Object.keys(item)[0]
})
console.log(x)