javascript - 如何迭代 Map() 对象？

Question

我有一个需要迭代的 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
})
}

谢谢! :)

Answer 1

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

keys - 迭代 map 中的键

values - 迭代值

entries - 迭代键和值，给你[key, value]数组(这是默认值)

As Nina notes , Map s 还提供 forEach ，它循环遍历它们的内容，为回调提供值、键和映射作为参数。
使用适合您的用例的一种。例如，如果您尝试替换 Object.keys , 使用 keys .类似地，如果您想要 map 中的条目(我注意到您在某一时刻使用 Object.entries)，请使用 entries或默认迭代器。
请注意，在您的代码中的一些地方，您似乎正在尝试使用 [] 对 map 进行索引。 .这不适用于 map ，您需要使用 get .
这是一个使用默认迭代器的简单示例(这也是您从 entries 获得的):

const map = new Map();
map.set(1, "one");   // Could also include these when calling
map.set(2, "two");   // the constructor but I wanted to
map.set(3, "three"); // avoid any confusion

for (const [key, value] of map) { // Using the default iterator (could be `map.entries()` instead)
    console.log(`The value for key ${key} is ${value}`);
}

另请注意，您正在破坏 one of React's rules通过基于现有状态设置新状态，但不使用 setState 的回调版本.如果在设置新状态时需要使用现有状态，您 必须使用回调版本:

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