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 (三) 管理jQuery包装集
Feb 23 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
javascript实现弹出层效果
Dec 10 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中常用编辑器推荐
2007/01/02 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
js密码强度检测
2016/01/07 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
Python pickle模块用法实例分析
2015/05/27 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
Python图片的横坐标汉字实例
2019/12/04 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
学期自我鉴定范文
2013/10/01 职场文书
西式结婚主持词
2014/03/14 职场文书
自我鉴定标准格式
2014/03/19 职场文书
机器人总动员观后感
2015/06/09 职场文书
龙猫观后感
2015/06/09 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL