ES6中对数组的数据进行排序
今天在工作中遇到了要对多选数据进行排序的一个功能,在此学习记录一下。
实现效果:点击左边的向下或者向上排序的按钮实现数据的排序。

选择第二个向下排序,结果如下:


具体方法如下:
//找到原来需要排序的数据在原来的数组中的位置
const index=$this.checkedCities.findIndex((item)=>{
return item==row;
});
//向上排序
if(isUp){
[$this.checkedCities[index],$this.checkedCities[index-1]]=[$this.checkedCities[index-1],$this.checkedCities[index]]
}else{
[$this.checkedCities[index],$this.checkedCities[index+1]]=[$this.checkedCities[index+1],$this.checkedCities[index]]
}
ES6中对数组的数据进行排序的更多相关文章
- ES6中的数组
数组是js中很重要的数据类型,虽然在 ES5 中,关于数组的方法和属性很多.但为了更加简洁.高效的操作数组,ES6 中又在数组原型上和实例上新增了一些方法. 一.Array方法 1.1 Array.f ...
- B表中的pid对应A表中id,查询A表中数据,根据b表中对应a表中该id的数据数目排序
B表中的pid对应A表中id,查询A表中数据,根据b表中对应a表中该id的数据数目排序 select a.*,count(*) as c from a left join b on a.id=b.ai ...
- ES6中对数组的扩展
hello,大家好,我又来了. 前面讲了字符串和数值的扩展,今天要讲的是:数组的扩展.不知道大家能否跟得上这个节奏,你们在阅读中对讲解有存在疑惑,记得留言提出来,要真正地理解,否则白白 ...
- ES6中的数组方法扩展
上一篇文章小编简单介绍了在ES6中,一些常用的方法和一些简单的应用,在这篇文章中,小编将针对ES6中数组常用方法进行扩展,相信经过这篇文章之后,每一位小伙伴下班时间会有所提前,就算从原来的996变成9 ...
- ES6中的数组常用方法
数组在JS中虽然没有函数地位那么高,但是也有着举足轻重的地位,下面我就结合这ES5中的一些常用的方法,与ES6中的一些方法做一些说明和实际用途.大家也可以关注我的微信公众号,蜗牛全栈. 一.ES5中数 ...
- C语言链表中数组实现数据选择排序,升序、降序功能主要难点
链表排序讲解: head指针指向链表的头结点,是找到整个链表的唯一依据,如果head指针丢失,整个链表就找不到了. head存储的是第一个节点的地址,head->next存储的是第二个节点的地址 ...
- JAVA中运用数组的四种排序方法
JAVA中在运用数组进行排序功能时,一般有四种方法:快速排序法.冒泡法.选择排序法.插入排序法. 快速排序法主要是运用了Arrays中的一个方法Arrays.sort()实现. 冒泡法是运用遍历数组进 ...
- AJPFX关于Java中运用数组的四种排序方法
JAVA中在运用数组进行排序功能时,一般有四种方法:快速排序法.冒泡法.选择排序法.插入排序法.快速排序法主要是运用了Arrays中的一个方法Arrays.sort()实现.冒泡法是运用遍历数组进行比 ...
- Java基础知识强化12:Java中运用数组的四种排序方法
1.使用JavaApi文档中的Arrays类中的sort()进行快速排序 首先我们直接看代码如下: package himi.text; import java.util.Arrays; public ...
- ES6中的数组reduce()方法详解
reduce() 方法对数组中的每个元素执行一个由我们提供的reducer函数(升序执行),将其结果汇总为单个返回值. 1. 语法reduce说明 arr.reduce(callback(accumu ...
随机推荐
- ubuntu 安装 arm-none-eabi-gcc 的几种方式
背景 这篇文章主要是为了解决 在 Linux 中 编译 能够在 裸机上 跑的 程序 目前许多嵌入式软件软件开发在Linux平台下进行,编译效率高很多,如今天所述的gcc-arm-none-eabi常适 ...
- FFmpeg开发笔记(三十四)Linux环境给FFmpeg集成libsrt和librist
<FFmpeg开发实战:从零基础到短视频上线>一书的"10.2 FFmpeg推流和拉流"提到直播行业存在RTSP和RTMP两种常见的流媒体协议.除此以外,还有比较两 ...
- Power BI实用技巧:轻松打造专业级甘特图
Power BI实用技巧:轻松打造专业级甘特图 大家好,今天我们要一起探索Power BI中一个既实用又强大的功能--制作甘特图.甘特图以其直观展示项目时间线和任务进度的特点,在项目管理中扮演着重要角 ...
- ubuntu22 装物理机
前言 最近需要使用u盘装一个ubuntu物理机,原本想试试麒麟,但还需要申请.. 自己捣鼓半天,终于把ubuntu系统装上了,现在记录一下过程. 正文 下载镜像文件 从官网下载 ubuntu22 的镜 ...
- Http基础协议
浏览器请求方法 http1.0定义了三种: GET: 向服务器获取资源,比如常见的查询请求 POST: 向服务器提交数据而发送的请求 Head: 和get类似,返回的响应中没有具体的内容,用于获取报头 ...
- SpringBoot 校验post请求参数
导读 前后端分离项目中,前端往后端传值时,后端都要做参数格式校验,比如校验数字最大值.最小值.是否允许为空.日期格式等等. 添加依赖 <!-- 参数校验 --> <dependenc ...
- 使用@nuxtjs/sitemap给项目添加sitemap(网站地图)
安装使用步骤参照:此博客内容转载博客地址:https://huangliangbo.com/2097 如何使用?(详细图文) 在项目根目录下使用yarn/npm/cnpm 安装 @nuxtjs/sit ...
- 全网最适合入门的面向对象编程教程:03 类和对象的Python实现-为自定义类添加属性
摘要: 本文主要介绍了,当使用 Python 创建自定义类时,如何为其添加属性,包括为类和实例添加属性两种,以及如何获取自定义的属性等内容. 往期推荐: 学嵌入式的你,还不会面向对象??! 全网最适合 ...
- JavaScript系列:JS实现复制粘贴文字以及图片
目录 一. 基于 Clipboard API 复制文字(推荐) 基本概念 主要方法 使用限制 实际应用示例 二.基于 document.execCommand('copy') 缺陷 实际应用示例 说明 ...
- thinkphp5 关于跨域的一些坑
1.首先在tp5的入口文件:public/index.php 在里面添加三行: // [ 应用入口文件 ] header("Access-Control-Allow-Origin:*&quo ...