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压缩工具下载集合
Mar 06 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
js省市区级联查询(插件版&无插件版)
Mar 21 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
VSCode搭建React Native环境
May 07 Javascript
javascript前端实现多视频上传
Dec 13 Javascript
Vue3实现简易音乐播放器组件
Aug 14 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下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
JS不完全国际化&本地化手册 之 理论篇
2016/09/27 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
python2.7的编码问题与解决方法
2016/10/04 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
Python3计算三角形的面积代码
2017/12/18 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
物流毕业生个人的自我评价
2014/02/13 职场文书
教师自我反思材料
2014/02/14 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书