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绝句欣赏 一些经典的js代码
Feb 22 Javascript
JS求平均值的小例子
Nov 29 Javascript
jQuery链使用指南
Jan 20 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
vue实现行列转换的一种方法
Aug 06 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
vue递归实现树形组件
Jul 15 Vue.js
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作的文本留言本的例子(四)
2006/10/09 PHP
PHP5 字符串处理函数大全
2010/03/23 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
Highcharts入门之简介
2016/08/02 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Python 远程开关机的方法
2020/11/18 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
全球最大的服务市场:Fiverr
2017/01/03 全球购物
大二学生学习个人自我评价
2014/01/19 职场文书
学生安全教育材料
2014/02/14 职场文书
关于保护环境的标语
2014/06/09 职场文书
颐和园导游词
2015/01/30 职场文书
农村党员干部承诺书
2015/05/04 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
SQL Server Agent 服务无法启动
2022/04/20 SQL Server