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
Feb 25 Javascript
js 巧妙去除数组中的重复项
Jan 25 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
vue中appear的用法
Aug 17 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 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异步执行的详解
2013/06/03 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
php 数组元素快速去重
2017/05/05 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
Python中字典的基本知识初步介绍
2015/05/21 Python
python在文本开头插入一行的实例
2018/05/02 Python
实践Vim配置python开发环境
2018/07/02 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
Python绘制数码晶体管日期
2021/02/19 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
QA工程师岗位职责
2013/11/20 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
受资助学生感谢信
2015/01/21 职场文书
《假如》教学反思
2016/02/17 职场文书
世界文化遗产导游词
2019/08/07 职场文书