在对象数组中获取单键和单值的更简单方法?

时间:2018-10-18 15:13:08

标签: javascript reactjs

在JavaScript中是否有更自然的方法来获取对象的键和值?

我正在尝试在我的React App中填充一个对象数组。

数据如下:

Methods:[{"foo": "walk"}, {"bar":"run"}],

  getMethodList(){
    return this.state.Methods.map((item, index) => (
      <div key={index}>
        <input type="radio"
            name="Method"
            value={item.key}  <---Get the key of object
            onChange={this.handleMethodSelect}
        />
        {item.value} <---Get the value of the object
      </div>
    ))
  }

Object.keys()Objects.value()返回键和值的列表。我想要的不是那个。

是否有一种简单的方法可以像其他编程语言(Python,Java)那样获取键和对象的值?如果没有,解决我的问题的最佳“ Javascript”方法是什么?

1 个答案:

答案 0 :(得分:1)

按照@ ashish-singh的建议,您应该使用Object.entries

Methods:[{"foo": "walk"}, {"bar":"run"}],

getMethodList(){
  return this.state.Methods.map((item, index) => (
    <div key={index}>
      <input type="radio"
        name="Method"
        value={Object.entries(item)[0][0]} 
        onChange={this.handleMethodSelect}
     />
     {Object.entries(item)[0][1]} 
    </div>
  ))
}

让我说,这是在不知道键并将键用作值的情况下使用对象的一种不寻常的方式。 可能您应该使用类似以下的内容:

Methods:[{ key: "foo", value: "walk"}, { key: "bar", value:"run"}],

getMethodList(){
  return this.state.Methods.map((item, index) => (
    <div key={index}>
      <input type="radio"
        name="Method"
        value={item.key} 
        onChange={this.handleMethodSelect}
     />
     {item.value} 
    </div>
  ))
}