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

news2025/1/12 18:16:40

排序一直有很多的算法,今天我们仅仅来说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了

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

港股“AIGC第一股”出门问问,凭借什么产品做到上市?

随着人工智能技术的飞速发展&#xff0c;AIGC&#xff08;人工智能生成内容&#xff09;领域逐渐成为资本市场的新宠。在这样的背景下&#xff0c;出门问问&#xff08;股票代码&#xff1a;2438.HK&#xff09;作为AIGC领域的先行者&#xff0c;于2024年4月24日正式登陆港交所…

服务器数据恢复—StorNext文件系统下raid5阵列数据恢复案例

服务器数据恢复环境&#xff1a; 昆腾某型号存储&#xff0c;8个存放数据的存储柜1个存放元数据的存储柜。 元数据存储&#xff1a;8组RAID1阵列1组RAID10阵列4个全局热备硬盘。 数据存储&#xff1a;32组RAID5阵列&#xff0c;划分2个存储系统。 服务器故障&#xff1a; 数据…

matplotlib从起点出发(15)_Tutorial_15_blitting

0 位图传输技术与快速渲染 Blitting&#xff0c;即位图传输、块传输技术是栅格图形化中的标准技术。在Matplotlib的上下文中&#xff0c;该技术可用于&#xff08;大幅度&#xff09;提高交互式图形的性能。例如&#xff0c;动画和小部件模块在内部使用位图传输。在这里&#…

Element-plus DatePicker 日期选择器【正则校验时间范围】

效果图&#xff1a; 利用element-plus中的form表单验证完成效果。 <el-form-item label"检查计划截止日期&#xff1a;" prop"deadline"><el-date-pickerv-model"form.deadline"value-format"YYYY-MM-DD"style"width: …

计算机网络基础认识

本篇文章是我在B站上看到关于计算机网络的介绍视频收到的启发。本篇文章的内容来自【网络】半小时看懂<计算机网络>_哔哩哔哩_bilibili 一、物理层 从常理来说&#xff0c;进行连个设备之间的通讯&#xff0c;首先最容易想到的就是使用一根线连接两个设备进行通讯。但是…

基于单片机的空气质量检测系统设计

摘要:随着社会经济的不断发展,人们的生活水平日益提高,健康与养生成为了全民关注的热点话题,空气质量地不断下降也引起了社会的广泛关注,如何了解家居内空气质量的情况也成了亟需解决的问题。在此背景下,本文针对室内空气的质量问题设计了基于单片机的空气质量检测系统,…

js基础知识(2)

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

Excel 公式的定义、语法和应用(LOOKUP 函数、HLOOKUP 函数、VLOOKUP 函数;MODE.MULT 函数; ROUND 函数)

一、公式的定义和语法 二、公式的应用 附录 查找Excel公式使用方法的官方工具【强烈推荐&#xff01;&#xff01;&#xff01;】&#xff1a;Excel 函数&#xff08;按字母顺序&#xff09;【微软官网】 excel 函数说明语法LOOKUP 函数在向量或数组中查找值LOOKUP(lookup_va…

【AI相关】《这就是ChatGPT》读书笔记

《这就是ChatGPT》 斯蒂芬沃尔弗拉姆 这本书用了两天就一口气读完了&#xff0c;通篇读完后&#xff0c;这本书主要是介绍了ChatGPT怎么能做到生成内容的一些背后的原理逻辑&#xff0c;总结一下这本书是ChatGPT通过大量的数据&#xff08;这些数据来自网络、书籍等等类似于数据…

09.JAVAEE之网络初识

1.网络 单机时代 >局域网时代 >广域网时代 >移动互联网时代 1.1 局域网LAN 局域网&#xff0c;即 Local Area Network&#xff0c;简称LAN。 Local 即标识了局域网是本地&#xff0c;局部组建的一种私有网络。 局域网内的主机之间能方便的进行网络通信&#xff0…

Activiti——将绘制的流程图存入act数据库并进行流程推进与状态流转

