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 getElementsByClassName实现代码
Oct 11 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
clipboard在vue中的使用的方法示例
Oct 19 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
JAVA/JSP学习系列之七
2006/10/09 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
Python循环语句之break与continue的用法
2015/10/14 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
六一儿童节致辞
2015/07/31 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
15个值得收藏的JavaScript函数
2021/09/15 Javascript