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

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

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

// 上移，下移 (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、 ()方法的传参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个索引的赋值。

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

下载链接：网站源码/小程序源码/网站模板下载

Tags： 数据 如何 实现 数组 上移