JavaScript中的MAP对象

MAP对象，存储格式为键值对。和普通对象无异，不过它的方法要特殊一些。

const map = new Map(); //created
map.set(key, value); //赋值
map.get(key); //读取
map.delete(key); //删除指定键值
map.clear(); //删除所有键值对

MAP对象主要用于频繁进行赋值删除时，会有更好的性能，同时键值可以为任意数据类型，譬如

const obj = {age: 18, name: 'richardo'};
map.set(obj, 18);
console.log(map); //{{age:18, name: 'richardo'} => 18}

同时，MAP对象中的键值对是有序的。

这里举一个例子，个人学习项目中的生成【小计行】，最后还能生成总计行。

 原数据类型类似，obj1~4都存在JSON对象中，其特点是每个对象内有相同属性，需要对应地累计。

const obj1 = {a: 0, b: 18, c: 233}
const obj2 = {a: 118, b: 0, c: 20}
const obj3 = {a: 5, b: 12, c: 0}
const obj4 = {a: 118, b: 0, c: 0}

HTML部分：

  <el-table
      id="tableID"
      ref="tableRef"
      :data="processData">
    <el-table-column label="序号" type="index" width="60" align="center"/>
    <el-table-column v-for="(item, index) in state.colObj" :key="index" :prop="item.prop" header-align="center"
                     :label="item.label" :align="item.align" :width="item.width" :min-width="item.minWidth" />
  </el-table>

计算部分：

const billType = ['RepairCount', 'RejectBill', 'DoingBill', 'MarkBill', 'DoneBill']
//合计数据
const processData = computed(() => {
  let tempObj = {}
  let tempArr = []
  const tempMap = new Map()
  const countMap = new Map()
  state.tableData.forEach((item, index, arr) => {
    tempArr.push(item)
    if(item.CompanyName === arr[index + 1]?.CompanyName){
      //若后一项的公司和当前相同，则加上该值
      billType.forEach(key => {
        tempMap.set(key, (tempMap.get(key) || 0) + item[key])
      })
    } else {
      billType.forEach(key => {
        tempMap.set(key, (tempMap.get(key) || 0) + item[key])
        countMap.set(key, (countMap.get(key) || 0) + tempMap.get(key))
        tempObj[key] = tempMap.get(key)
      })
      tempArr.push({UserName: '小计', ...tempObj})
      tempMap.clear()
      if(index === arr.length - 1) {
        billType.forEach(key => {
          tempObj[key] = countMap.get(key)
        })
        tempArr.push({UserName: '总计', ...tempObj})
      }
    }
  })
  return tempArr
})

个人用的后端是Node JS，这么看来同样的小计生成在后端也能完成就是了。

小作一记，巩固储备。