Javascript:迭代 JSON 对象

Question

这个问题已经有答案了:

How do I loop through or enumerate a JavaScript object? (48 个回答)

已关闭 6 年前。

我有一个想要迭代的 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当我期待一个对象返回时，上面返回了这个:

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

Answer 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 页面上。