Javascript：遍历 JSON 对象 [重复]答案

【问题标题】：Javascript: Iterating over JSON objects [duplicate]Javascript：遍历 JSON 对象 [重复]
【发布时间】：2017-07-10 04:20:29
【问题描述】：

我有一个想要遍历的 JSON 对象。

"phone": {
    "Samsung": {
        "type": "S7"
    },
    "iPhone": {
        "type": "6S"
    },
    "Google": {
        "type": "Pixel"
    }
}

我正在使用Object.key 映射每个值，我认为这是处理对象的正确方法：

render() {
    //this.props.phone contains the objects "Samsung", "iPhone", and "Google"
    return (
        Object.keys(this.props.phones).map((type) => {
            console.log(type)
            return (
                <p>Type of phone: {type}</p>
            )
        })
    )
}

但是，当我期望一个对象返回时，上面的 console.log 会返回这个：

为什么它返回的是一个值，而不是一个对象？

【问题讨论】：

“返回值：一个字符串数组，代表给定对象的所有可枚举属性。” developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript reactjs ecmascript-6

【解决方案1】：

严格来说，这是一个ecmascript-2017 的答案，但它可以很容易地填充到旧版本的 Javascript 中。

您想使用Object.values 或Object.entries 循环访问对象中的所有属性。 Object.keys 为您提供密钥，Object.values 为您提供属性（嗯，呵呵），Object.entries 为您提供对象中每个条目的数组 [key, value]。

您没有在当前代码中使用密钥，所以这里是 Object.values 选项：

    Object.values(this.props.phones).map((type) => {
        console.log(type)
        return (
            <p>Type of phone: {type}</p>
        )
    })

这里是Object.entries 选项，如果您想同时使用这两个选项：

    Object.entries(this.props.phones).map(([make, type]) => {
        console.log(make)
        console.log(type)
        return (
            <p>Make of phone: {make}</p>
            <p>Type of phone: {type}</p>
        )
    })

您会看到我们正在使用 ES6 解构从我们从 Object.entries 获得的数组中取出两个值。

垫片链接在每个功能的 MDN 页面上。

【讨论】：

解释不同选项并使其清晰的最佳答案 :) 谢谢！
嗨，看看你的好答案。我在您的回答中不明白的一件事是，如何在不使用任何引号的情况下返回 html 字符串？那 {} 符号是有角度的吗？谢谢
@TypingPanda 这是 React。（回答您的两个问题。）
如果您在map(([make, type]) 中忘记了[ ]，您将不会收到想要的结果。

【解决方案2】：

因为您迭代对象键。要在您的情况下返回对象，您必须使用给定的键来获取其值：

render() {
    //this.props.phone contains the objects "Samsung", "iPhone", and "Google"
    return (
        Object.keys(this.props.phones).map((type) => {
            console.log(this.props.phones[type])
            ...
        })
    )

}

【讨论】：

【解决方案3】：

对象的键是字符串，所以当您查看Object.keys(someObject) 时会得到它。与该键关联的值是您要查找的对象。为了获得该值，在您的地图迭代中，您需要使用您的密钥访问该对象。

var self = this;//close over this value for use in map
return (
    Object.keys(this.props.phones).map((type) => {
        console.log(self.props.phones[type]);//this will yield the object
        return (
            <p>Type of phone: {self.props.phones[type]}</p>
        )
    })
)

【讨论】：

【解决方案4】：

您已经对键进行了迭代。因此循环中的type 变量将设置为Samsung、iPhone 和Google。然后使用this.props.phone[type] 访问值对象。请修复代码中的 phones 键，该键与 JSON 对象中的 phone 键不同。

render() {
    //this.props.phone contains the objects "Samsung", "iPhone", and "Google"
    return (
        Object.keys(this.props.phone).map((type) => {
            console.log(this.props.phone[type])
            return (
                <p>Type of phone: {this.props.phone[type]}</p>
            )
        })
    )
}

【讨论】：

【解决方案5】：

您可以使用箭头函数和解构参数来更容易阅读您的代码。由于Object.keys 将给定对象的键作为数组返回，因此您需要遍历数组并使用当前的key 提取值。您需要为 React 中的列表元素分配一个唯一键，因此 p key={phoneKey}.. 与此相关，更多信息请查看 Lists and Keys

const {phones} = this.props;
const phoneKeys = Object.keys(phones);

render() {
    return (
        phoneKeys.map(phoneKey) => <p key={phoneKey}>Type of phone: {phones[phoneKey].type}</p>)
    )
}

【讨论】：