如何迭代Map()对象?

时间:2019-02-04 09:58:18

标签: javascript reactjs

我有一个需要迭代的Map()对象,因此可以获得星期几和选定的小时数。下面的代码不起作用,因为Object.keys(newFieldReservationPrice).forEach试图循环一个Map()对象,这似乎没有意义。那么,有没有更好的解决方案呢?

这是下面的代码:

handlePriceInput = (e, hour, day) => {
let value = e.target.value

const newFieldReservationPrice = this.state.newFieldReservationPrice
console.log('newFieldReservationPrice', newFieldReservationPrice) // A Map();
let map;

if (!newFieldReservationPrice instanceof Map) {
  console.log('!== Map')
  console.log('newFieldReservationPrice is a Map()? inside if ()', newFieldReservationPrice)
  if (newFieldReservationPrice[day] && newFieldReservationPrice[day][hour]) {
      newFieldReservationPrice[day][hour] = Number(value)
  } 
} else {
  map = new Map();
  console.log('map object', Object.keys(newFieldReservationPrice)) // logs map object []

  Object.keys(newFieldReservationPrice).forEach(key => {
    console.log('key', key)
      map.set(key, new Map(Object.entries(newFieldReservationPrice[key])));
  }); // This doesn't work
  console.log('Am I a Map()? map', map)

  const aux = map.get(day)
  console.log('aux day', aux) // A Map()
  aux.set(hour, Number(value)) // Comes as undefined || Cannot read property 'set' of undefined
  console.log('aux set', aux) // A Map()

  map.set(day, aux);
  console.log('what do I have?', map)

}
const isReservationPrice = !newFieldReservationPrice instanceof Map ? newFieldReservationPrice : map
console.log('isReservationPrice', isReservationPrice)

this.setState({
  newFieldReservationPrice: isReservationPrice
})
}

谢谢! :)

3 个答案:

答案 0 :(得分:3)

Map提供了三种获取其内容迭代器的方法:

  • keys-迭代地图中的键
  • values-迭代值
  • entries-迭代键和值,为您提供[key, value]数组

As Nina notesMap还提供forEach,它们遍历其内容,为回调提供值,键和映射作为参数。

使用适合您的用例的一种。例如,如果您要替换Object.keys,请使用keys。同样,如果您要在地图中输入条目(我注意到您曾经在某一点使用Object.entries),请使用entries

请注意,在代码的某些地方,您似乎试图使用[]索引到地图。这不适用于地图,您需要使用get


还请注意,通过基于现有状态设置新状态而不是使用setState的回调版本来破坏one of React's rules。如果在设置新状态时需要使用现有状态,则必须使用回调版本:

this.setState(prevState => {
    // ...use `prevState` values (*not* `this.state`!) to create an object with
    // the updates, then return the object...
});

答案 1 :(得分:3)

您可以使用Map#forEach并直接迭代Map

答案 2 :(得分:1)

您可以使用for of来迭代for (const [key, value] of myMap) { console.log(key, value); } 对象:

for (const [key, value] of myMap.entries()) {
  console.log(key, value);
}

与遍历条目相同:

forEach

正如@Nina Scholz所说,您可以在Map原型(doc MDN)上使用myMap.forEach((value, key, map) => { console.log(key, value); }

{{1}}