Question

这个问题可能听起来很愚蠢，但我想为我的对象获取一个键/值对：

var a = {"e":1,"d":3,"f":4}

我尝试了Object.keys(a) // returns ["e", "d", "f"]

这不会让我获得与键相关的值，我怎样才能让两者都能在页面中显示。

HTML：

<div>
  <img src={value}/> //here i want value 1 to be displayed
{key} //with "e"
</div>

我该怎么办？谢谢！

Answer 1

你走了。要从对象获取key/value pair，请使用纯JavaScript方式Object.entries()：

执行以下操作

＆＃13;

var a = {"e":1,"d":3,"f":4}

for (const [key, value] of Object.entries(a)) {
  console.log(`${key} ${value}`);
}

＆＃13;

Answer 2

你能做到的一种方法是：

var a = {"e":1,"d":3,"f":4}

 for(var key in a){
  alert(key + ' : ' + a[key])
 }

如果你需要遍历每一对。然而，对于in循环在javascript中有点janky，如果你决定，你应该阅读一下有关该路线的信息。

https://jsfiddle.net/edh4131/hd9p7cxq/

Answer 3

var a = {"e":1,"d":3,"f":4}
let container = document.querySelector('.container')

Object.entries(a).forEach(entry =>{
	let div = document.createElement('div')
  let img = document.createElement('img')
  img.src = entry[1]
  div.textContent = entry[0]
  div.appendChild(img)
  
  container.appendChild(div)
})

<div class="container">
  
</div>

Answer 4

如果您想获得单个值：

Just use: *a.e* or *a[e]* return 1 

eg. <img src={a.e} />

如果您想通过多种方式迭代Object以获取值：

var a = {"e":1,"d":3,"f":4}

方法1：使用for：

for ( var x in a) {
    console.log('v:',a[x]);
}

方法2：使用地图：

Object.keys(a).map( (k) => {console.log('k',a[k])} );

方法3：使用foreach：

Object.keys(a).forEach(function(key,index) {
        console.log('a[key]',a[key]);
      });

如何获取对象的键/值对

4 个答案: