(八)小案例银行家应用程序-排序-数组排序

排序一直有很多的算法,今天我们仅仅来说JavaScript内置的排序方法
● 字符串

const owners = ['Jonas', 'Zach', 'Adam', 'Martha'];
console.log(owners.sort());
console.log(owners);

在这里插入图片描述

但是注意,这个方法会改变原有的数组;

● 我们在试试数字

console.log(movements);
console.log(movements.sort());

在这里插入图片描述

这并没有按照我们的想法来从大到小排序,因为这个方法仅仅是针对字符串的,所以这些数字也是先转换字符串然后再进行排序的,这个时候我们就需要传入一个回调函数来实现这样的排序

movements.sort((a, b) => {
  if (a > b) return 1;
  if (a < b) return -1;
});

console.log(movements);

在这里插入图片描述

这样就被很好的进行排序了,那么这个到底是怎么工作的呢?
这段代码是使用JavaScript的Array.prototype.sort()方法对数组movements进行排序。解释一下代码的工作原理:

  1. Array.prototype.sort()方法是一个原地排序算法,它会修改原始数组,并返回排序后的数组。该方法接受一个比较函数作为参数,用于确定元素的顺序。
  2. 比较函数(a, b) => {…}会被传递给sort()方法,它接受两个参数a和b,分别表示数组中的两个元素。
  3. 在比较函数中,通过比较a和b的值来确定它们的顺序。如果a小于b,则返回一个负数(例如-1),表示a应该排在b之前;如果a大于b,则返回一个正数(例如1),表示a应该排在b之后;如果a等于b,则返回0,表示它们的顺序相同。
  4. sort()方法根据比较函数返回的值对数组进行排序。如果比较函数返回负数,则a会在b之前,如果返回正数,则a会在b之后,如果返回0,则它们的相对位置不变。

按照上面说明的原理,从大到小排序的话我们就可以这么写:

movements.sort((a, b) => {
  if (a < b) return 1;
  if (a > b) return -1;
});
console.log(movements);

在这里插入图片描述

● 上面那个只是想演示原理,实际只需要下面写就可以了,只需要关系返回的是正数和复数即可

movements.sort((a, b) => a - b);
console.log(movements);

movements.sort((a, b) => b - a);
console.log(movements);

在这里插入图片描述

你只需要记得,如果返回正数的话,就a>b,b在a前面,所以就是从小到大排序,反之亦然

● 那么现在让我们回到应用程序上面去,通过应用程序的按钮来是的用户的movments进行排序

const displayMovements = function (movements, sort = false) {
  containerMovements.innerHTML = '';

  const movs = sort ? movements.slice().sort((a, b) => a - b) : movements;
  movs.forEach((mov, i) => {
    const type = mov > 0 ? 'deposit' : 'withdrawal';

    const html = `
    <div class="movements__row">
      <div class="movements__type movements__type--${type}">${
      i + 1
    } ${type}</div>
      <div class="movements__value">${mov}€</div>
  </div>`;

    containerMovements.insertAdjacentHTML('afterbegin', html);
  });
};

首先我们先这个函数修改,传入一个sort参数,默认的值为flase,后面我们通过这个sort值来确定你是要进行排序还是不进行排序;
之后我们写一个一个movs变量,如果sort值为ture的话,对数据进行渐层拷贝,防止对原始数据产生影响,,然后再对拷贝后的数据进行一个降序排序,如果sort为false的话就直接使用未排序的movments数组;

● 完成上面之后,我们就对其进行一个点击事件,当我们点击的时候就进行排序

btnSort.addEventListener('click', function (e) {
  e.preventDefault();
  displayMovements(currentAccount.movements, true);
});

在这里插入图片描述

● 这个通过点击事件使用,来修改sort的值来进行排序,但是当我们再次点击sort按钮时,并不会回复数组的排序,还是进行从小到大排序,这个事情就需要我们来设置一个状态变量

let sorted = false;
btnSort.addEventListener('click', function (e) {
  e.preventDefault();
  displayMovements(currentAccount.movements, !sorted);
  sorted = !sorted;
});

在这里插入图片描述

因为首先设置为false,点击时候,进行取反,就是true,就会继续排序,然后通过sorted = !sorted取反,下次再点击的是就是false了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/573517.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

用java实现PDF的下载

1.下载PDF模版 2.导入依赖 <dependency><groupId>com.itextpdf</groupId><artifactId>itext7-core</artifactId><version>7.2.5</version><type>pom</type></dependency> 3.完整代码 package com.by.controller…

JAVASE8中基本数据类型

本篇文章基于有过一部分的C语言基础的&#xff0c;还望大家理解 在进入到学习之前我们必须要清楚的是在JAVASE中数据类型与C语言中的数据类型基本上是相同的,接下来我们先来对8中数据类型进行简要介绍&#xff0c;他们分别是&#xff1a; 如果大家之前了解过C语言那么对于基本数…

常见的工业路由器访问问题

A&#xff1a;工业路由器已经设置了pptp怎么访问路由下面的电脑 1. 确认PPTP VPN设置&#xff1a;首先&#xff0c;确保PPTP VPN服务器在工业路由器上已正确设置&#xff0c;并且处于活动状态。这包括确保VPN服务器的IP地址、端口、用户名和密码等设置正确无误。 2. 连接到VP…

Apple公司面试题之Apple-Orange

1. 引言 你幻想过在Apple公司工作吗&#xff1f; 如果心动过&#xff0c;那这个逻辑推理面试题就是给你准备的&#xff01;这是一道有趣的面试题&#xff0c;如下所示&#xff1a; 看到这里的同学&#xff0c;我建议你暂停文章&#xff0c;拿起笔和纸&#xff0c;试一试。准…

