JS如何实现数组数据的上移下移

Vue项目开发中碰到对表格数据实现上移，下移的需求，只是纯前端实现移动数组数据，不跟服务端做交互。

经研究，用splice方法简洁优雅，具体实现如下：

// 上移，下移
onMove(code, dir) {
    let moveComm = (curIndex, nextIndex) => {
        let arr = this.stack.selAwardList
        arr[curIndex] = arr.splice(nextIndex, 1, arr[curIndex])[0]
        return arr
    }
    this.stack.selAwardList.some((val, index) => {
        if (val.awardCode === code) {
            if (dir === 1 && index === 0) {
                this.$message.warning('已在顶部！')
            } else if (dir === 0 && index === this.stack.selAwardList.length - 1) {
                this.$message.warning('已在底部！')
            } else {
                let nextIndex = dir === 1 ? index - 1 : index + 1
                this.stack.selAwardList = moveComm(index, nextIndex)
            }
            return true
        }
        return false
    })
}

解释一下实现原理：

1、onMove()方法的传参code是this.stack.selAwardList数组元素的属性，用some遍历循环找到该数据在数组中的索引值（index）后停止遍历循环，dir传1表示上移，传0表示下移，根据dir的值得出nextIndex的索引值。

2、moveComm方法实现调换索引数据后返回换位后的数组。arr[curIndex] = arr.splice(nextIndex, 1, arr[curIndex])[0]做了3件事：

第一件：arr.splice(nextIndex, 1）删除下个索引的数据

第二件：arr.splice(nextIndex, 1, arr[curIndex])用当前索引数据（arr[curIndex]）替换下个索引的数据

第三件：arr[curIndex] = arr.splice(nextIndex, 1, arr[curIndex])[0]当arr.splice()方法执行后会返回删除的数据，并将删除的数据赋值给当前索引

说的有点啰嗦，总的意思是这句代码同时完成了2个索引的赋值。

大家有其他更优雅的实现方法欢迎提出。