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

简介Vue项目开发中碰到对表格数据实现上移,下移的需求,只是纯前端实现移动数组数据,不跟服务端做交互。经研究,用splice方法简洁优雅,具体实现如下://上移,下移onMove(code,dir){letmoveComm=(curIndex,nextIndex)=>{letarr=this.stack.selAwardListarr[curIndex]=arr.splice(nextIndex,1,

  

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

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

//上移,下移 (code,dir){letmoveComm=(curIndex,nextIndex)=>{letarr=this.stack.selAwardListarr[curIndex]=arr.splice(nextIndex,1,arr[curIndex])[0]returnarr}this.stack.selAwardList.some((val,index)=>{if(val.awardCode===code){if(dir===1&&index===0){this.$message.warning('已在顶部!')}elseif(dir===0&&index===this.stack.selAwardList.length-1){this.$message.warning('已在底部!')}else{letnextIndex=dir===1?index-1:index+1this.stack.selAwardList=moveComm(index,nextIndex)}returntrue}returnfalse})}

解释一下实现原理:

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个索引的赋值。

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

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

网站技巧

WordPress建站教程,纯代码实现wordpress防止发布文章出现标题重复,自动检测重复标题文章

2024-9-19 19:44:17

网站技巧

帝国CMS封装的ajax加载信息框架代码

2024-9-19 19:44:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