【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开发的，所以删除站点，就要先删数据库，再删网站目录 注意：一点要确保无用的再删 删除站点目录...
conda相比python好处
Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理：…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO：支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题：MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者：Yanyuan Chen, Dexuan Xu, Yu Hu…...
【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
python/java环境配置
环境变量放一起 python： 1.首先下载Python Python下载地址：Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个，然后自定义，全选 可以把前4个选上 3.环境配置 1）搜高级系统设置 2…...
智能在线客服平台：数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...
使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui（适配 Vue2 版本 ）实现截图中照片上传预览、删除功能，并封装成可复用组件的完整代码，包含样式和逻辑实现，可直接在 Vue2 项目中使用： 1. 封装的图片上传组件 ImageUploader.vue <te…...
WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章？AI自动生成，效率提升10倍！ 支持多语言、自动配图、定时发布，让内容创作更轻松！ AI内容生成 → 不想每天写文章？AI一键生成高质量内容！多语言支持 → 跨境电商必备&am…...
mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象：mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时，可能是因为以下几个原因：1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质 在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...