JavaScript：迭代JSON对象[重复]

Question

我有一个要迭代通过的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提供属性(well，duh)，object.entries提供对象中每个条目的数组[key,value]。

当前代码中没有使用该键，因此下面是object.values选项：

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

下面是object.entrients选项，如果您想同时使用这两个选项：

    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获得的数组中获得两个值。

每个功能的shims都链接在MDN页面上。