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 ...
随机推荐
- k8s学习总结之各组件功能及作用的详细介绍
K8S集群架构: 一个K8S集群是由两大部分组成: Master节点和Node节点 一.Master节点主要包括API Server.Scheduler.Controller manager.etcd ...
- 制作visual studio 离线安装包
应用场景:脱机.内网环境安装vs开发环境. 概述:在互联网环境下载安装工具,下载根据需求并缓存布局(类似功能模块),压缩缓存内容拷贝至离线环境进行安装. 1.官网下载指定版本的vs安装客户端 创建基于 ...
- AIGC的行业发展
1. AIGC的行业发展 AIGC(Artificial Intelligence Generated Content,人工智能生成内容)是利用人工智能技术来自动生成内容的一种新型内容创作方式.它基于 ...
- MyBatis xml文件头
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC & ...
- 做独立开发者,能在 AppStore 赚到多少钱?
成为一名独立开发者,不用朝九晚五的上班,开发自己感兴趣的产品,在AppStore里赚美金,这可能是很多程序员的梦想,今天就来盘一盘,这个梦想实现的概率有多少. (Solo社区 投稿) 先来了解一些数据 ...
- 用ssh同时push 项目到github和gitee的方法
分别为两个网站声称pubkey cd ./ssh ssh-keygen -t rsa -C "oeasy@oeasy.org" -f "github_id_rsa&q ...
- Notepad++实现代码格式化
NotePad++是一个轻量级的代码编辑器,占用内存少,运行速度快,Notepad++本身是不带这个格式化功能的,但他支持NppAStyle插件完成格式化. 1. 下载插件NppAStyle.dll, ...
- Nginx 工作原理简介
在了解Nginx工作原理之前,我们先来了解下几个基本的概念 以及常见的I/O模型. 基本概念 同步:就是指调用方发起一个调用,在没有得到调用结果之前,该调用不返回.换句话说,也就是调用方发起一个调用后 ...
- Docker 基于Dockerfile创建镜像实践
需求描述 简单说,就是创建一个服务型的镜像,即运行基于该镜像创建的容器时,基于该容器自动开启一个服务.具体来说,是创建一个部署了nginx,uwsgi,python,django项目代码的镜像,运行基 ...
- SpringSecurity:hasAuthority与自定义权限校验
springsecurity中有两种权限控制方法 1.基于注解 @PreAuthorize("hasAuthority('syst:add')") 他的作用是在controller ...