JavaScript逻辑删除后动态获取数组索引

近日有一个小需求,为了后台更方便,在联调的时候,数组中的每条数据如果删除,要逻辑删除,这本身没啥问题,但关键是前端列表展示还需要展示索引,那么这个索引可就不能直接输出了,要动态计算。

开始吧

不管在写什么功能,在写之前一定要先缕一下需求,以及步骤,才能方便后续,而且如果项目过于复杂,建议先本地模拟,这样方便调试错误。

模拟数组

/**
 * 默认一个数组,20个元素
 */
const tempArr = []
for (let index = 1; index <= 20; index++) {
   tempArr.push({
       id: index
   })
}

模拟逻辑删除

/**
 * 模拟数组的第 7和11 个逻辑删除
 */
tempArr[7].isDeleted = true
tempArr[11].isDeleted = true

获取逻辑删除的索引

/**
 * 保存数组中 逻辑删除元素的索引 的数组
 */
const isDeletedIndexList = []
// 获取已删除的索引
tempArr.map((item, index) => {
    if (item.isDeleted === true) {
        isDeletedIndexList.push(index)
    }
})

// 打印测试
// 输出 isDeletedIndexList [ 7, 11 ]
console.log('isDeletedIndexList', isDeletedIndexList)

核心算法函数

/**
 * 数组逻辑删除,动态获取索引
 * 算法:
 *      1,获取索引溢出 :已删除的索引中大于等于当前索引的个数
 *      2,如果没有,则代表当前索引之前没有删除,原索引返回即可
 *      3,如果有,用当前索引 - 获取索引溢出,就是最终的索引
 * @param  curIndex  当前索引(非逻辑删除)
 */
function getAsyncArrIndex (curIndex) {
    const CallSize = isDeletedIndexList.filter(itemIndex => {
        return curIndex >= itemIndex
    })
    if (CallSize.length > 0) {
        return curIndex - CallSize.length
    }
    return curIndex
}

测试结果

// 测试,肯定全部返回true
console.log('第0条索引应该输出0', getAsyncArrIndex(0) === 0)
console.log('第5条索引应该输出5', getAsyncArrIndex(5) === 5)
console.log('第7条索引应该输出6', getAsyncArrIndex(7) === 6)
console.log('第7条索引应该输出8', getAsyncArrIndex(9) === 8)
console.log('第11条索引应该输出9', getAsyncArrIndex(11) === 9)
console.log('第13条索引应该输出11', getAsyncArrIndex(13) === 11)
console.log(`第20条索引应该输出18`, getAsyncArrIndex(20) === 18)

写在最后

晚上下班写好了之后,早上来到公司,后台来找我了,说不让我标记了,说他们本来就要进行反查什么的,不让前端搞这么复杂的了,NMMP.....我还能说什么呢?。。。

Last modification:December 1st, 2019 at 01:09 am
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment