js中new Map ( )的使用场景-526互联

当有一组数据：

let arr = [
  { name: '钢筋', value: 11 },
  { name: '水泥', value: 12 },
  { name: '混凝土', value: 13 },
  { name: '加气砖', value: 14 }
]

后台返回了一个13，但是我们想要拿到的是混凝土，一般的做法：

arr.forEach(item => {
  if (item.value == 13) {
    console.log(item.name); // 混凝土
  }
})

如果后台返回100个编号，我们难道要遍历100次，然后再通过if来判断吗？
如果可以把那一组数据转化成为对象

let obj = {
	11:'钢筋',
	12:'水泥',
	13:'混凝土',
	14:'加气砖'
}

然后通过obj[11]来进行获取对应的value值，是不是就更方便了，但是对象的key不可以是数字的，只能是变量或者字符串；
这时候就需要用到new Map()了，new Map创建的对象，里面的key可以是任何数据（如: {12: '水泥'}）；

let arr = [
  { name: '钢筋', value: 11 },
  { name: '水泥', value: 12 },
  { name: '混凝土', value: 13 },
  { name: '加气砖', value: 14 }
]

// 处理下数据
let newArr = []
arr.forEach(item => {
  newArr.push([item.value, item.name])
})

let arrMap = new Map(newArr)	// Map的参数格式是[[11:'钢筋'],[12:'水泥']]，这样才可以通过get方法来获取对应的value
console.log(arrMap.get(13))    // 打印的是'混凝土'

/* 或者 */ 
let arr = [
  { name: '钢筋', value: 11 },
  { name: '水泥', value: 12 },
  { name: '混凝土', value: 13 },
  { name: '加气砖', value: 14 }
]
// 处理下数据
let arrMap = new Map()
arr.forEach(item => {
  arrMap.set(item.value, item.name)
})
console.log(arrMap.get(13));

get(key)方法获得的是value的值，而set(key,value)是往map对象中添加一个键值对
所以使用new Map的好处是可以直接通过get方法，来找出key对应的value；
new Map()除了set和get方法外，还有以下方法：
map.size(): 查询键值对数量；
map.has(key): 查询该map对象中是否含有该键对应的值，返回布尔类型；
map.delete(key): 删除某个键，返回true, 删除失败返回false；
map.clear(): 清楚所有键值对；

遍历方法：
1、 map.keys(): 遍历map的keys，用法如下：

let map = new Map([
  [1, '张三'],
  [2, "李四"],
  [3, "王五"]
])
let keys = map.keys();
for (i = 0; i < map.size; i++) {
  key = keys.next().value;
  console.log(key);
}

// 或者使用for...of...遍历
for (const key of keys) {
  console.log(key);
}

2、 map.values(): 遍历map的values，用法如下：

let map = new Map([
  [1, '张三'],
  [2, "李四"],
  [3, "王五"]
])
let values = map.values();
for (i = 0; i < map.size; i++) {
  value = values.next().value;
  console.log(value);
}

// 或者使用for...of...遍历
for (const key of values) {
  console.log(key);
}

来源：小智