如何从javascript中的对象值返回键？答案

【问题标题】：How to return the key from object value in javascript?如何从javascript中的对象值返回键？
【发布时间】：2017-08-10 13:06:56
【问题描述】：

我在 React 中有一个对象，我映射并希望让它交互：我想要它，所以当用户点击一个元素旁边的“X”按钮时，它会 console.log 那个点击元素的键。

这是对象：

var obj = {
  person1: {
    name: 'iggy',
    superPower: 'awesomeness',
    favDonut: 'chocolate'
  },
  person2: {
    name: 'iggy2',
    superPower: 'stupendousness',
    favDonut: 'glazed'
  },
  person3: {
    name: 'iggy3',
    superPower: 'amazingness',
    favDonut: 'chocolate sprinkles'
  }
};

迭代看起来像这样：

X chocolate
X glazed
X chocolate sprinkles

如果我单击 glazed 上的 x，我希望它到 console.log person2，因为那是 glazed 的父对象。如果我在 chocolate sprinkles 上单击 x，我希望它在 console.log person3 上。

这里是小提琴：https://jsfiddle.net/iggyfiddle/b9rreoje/2/

我想弄清楚的方法是getPersonName 函数。允许用户单击 x 和 console.log 相关对象键的最佳方法是什么？

【问题讨论】：

标签： javascript reactjs object key-value

【解决方案1】：

您需要将onClick 设置为一个内联函数，该函数使用相应的人员对象调用getPersonName。

  getPersonName: function(person){
    console.log(person);
  },

  render(){
    const donutValues = Object.values(obj).map((person, index) => <li key={index}><a href="#" onClick={function(){this.getPersonName(person)}.bind(this)}>X</a> {person.favDonut} </li>);
    return (
      <div>
        Hello 
          <ul>
            {donutValues}
          </ul>
          Give me person: {this.state.person}
      </div>
    );
  }

在这里找到更新的 jsfiddle：https://jsfiddle.net/8637u8qL/

【讨论】：

【解决方案2】：

而不是Object.values，你会想要Object.keys，这样你就可以访问相应的密钥。

  getPersonName: function(person){
    console.log(person);
  }

const donutValues = Object.keys(obj).map((key, index) => <li key={index}><a href="#" onClick={() => this.getPersonName(key)}>X</a> {obj[key].favDonut} </li>);

更新小提琴：https://jsfiddle.net/b9rreoje/3/

【讨论】：

Object.keys(obj)... 同时显示 obj[key].favDonut。没想到。谢谢！！