Javascript实现数组中的元素上下移动


Posted in Javascript onApril 28, 2017

前言

我们交换数组可以实现元素上下移动了,这个效果我们在表格或以前排序算法中都会用到,下面来看一个JavaScript下实现交换数组元素上下移动例子

在写项目的时候,要实现一个数组记录上下移动的示例。写起来也没有没麻烦,无非是交换数组元素。最终实现代码如下,比较重要的是那个函数。

示例代码:

// 交换数组元素
  var swapItems = function(arr, index1, index2) {
    arr[index1] = arr.splice(index2, 1, arr[index1])[0];
    return arr;
  };
 
  // 上移
  $scope.upRecord = function(arr, $index) {
    if($index == 0) {
      return;
    }
    swapItems(arr, $index, $index - 1);
  };
 
  // 下移
  $scope.downRecord = function(arr, $index) {
    if($index == arr.length -1) {
      return;
    }
    swapItems(arr, $index, $index + 1);
  };

合理使用那个方法,可以实现置顶和最底的一些实现。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery 选择器、过滤器介绍
Feb 14 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
js实现图片轮播效果
Dec 19 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
老生常谈javascript中逻辑运算符&&和||的返回值问题
Apr 13 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 #jQuery
JS简单判断滚动条的滚动方向实现方法
Apr 28 #Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 #Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 #Javascript
jquery实现图片上传前本地预览
Apr 28 #jQuery
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 #Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 #Javascript
You might like
我的论坛源代码(九)
2006/10/09 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
PHP实现事件机制的方法
2015/07/10 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
基于jquery的气泡提示效果
2010/05/31 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
[20:30]职业巡回赛回顾
2018/08/09 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
详解python中sort排序使用
2019/03/23 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
zooplus意大利:在线宠物商店
2019/08/07 全球购物
客房主管岗位职责
2013/12/09 职场文书
小学节能减排倡议书
2014/05/15 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
幼儿园见习总结
2015/06/23 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python