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 相关文章推荐
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
JavaScript Date对象详解
Mar 01 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
JS实现小星星特效
Dec 24 Javascript
一起深入理解js中的事件对象
Feb 06 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
PHP与SQL注入攻击[二]
2007/04/17 PHP
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
EsLint入门学习教程
2017/02/17 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
python 简单的多线程链接实现代码
2016/08/28 Python
Python中一些深不见底的“坑”
2019/06/12 Python
Django中的静态文件管理过程解析
2019/08/01 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
python中entry用法讲解
2020/12/04 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
银行优秀员工事迹
2014/02/06 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
道歉情书大全
2015/05/12 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书