js实现数据列表表格（数组）上移下移功能封装及实现思想

标题## js实现数据列表表格（数组）上移下移功能封装及实现思想

1.先说明一下实现思路：

​ 一、首先先要确定封装方法需要用到的参数，1.需要处理的数组

​ 2.需要跟换位置的目标数组

​ 3.升序还是降序

​ 二、如何实现升序降序：

​ 1.升序：通过两层遍历去交换目标位置实现升序。

​ 2.降序：利用升序的思想先对原数组和目标数组进行反转(倒叙)，然后 通过升序的方法进行排序，然后再进行一次反转(倒叙)就能得到想要的顺序。

2.代码：

//排序：升序降序
/**
 * 
 * @param {原数组} data 
 * @param {*标杆} sign 
 * @param {*升序/降序} isAdd 
 * @returns 
 */
function ascendingOrder(data, sign, isAdd) {
    
    
    let newData = []//用于存储新的数据
    let index = 0//记录索引
    if (!isAdd) {
    
    //降序就先反转原数组和需要处理的数组
        data = reversal(data)
        sign = reversal(sign)
    }
    sign.map((item, indey) => {
    
    //遍历需处理的数组
        for (let i = index; i < data.length; i++) {
    
    //遍历原数组
            if (item.id === data[i].id) {
    
    //找到目标数据
                if (i !== 0) {
    
    //判断是否是首位
                    newData[i] = data[i - 1]//交换需要更换的位置
                    newData[i - 1] = data[i]
                } else {
    
    //如果是首位就不更改
                    newData[i] = data[i]
                }
                if (indey < sign.length - 1) {
    
    //如果后边还有需要处理的数据就记录索引下一次就从索引位置继续查找
                    index = i + 1//下一次就从替换完的后一位开始
                    data = [...newData, ...data.slice(index)]//原数据需要修改为排序后的数组，这里使用的是扩展运算符(...)，考虑兼容性可以使用别的方式进行合并
                    break//本轮的替换完成就可以结束本次循环减少不必要的性能消耗
                }
            } else {
    
    
                newData[i] = data[i]//如果不是目标数组就直接赋值
            }
        }
    })
    if (!isAdd) {
    
    //如果是降序就需要把先前倒叙处理完的数据反转为目标顺序
        newData = reversal(newData)
    }
    return newData //返回结果
}
// 数组反转
function reversal(data) {
    
    
    let newData = []
    for (let index = data.length - 1; index >= 0; index--) {
    
    
        newData.push(data[index]);
    }
    return newData
}

3.总结

​ 数组列表的升序降序方法很多，先要理清思路去再写代码进行实现，多动手多动手。