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为您提供了属性（嗯，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.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页面上链接。

Answer 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])
            ...
        })
    )

}

Answer 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>
        )
    })
)

Answer 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>
            )
        })
    )
}

Answer 5

您可以使用箭头函数和params的解构来更轻松地阅读代码。由于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>)
    )
}

Javascript：迭代JSON对象

5 个答案: