【JavaScript】内置对象 - 数组对象 ③ ( 数组反转 - reverse 方法 | 数组排序 - sort 方法 | 自定义数组排序规则 )
文章目录
- 一、数组排序
- 1、翻转数组元素 - reverse()
- 2、数组元素排序 - sort() 默认从小到大排序
- 3、数组元素排序 - sort() 自定义排序规则
- 4、数组元素排序 - sort() 自定义降序排序简化写法
Array 数组对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
一、数组排序
1、翻转数组元素 - reverse()
调用 Array 数组对象 的 reverse() 方法 可以 翻转数组中的元素顺序 , 语法如下 :
reverse()
- 该方法没有参数 ;
- 返回值 就是 原始数组 , 该数组中的元素顺序被翻转了 ;
调用该方法 , 原数组的数据会被改变 ;
参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
代码示例 :
// 创建数组对象let arr = [1, 2, 3];// 翻转数组arr.reverse();// 输出 : (3) [3, 2, 1]console.log(arr);
完整代码示例 :
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style><script>// 创建数组对象let arr = [1, 2, 3];// 翻转数组arr.reverse();// 输出 : (3) [3, 2, 1]console.log(arr);</script>
</head><body>
</body></html>
执行结果 :
2、数组元素排序 - sort() 默认从小到大排序
调用 Array 数组对象 的 sort() 方法 可以 将数组中的元素进行排序 , 语法如下 :
sort()
sort(compareFn)
- 该方法 不传入参数 默认是将元素 从小到大进行排列 ;
- 该方法 可传入一个 定义排序顺序的函数 , compareFn 参数是一个函数 , 该函数需要满足如下要求 :
- compareFn 比较函数 的 参数是 两个用于比较的元素 , a 是第一个元素 , b 是第二个元素 ;
- compareFn 比较函数 返回值 是一个数字 , a < b 返回负数 , a > b 返回正数 , a = b 返回 0 ;
- 返回值 就是 原始数组 , 该数组中的 元素顺序被重新排序了 ;
调用该方法 , 原数组的数据会被改变 ;
参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
代码示例 :
// 创建数组对象let arr = [9, 5, 2, 7];// 数组排序arr.sort();// 输出 : (4) [2, 5, 7, 9]console.log(arr);
完整代码示例 :
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style><script>// 创建数组对象let arr = [9, 5, 2, 7];// 数组排序arr.sort();// 输出 : (4) [2, 5, 7, 9]console.log(arr);</script>
</head><body>
</body></html>
执行结果 :
3、数组元素排序 - sort() 自定义排序规则
使用 sort(compareFn) 语法 , 传入一个 排序规则函数 ;
- compareFn 比较函数 的 参数是 两个用于比较的元素 , a 是第一个元素 , b 是第二个元素 ;
- compareFn 比较函数 返回值 是一个数字 , a < b 返回负数 , a > b 返回正数 , a = b 返回 0 ;
排序函数示例 : 默认的从小到大的排序规则是 :
- a < b , 返回 -1 ;
- a > b , 返回 1 ;
- a == b , 返回 0 ;
// 标准排序规则 : 从小到大排序// a < b 返回 -1 // a > b 返回 1// a == b 返回 0 function compareFn(a, b) {if (a > b) {return -1;}if (a < b) {return 1;}// a == breturn 0;}
参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
代码示例 :
// 创建数组对象let arr = [9, 5, 2, 7];// 标准排序规则 : 从小到大排序// a < b 返回 -1 // a > b 返回 1// a == b 返回 0 function compareFn(a, b) {if (a > b) {return -1;}if (a < b) {return 1;}// a == breturn 0;}// 数组排序arr.sort(compareFn);// 输出 : (4) [9, 7, 5, 2]console.log(arr);
完整代码示例 :
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style><script>// 创建数组对象let arr = [9, 5, 2, 7];// 标准排序规则 : 从小到大排序// a < b 返回 -1 // a > b 返回 1// a == b 返回 0 function compareFn(a, b) {if (a > b) {return -1;}if (a < b) {return 1;}// a == breturn 0;}// 数组排序arr.sort(compareFn);// 输出 : (4) [9, 7, 5, 2]console.log(arr);</script>
</head><body>
</body></html>
执行结果 :
4、数组元素排序 - sort() 自定义降序排序简化写法
代码示例 :
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style><script>// 创建数组对象let arr = [9, 5, 2, 7];// 简化写法 : 返回 b - a 即可function compareFn(a, b) {return b - a;}// 数组排序arr.sort(compareFn);// 输出 : (4) [9, 7, 5, 2]console.log(arr);</script>
</head><body>
</body></html>
执行结果 :
相关文章：
【JavaScript】内置对象 - 数组对象 ③ ( 数组反转 - reverse 方法 | 数组排序 - sort 方法 | 自定义数组排序规则 )
文章目录 一、数组排序1、翻转数组元素 - reverse()2、数组元素排序 - sort() 默认从小到大排序3、数组元素排序 - sort() 自定义排序规则4、数组元素排序 - sort() 自定义降序排序简化写法 Array 数组对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript…...
ctfshow web入门 php反序列化 web267--web270
web267 查看源代码发现这三个页面 然后发现登录页面直接admin/admin登录成功 然后看到了 ///backdoor/shell unserialize(base64_decode($_GET[code]))EXP <?php namespace yii\rest{class IndexAction{public $checkAccess;public $id;public function __construct(){…...
智慧公厕解决什么问题？实现了什么样的价值？
公共厕所一直是城市管理的难题，常常面临着卫生条件不佳、管理不善以及使用体验差等问题。为了解决这些困扰城市的难题，智慧公厕应运而生。智慧公厕不仅应用了信息化和数字化技术，还通过全方位的智能化应用，彻底改变了传统公厕的面…...
IATF16949认证是什么？
IATF16949认证是一项国际质量管理体系的认证标准，由国际汽车行业联合会（IATF）开发，旨在提高汽车行业的质量管理水平，满足客户对汽车部件和零部件的要求。该标准是在ISO/TS 16949标准的基础上，专门为汽车行业…...
【Vue2】关于response返回数据的错误小记
关于Vue2中response返回数据的一个错误小记 如图，在这里返回的时候，后端是通过List< String >返回的，response接收到的实际上是一个Array数组，但是赋值给searchedTaskList的时候，需要在.then包括的范围里面赋值给…...
深入理解C++构造函数和析构函数
目录标题 1. 构造函数默认构造函数参数化构造函数拷贝构造函数 2. 析构函数3. 构造函数和析构函数的使用场景自动资源管理防止资源泄露深拷贝和浅拷贝 4. C的类中必定有个构造函数吗？5. 总结 C中的构造函数和析构函数是类对象生命周期管理的重要组成部分。构造函数用…...
CMakeLists.txt语法规则：数学运算 math
一. 简介 前面几篇文章学习了 CMakeLists.txt语法中的一些常用变量，常用命令，双引号的作用。条件判断语句，循环语句等等。 本文简单学习一下 CMakeLists.txt语法中数学运算 match。 二. CMakeLists.txt语法规则：数学运算 math 在…...
图片无损压缩工具-VIKY
一、前言 Viky v3.4是一款功能强大的图片压缩工具，它能够提供高效的图片无损压缩服务。通过使用独特的压缩算法，该软件在显著减小图片文件大小的同时，还保持了图像的清晰度和色彩饱和度，确保了图像质量的优异表现。 二、软件特点…...
【Linux操作系统】:文件操作
目录 前言 一、C语言中文件IO操作 1.文件的打开方式 2.fopen：打开文件 3.fread：读文件 4.fwrite:写文件 二、系统文件I/O 1.系统调用open、read、write 2.文件描述符fd 3.文件描述符的分配规则 4.重定向 5.缓冲区 6.理解文件系统 磁盘 磁盘…...
渗透之sql注入----二次注入
目录 二次注入的原理： 实战： 第一步：找注入点 找漏洞： 注入大概过程： 第二步：开始注入 二次注入的原理： 二次注入是由于对用户输入的数据过滤不严谨，导致存在异常的数据被出入…...
LeetCode 每日一题 ---- 【2105. 给植物浇水 II】
LeetCode 每日一题 ---- 【2105. 给植物浇水 II】 2105.给植物浇水II方法：模拟双指针 2105.给植物浇水II 方法：模拟双指针 今天是给植物浇水II，昨天是I，本质上和昨天的没有区别，都是模拟，今天额外需要注意…...
【刷题】代码随想录算法训练营第三十五天|435、无重叠区间，763、划分字母区间 ，56、合并区间
目录 435、无重叠区间763、划分字母区间56、合并区间 435、无重叠区间 讲解：https://programmercarl.com/0435.%E6%97%A0%E9%87%8D%E5%8F%A0%E5%8C%BA%E9%97%B4.html 左边界和有边界排序，注意sort的排序规则函数编写。 class Solution { public:// 按照…...
【JVM】了解JVM规范中的虚拟机结构
目录 JVM规范的主要内容 1）字节码指令集(相当于中央处理器CPU) JVM指令分类 2）Class文件的格式 3）数据类型和值 4）运行时数据区 5）栈帧 6）特殊方法 7）类库 JVM规范的主要内容 1&#…...
西藏在线教育系统哪家好,培训机构为什么讲师流动大？该如何留住讲师？
教育机构的核心竞争力其实还是产品竞争力，老师讲什么，这是教研团队在做的;老师如何讲，这是师资团队来做的;如何交付给学生，这是产品团队来做的，如果你有在线的团队的话，三个部分共同构成了整个产品…...
智能文档提取
识别饼状图、条形图转化为json字段 GitHub - LingyvKong/OneChart: official code for "OneChart: Purify the Chart Structural Extraction via One Auxiliary Token"...
封装Springboot基础框架功能-03
在些模块中汇总了一些web开发常用的配置和功能。 模块源码结构 Restful API常用定义 QueryParam请求参数 Data public class QueryParam {private String key;private String value; }RestfulController实现 RestfulController.java，主要汇总一些常用的restful的…...
汽车EDI：IAC Elmdon EDI 对接指南
近期收到客户C公司的需求，需要与其合作伙伴IAC Elmdon建立EDI连接，本文将主要为大家介绍IAC Elmdon EDI 对接指南，了解EDI项目的对接流程。 项目需求 传输协议：OFTP2 IAC Elmdon 与其供应商之间使用的传输协议为OFTP2。OFTP2是…...
IPFoxy：什么是静态住宅IP？静态ISP代理指南
静态住宅代理（也称为静态ISP代理）是最流行的代理类型之一。它们也是隐藏您的身份并保持在线匿名的最佳方法之一。您为什么要使用住宅代理而不是仅使用常规代理服务？下面我具体分享。 一、什么是静态住宅代理？ 首先，我…...
【算法】高精度（string实现）
模板来自：【C/string】 大数高精度运算模板 加法 string add(string a, string b) {string ans;/* 翻转两个数字字符串，使得后面的for循环从个位开始相加 */reverse(a.begin(), a.end());reverse(b.begin(), b.end());/* 初次补0，保证最高位…...
宝塔面板如何删除一个站点
我们一般的网站都是PHPMySQL开发的，所以删除站点，就要先删数据库，再删网站目录 注意：一点要确保无用的再删 删除站点目录...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波：可以用来解决所提出的地质任务的波；干扰波：所有妨碍辨认、追踪有效波的其他波。 地震勘探中，有效波和干扰波是相对的。例如，在反射波…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为 以太坊（Ethereum）平台编写智能合约的高级编…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
代码规范和架构【立芯理论一】（2025.06.08）
1、代码规范的目标 代码简洁精炼、美观，可持续性好高效率高复用，可移植性好高内聚，低耦合没有冗余规范性，代码有规可循，可以看出自己当时的思考过程特殊排版，特殊语法，特殊指令，必须…...
MySQL 部分重点知识篇
一、数据库对象 1. 主键 定义 ：主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 ：确保数据的完整性，便于数据的查询和管理。 示例 ：在学生信息表中，学号可以作为主键ÿ…...
Python网页自动化Selenium中文文档
1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API，让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API，你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...
【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL
ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？ 一键点击，就能将ETABS中所有框架元素的基…...