巧妙使用HashMap,优化页面的增删改查

前言

相信大家都会遇到这样的业务场景，页面渲染文章列表，点击某个帖子可以进入帖子详情，进入帖子详情后，能对帖子进行增删改查操作（比如删除/编辑帖子），看看优化前和优化后的区别，有更好的方案欢迎探讨。

// 数据源
const list = [
    {id: 1,title: "标题1",content: "xxx",detail: {}},
    {id: 2,title: "标题1",content: "xxx",detail: {}},
    {id: 3,title: "标题1",content: "xxx",detail: {}},
    ...
]

代码优化前

// 列表渲染
// 遍历list

// 获取帖子详情数据
function getPostDetail = (list, id) => {
    return list.find(ele => ele.id === id)
}

// 删除当前帖子
function deleteCurPost = (list, data) => {
    return list.filter(ele => ele.id !== data.id)
}

// 编辑当前帖子
function updatePost = (list, data) => {
    list = list.map(ele => {
        if(ele.id === data.id) {
            return data
        } 
        return ele
    }) 
}

代码优化后

1. 准备2个转换函数
   • 数组转对象
   • 对象转数组

const arrToObj = (arr) => {
    return arr.reduce((prev, current) => {
      if (current._id) {
        prev[current._id] = current;
      }
      return prev;
    }, {});
};

const objToArr = (obj) => {
    return Object.keys(obj).map((key) => obj[key]);
};

2. 源数据转换成HashMap存储方式

 const columns = arrToObj(list)

3. 渲染

// 列表渲染
objToArr(columns)

// 获取帖子详情数据
function getDetailInfo = (columns,id) => {
    return columns[id]
}

// 删除当前帖子
function deleteCurPost = (columns, data) => {
    delete columns[data.id]
}

// 编辑当前帖子
function updatePost = (columns, data) => {
    columns[data.id] = data
}

HashMap数据结构的好处

1. 解决数据的冗余,让结构更加清晰
2. 高效的处理数据