文章目录 前言流程图入库操作 RepositoryService项目结构数据库连接配置文件入库Java测试代码zip 方式进行流程的批量部署 流程启动 RuntimeService待处理任务查看 TaskService流程状态的扭转查询流程定义信息 RepositoryService查询正在执行的流程实例 RuntimeService已部署流…

git简介及安装

Git | Git简介与安装 文章目录 Git | Git简介与安装一、Git简介二、Git安装Linux-centosLinux-ubuntu 一、Git简介 存在需求&#xff1a;对于一个文档&#xff0c;由于编写思路或者当前文档丢失&#xff0c;可能存在想要历史版本的需求&#xff0c;并且需要知道每个版本都修改了…

MySQL主从的应用

说明&#xff1a;本文介绍MySQL主从在实际中的应用。主从搭建和问题参考下面两篇文章&#xff1a; MySQL主从结构搭建 搭建MySQL主从结构时的问题 数据迁移 当我们搭建完MySQL主从&#xff0c;第一步当然是把历史数据导入到主从结构中。有以下两种方式&#xff1a; 开启主从…

Mysql个人总结

前言 又来水字数啦&#xff0c;这次主要讲一下MySQL的常用概念&#xff0c;难点的就必须上项目讲解了&#xff0c;而且比较基础面试基本都会问一些&#xff0c;用的话&#xff0c;不少优化都从这里入手 操作数据库 1、创建数据库 CREATE DATABASE [IF NOT EXISTS] 数据库名;…

如何设置微信自动回复?教你快速上手!

自动回复对于需要在微信上洽谈业务的人来说&#xff0c;无疑是非常实用的一个功能。 下面就一起来看看微信管理系统的机器人自动回复都有哪些设置吧&#xff01; 1、自动通过好友 只要有新的好友请求发送到你的微信账号&#xff0c;系统会自动通过该请求&#xff0c;无需手动…

rust 卸载重新安装 安装

原因&#xff1a;接触区块链时报错 linking with x86_64-w64-mingw32-gcc failed: exit code: 1 Rust编译需要C环境&#xff0c;如果你没有&#xff0c;Rust也能安装成功&#xff0c;只是无法编译代码 C的编译工具有两个&#xff0c;一个是msvc&#xff0c;也就是visual studi…

5个方便好用的Python自动化脚本

相比大家都听过自动化生产线、自动化办公等词汇&#xff0c;在没有人工干预的情况下&#xff0c;机器可以自己完成各项任务&#xff0c;这大大提升了工作效率。 编程世界里有各种各样的自动化脚本&#xff0c;来完成不同的任务。 尤其Python非常适合编写自动化脚本&#xff0…

DFS与回溯专题:全排列

DFS与回溯专题&#xff1a;全排列 题目链接: 46.全排列 题目描述 代码思路 回溯问题中的全排列&#xff0c;相对比组合、子集等问题&#xff0c;其元素可以颠倒顺序&#xff0c;所以在for循环中每层都是从头开始&#xff0c;无需标记更新起始位置 代码纯享版 class Soluti…

应用层协议 -- HTTPS 协议

目录 一、了解 HTTPS 协议 1、升级版的 HTTP 协议 2、理解“加密” 二、对称加密 1、理解对称加密 2、对称加密存在的问题 三、非对称加密 1、理解非对称加密 2、中间人攻击 3、CA 证书和数字签名 四、总结 一、了解 HTTPS 协议 1、升级版的 HTTP 协议 HTTPS 也是…

蜂窝物联:智慧水产养殖系统绘制“水世界”画卷

智慧水产养殖系统&#xff0c;融合了智能传感、无线传感网、通信、智能处理与智能控制等物联网技术的精髓&#xff0c;为养殖者绘制了一幅细致入微的“水世界”画卷。通过在线监测平台与各类智能传感器的协同作战&#xff0c;养殖者能够实时掌握养殖水质环境信息&#xff0c;仿…