JavaScript：遍历JSON对象

Question

JavaScript：遍历JSON对象

27

我有一个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 返回了这个值：

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

- patrickhuang94

返回值：一个字符串数组，表示给定对象的所有可枚举属性。 - Felix Kling

5个回答

5

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

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

}

- Bartek Fryzowicz

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

- Travis J

1

你已经遍历了键。因此，在循环中，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>
            )
        })
    )
}

- uautkarsh

1

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

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

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

- cubbuk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lonesomeday · Accepted Answer

严格来说，这是一个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 页面都链接了相应的 shims。