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选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 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关联数组的10个操作技巧
2013/01/21 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
js重写方法的简单实现
2016/07/10 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
介绍Python中几个常用的类方法
2015/04/08 Python
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
Python用字典构建多级菜单功能
2019/07/11 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
Django分组聚合查询实例分享
2020/04/29 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
韩国11街:11STREET
2018/03/27 全球购物
电气自动化自荐信
2013/10/10 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
财会自我鉴定范文
2013/12/27 职场文书
纠纷协议书
2014/04/16 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
详解Python自动化之文件自动化处理
2021/06/21 Python
Python时间操作之pytz模块使用详解
2022/06/14 Python