用JS实现删除一行数据，并重新排序功能

备注：基于antd的table组件，涉及敏感数据已替换。

在做项目时候，产品提出一个需求，点击表格的删除按钮后

期待效果：删除当前行数据，后排数据向上移动。具体如下：排序和头像需要保持原来的排序功能（1-头像1，2-头像2，3-头像3   删除第二行后依然保持1-头像1，2-头像2 ）， 姓名，成绩，备注则删掉当前行数据

分析过程： 

原始数据：

  如果直接删除第二行数据，那么会变成1-头像1，3-头像3，4-头像4

如何解决呢，刚开始我用思路1实现的，想起来简单，但后面随着业务复杂一路血泪史，不堪回首。。

思路1：把排序，头像，姓名，成绩，备注  拆成两个数组，其中排序，头像为listLeft，姓名，成绩，备注为数组listRight， 点击删除按钮时候永远删除listLeft最后一列，listRight删除当前行即可。最后把listLeft和listRight合并重新组成新数组用来渲染。

优缺点： 思路简单，但实现起来代码量复杂，尤其牵扯到异步更新数组，校验等复杂业务，中间数组很多时候难以追踪，不好维护。

有没有简单一点的方案呢，

思路2： 表格整个数据源为数组list，要删除第二行，则把第二行数据和第三行数据对应的的排序和姓名先调换，然后再删除当前行数据。就OK啦

直接上代码

  const handleDeleteOrder = (order) => {
        let arr = [...list]
        // 先交换当前行和下一行的等级和图标
        const newArray = arr.map((item, index)=>{
          if(order-1 === index){
            // 交换排序
          let  tempOrder = arr[index].order
          arr[index].order = arr[index+1].order
          arr[index+1].order = tempOrder
            // 交换图像
          let  tempPic = arr[index].pic
          arr[index].pic = arr[index+1].pic
          arr[index+1].pic = tempPic
          }
          return item
        })
        // 再删除当前行数据
        newArray.splice(order - 1, 1)
        setTotalList(newArray)
  }

优缺点：思路较为难想，但实现起来相比思路1代码量可节省一大半。