KBL410-ASEMI新能源专用整流桥KBL410

编辑&#xff1a;ll KBL410-ASEMI新能源专用整流桥KBL410 型号&#xff1a;KBL410 品牌&#xff1a;ASEMI 封装&#xff1a;KBL-4 最大重复峰值反向电压&#xff1a;1000V 最大正向平均整流电流(Vdss)&#xff1a;4A 功率(Pd)&#xff1a;小功率 芯片个数&#xff1a;4…

Linux实现文件共享

#nfs-utils、rpcbind 软件包来提供 NFS 共享服务 #客户端创建共享文件夹&#xff1a; nmcli c reload nmcli c up ens160 systemctl stop firewalld systemctl disable firewalld rpm -q nfs-utils rpcbind #查看是否安装 systemctl enable rpcbind systemctl enable nfs…

Skill Check: Fundamentals of Large Language Models

Skill Check: Fundamentals of Large Language Models 完结&#xff01;

CUDA的开发框架

CUDA的开发框架主要提供了一系列工具和库&#xff0c;使得开发者可以充分利用NVIDIA GPU进行高效的并行计算。以下是CUDA开发框架的一些关键组成部分。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.CUDA核心库&#xff1a;这些是构…

带你走进不一样的策略模式

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 带你走进不一样的策略模式 前言策略模式简介概念解释 策略模式的结构策略模式优点项目实践之bean策略构思业务策略实现策略接口实现策略上下文业务实现 前言 在编程的世界里&#xff0c;每一次按键都…

【办公类-26-02】20240423 UIBOT学分自动评价(自动登录、评价和退出,全自动)

背景需求&#xff1a; 我想用UIBOT自动模拟鼠标&#xff0c;登录每位老师的账户&#xff0c;进入评价区域&#xff0c;自动选择7次“满意”&#xff0c;输入1次“无”&#xff0c;然后提交。 C Dim objExcelWorkBook,arrayRet,iRet,temp,iPID,hWeb,dictRet,XobjExcelWorkBook …

《QT实用小工具·四十一》无边框窗口

1、概述 源码放在文章末尾 该项目实现了无边框窗口效果&#xff0c;项目demo如下所示&#xff1a; 项目代码如下所示&#xff1a; #include "framelesswindow.h" #include <QGuiApplication> #include <QScreen>#ifdef Q_OS_WIN #include <window…

24深圳杯数学建模挑战赛A题6页初步思路+参考论文+保姆级答疑!!!

问题1:单个残骸的精确位置定位 建立数学模型&#xff0c;分析如果要精准确定空中单个残骸发生音爆时的位置坐标&#xff08;经度、纬度、高程&#xff09;和时间&#xff0c;至少需要布置几台监测设备&#xff1f;假设某火箭一级残骸分离后&#xff0c;在落点附近布置了7台监测…

文件上传服务器、文件展示等异步问题

问题&#xff1a; 文件上传模块&#xff1a;当文件已经上传完成&#xff0c;文件进度已经走完了&#xff0c;但是服务器响应还没有返回结果&#xff0c;出现了&#xff0c;获取不到上传后的文件路径&#xff0c;需要等待服务器返回结果后&#xff0c;才能获取文件路径并点击跳…

Linux 基本指令(上)

目录 whoami 命令 pwd 命令 ls 命令 Linux的目录结构 cd 命令 文件操作 什么是文件 touch 命令 mkdir 命令 rmdir / rm 命令 rm 删除文件&#xff1a; rm 删除目录&#xff1a; whoami 命令 whoami &#xff1a;可以看出当前登录的用户名 pwd 命令 pwd 用于显示用户当…

前端发送请求,显示超时取消

前端发送请求&#xff0c;显示超时取消 问题说明&#xff1a;后台接口请求60s尚未完成&#xff0c;前端控制台显示取消&#xff08;canceled&#xff09; 原因 1、前端设置60s超时则取消 2、后台接口响应时间过长&#xff0c;过长的原因统计的数据量多&#xff08;实际也才17…

嵌入式linux学习之arm开发板移植ssh

1.下载源码 &#xff08;1&#xff09;zlib 下载网址&#xff1a;http://www.zlib.net/fossils/ 教程中版本选择的是: zlib-1.2.11.tar.gz &#xff08;2&#xff09;openssl下载网址&#xff1a;https://www.openssl.org/source/mirror.html 教程中版本选择的是: openssl-1.1…

【Qt】.ui文件转.h文件

1、打开qt命令行 2、转换 uic -o ui.h mainwindow.ui

Linux c++ onvif客户端开发(9):GetProfiles

本文是Linux c onvif客户端开发系列文章之一&#xff1a; Linux c onvif客户端开发(1): 根据wsdl生成cpp源文件Linux c onvif客户端开发(2): 获取摄像头H264/H265 RTSP地址Linux c onvif客户端开发(3): 扫描设备Linux c onvif客户端开发(4): 扫描某个设备是否支持onvifLinux c…

js基础知识(2)

一、事件的含义 JavaScript事件是指在文档或者浏览器中发生的一些特定交互瞬间&#xff0c;比如打开某一个网页&#xff0c;浏览器加载完成后会触发load事件&#xff0c;当鼠标悬浮于某一个元素上时会触发hover事件&#xff0c;当鼠标点击某一个元素时会触发click事件等等。 三…

电子签章与SSL证书:区别与功能对比

电子签章是一种用于电子文档的签名技术&#xff0c;它通过密码学方法确保文档的完整性、真实性和签署行为的不可否认性。电子签章技术结合了图像处理技术和电子签名技术&#xff0c;使得电子文档在法律上与传统纸质文件具有同等效力。这种技术通常用于需要法律认可的电子合同、…