当前位置： 首页 > news >正文

【JavaScript】内置对象 - 数组对象 ③ ( 数组反转 - reverse 方法 | 数组排序 - sort 方法 | 自定义数组排序规则 )

news 2026/3/30 13:17:21

文章目录

  • 一、数组排序
    • 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…...

编程日记 2024/5/11 6:32:29

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(){…...

编程日记 2024/5/11 6:31:27

智慧公厕解决什么问题？实现了什么样的价值？

公共厕所一直是城市管理的难题&#xff0c;常常面临着卫生条件不佳、管理不善以及使用体验差等问题。为了解决这些困扰城市的难题&#xff0c;智慧公厕应运而生。智慧公厕不仅应用了信息化和数字化技术&#xff0c;还通过全方位的智能化应用&#xff0c;彻底改变了传统公厕的面…...

编程日记 2024/5/11 6:29:25

IATF16949认证是什么？

IATF16949认证是一项国际质量管理体系的认证标准&#xff0c;由国际汽车行业联合会&#xff08;IATF&#xff09;开发&#xff0c;旨在提高汽车行业的质量管理水平&#xff0c;满足客户对汽车部件和零部件的要求。该标准是在ISO/TS 16949标准的基础上&#xff0c;专门为汽车行业…...

编程日记 2024/5/11 6:28:24

【Vue2】关于response返回数据的错误小记

关于Vue2中response返回数据的一个错误小记 如图&#xff0c;在这里返回的时候&#xff0c;后端是通过List< String >返回的&#xff0c;response接收到的实际上是一个Array数组&#xff0c;但是赋值给searchedTaskList的时候&#xff0c;需要在.then包括的范围里面赋值给…...

编程日记 2024/5/11 6:27:23

深入理解C++构造函数和析构函数

目录标题 1. 构造函数默认构造函数参数化构造函数拷贝构造函数 2. 析构函数3. 构造函数和析构函数的使用场景自动资源管理防止资源泄露深拷贝和浅拷贝 4. C的类中必定有个构造函数吗&#xff1f;5. 总结 C中的构造函数和析构函数是类对象生命周期管理的重要组成部分。构造函数用…...

编程日记 2024/5/11 6:25:21

CMakeLists.txt语法规则：数学运算 math

一. 简介 前面几篇文章学习了 CMakeLists.txt语法中的一些常用变量&#xff0c;常用命令&#xff0c;双引号的作用。条件判断语句&#xff0c;循环语句等等。 本文简单学习一下 CMakeLists.txt语法中数学运算 match。 二. CMakeLists.txt语法规则&#xff1a;数学运算 math 在…...

编程日记 2024/5/11 6:24:19

图片无损压缩工具-VIKY

一、前言 Viky v3.4是一款功能强大的图片压缩工具&#xff0c;它能够提供高效的图片无损压缩服务。通过使用独特的压缩算法&#xff0c;该软件在显著减小图片文件大小的同时&#xff0c;还保持了图像的清晰度和色彩饱和度&#xff0c;确保了图像质量的优异表现。 二、软件特点…...

编程日记 2024/5/11 6:23:18

【Linux操作系统】:文件操作

目录 前言 一、C语言中文件IO操作 1.文件的打开方式 2.fopen&#xff1a;打开文件 3.fread&#xff1a;读文件 4.fwrite:写文件 二、系统文件I/O 1.系统调用open、read、write 2.文件描述符fd 3.文件描述符的分配规则 4.重定向 5.缓冲区 6.理解文件系统 磁盘 磁盘…...

编程日记 2024/5/11 6:22:16

渗透之sql注入----二次注入

目录 二次注入的原理&#xff1a; 实战&#xff1a; 第一步&#xff1a;找注入点 找漏洞&#xff1a; 注入大概过程&#xff1a; 第二步&#xff1a;开始注入 二次注入的原理&#xff1a; 二次注入是由于对用户输入的数据过滤不严谨&#xff0c;导致存在异常的数据被出入…...

编程日记 2024/5/11 6:19:13

LeetCode 每日一题 ---- 【2105. 给植物浇水 II】

LeetCode 每日一题 ---- 【2105. 给植物浇水 II】 2105.给植物浇水II方法&#xff1a;模拟双指针 2105.给植物浇水II 方法&#xff1a;模拟双指针 今天是给植物浇水II&#xff0c;昨天是I&#xff0c;本质上和昨天的没有区别&#xff0c;都是模拟&#xff0c;今天额外需要注意…...

编程日记 2024/5/11 6:17:09

【刷题】代码随想录算法训练营第三十五天|435、无重叠区间，763、划分字母区间 ，56、合并区间

目录 435、无重叠区间763、划分字母区间56、合并区间 435、无重叠区间 讲解&#xff1a;https://programmercarl.com/0435.%E6%97%A0%E9%87%8D%E5%8F%A0%E5%8C%BA%E9%97%B4.html 左边界和有边界排序&#xff0c;注意sort的排序规则函数编写。 class Solution { public:// 按照…...

编程日记 2024/5/11 6:15:06

【JVM】了解JVM规范中的虚拟机结构

目录 JVM规范的主要内容 1&#xff09;字节码指令集(相当于中央处理器CPU) JVM指令分类 2&#xff09;Class文件的格式 3&#xff09;数据类型和值 4&#xff09;运行时数据区 5&#xff09;栈帧 6&#xff09;特殊方法 7&#xff09;类库 JVM规范的主要内容 1&#…...

编程日记 2024/5/11 6:14:04

西藏在线教育系统哪家好,培训机构为什么讲师流动大？该如何留住讲师？

教育机构的核心竞争力其实还是产品竞争力&#xff0c;老师讲什么&#xff0c;这是教研团队在做的;老师如何讲&#xff0c;这是师资团队来做的;如何交付给学生&#xff0c;这是产品团队来做的&#xff0c;如果你有在线的团队的话&#xff0c;三个部分共同构成了整个产品&#xf…...

编程日记 2024/5/11 6:11:02

智能文档提取

识别饼状图、条形图转化为json字段 GitHub - LingyvKong/OneChart: official code for "OneChart: Purify the Chart Structural Extraction via One Auxiliary Token"...

编程日记 2024/5/11 6:07:59

封装Springboot基础框架功能-03

在些模块中汇总了一些web开发常用的配置和功能。 模块源码结构 Restful API常用定义 QueryParam请求参数 Data public class QueryParam {private String key;private String value; }RestfulController实现 RestfulController.java&#xff0c;主要汇总一些常用的restful的…...

编程日记 2024/5/11 6:05:56

汽车EDI：IAC Elmdon EDI 对接指南

近期收到客户C公司的需求&#xff0c;需要与其合作伙伴IAC Elmdon建立EDI连接&#xff0c;本文将主要为大家介绍IAC Elmdon EDI 对接指南&#xff0c;了解EDI项目的对接流程。 项目需求 传输协议&#xff1a;OFTP2 IAC Elmdon 与其供应商之间使用的传输协议为OFTP2。OFTP2是…...

编程日记 2024/5/11 6:04:54

IPFoxy：什么是静态住宅IP？静态ISP代理指南

静态住宅代理&#xff08;也称为静态ISP代理&#xff09;是最流行的代理类型之一。它们也是隐藏您的身份并保持在线匿名的最佳方法之一。您为什么要使用住宅代理而不是仅使用常规代理服务&#xff1f;下面我具体分享。 一、什么是静态住宅代理&#xff1f; 首先&#xff0c;我…...

编程日记 2024/5/11 6:03:52

【算法】高精度（string实现）

模板来自&#xff1a;【C/string】 大数高精度运算模板 加法 string add(string a, string b) {string ans;/* 翻转两个数字字符串&#xff0c;使得后面的for循环从个位开始相加 */reverse(a.begin(), a.end());reverse(b.begin(), b.end());/* 初次补0&#xff0c;保证最高位…...

编程日记 2024/5/11 6:02:50

宝塔面板如何删除一个站点

我们一般的网站都是PHPMySQL开发的&#xff0c;所以删除站点&#xff0c;就要先删数据库&#xff0c;再删网站目录 注意&#xff1a;一点要确保无用的再删 删除站点目录...

编程日记 2024/5/11 6:01:49

3步掌握Greasy Fork：开源用户脚本管理平台完全指南

3步掌握Greasy Fork&#xff1a;开源用户脚本管理平台完全指南 【免费下载链接】greasyfork An online repository of user scripts. 项目地址: https://gitcode.com/gh_mirrors/gr/greasyfork Greasy Fork是一个功能强大的开源用户脚本管理平台&#xff0c;让你能够轻松…...

编程新知 2026/3/30 12:52:21

华硕笔记本CPU过热？G-Helper降压调优终极指南帮你降温10℃

华硕笔记本CPU过热&#xff1f;G-Helper降压调优终极指南帮你降温10℃ 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other models 项目…...

编程新知 2026/3/30 12:18:11

全学科适用AI写作辅助网站排行榜（2026 实测推荐）

基于功能完整性、学术适配性、用户反馈及操作便捷性&#xff0c;以下是当前主流AI论文写作工具的实测排名&#xff0c;按综合使用价值从高到低依次呈现&#xff0c;并附上各平台的核心优势与适用人群。&#x1f3c6; 第一梯队&#xff1a;全流程学术解决方案&#xff08;★★★…...

编程新知 2026/3/30 11:44:00

Qwen-Image-2512-SDNQ Web服务实战：WebUI下载功能与浏览器兼容性全平台测试

Qwen-Image-2512-SDNQ Web服务实战&#xff1a;WebUI下载功能与浏览器兼容性全平台测试 1. 项目概述与核心价值 今天我要和大家分享一个特别实用的AI图片生成项目——基于Qwen-Image-2512-SDNQ-uint4-svd-r32模型的Web服务。这个项目最大的亮点在于&#xff0c;它把复杂的AI图…...

编程新知 2026/3/30 11:25:49

AIGlasses OS Pro性能调优指南：跳帧、画面缩放设置，流畅运行低算力设备

AIGlasses OS Pro性能调优指南&#xff1a;跳帧、画面缩放设置&#xff0c;流畅运行低算力设备 智能眼镜作为穿戴设备&#xff0c;其计算资源往往有限。AIGlasses OS Pro作为一款本地运行的智能视觉系统&#xff0c;如何在有限的硬件资源下保持流畅运行&#xff0c;是许多开发…...

编程新知 2026/3/30 11:17:40

APIFox签名生成实战：从环境变量配置到MD5签名一键搞定

APIFox签名生成实战&#xff1a;从环境变量配置到MD5签名一键搞定 在接口开发与测试过程中&#xff0c;签名机制是保障接口安全性的重要手段。APIFox作为一款强大的API协作平台&#xff0c;提供了灵活的脚本功能&#xff0c;能够帮助开发者快速实现签名生成与自动化测试。本文将…...

编程新知 2026/3/30 10:49:24

吃透Redis核心数据结构：从原理到实战，避开90%的坑

Redis之所以能成为分布式系统的“性能神器”&#xff0c;核心在于其高效的内存数据结构设计。很多开发者对Redis的认知停留在“SET/GET缓存”&#xff0c;只会用最基础的字符串类型&#xff0c;却忽略了List、Hash、Set、ZSet等核心结构的强大能力&#xff0c;导致代码冗余、性…...

编程新知 2026/3/30 10:45:23

Electron打包踩坑实录：从icon报错到网络卡顿，手把手教你用electron-builder搞定Windows安装包

Electron实战打包指南&#xff1a;从图标优化到网络加速的全流程解决方案 Electron作为跨平台桌面应用开发框架&#xff0c;其打包环节往往是开发者遇到问题最集中的阶段。本文将系统梳理从基础配置到高级优化的完整打包流程&#xff0c;特别针对Windows平台下electron-builde…...

编程新知 2026/3/30 10:28:16

Fish Speech 1.5语音克隆对比实验：5秒vs10秒参考音频效果差异分析

Fish Speech 1.5语音克隆对比实验&#xff1a;5秒vs10秒参考音频效果差异分析 1. 实验背景与目的 语音克隆技术正在改变我们与数字内容互动的方式&#xff0c;而Fish Speech 1.5作为新一代文本转语音模型&#xff0c;在声音克隆方面表现出色。但在实际应用中&#xff0c;一个…...

编程新知 2026/3/30 8:49:34

高效处理海量数据——pandas分块读取与内存管理实战

1. 为什么需要分块读取千万级数据&#xff1f; 第一次处理千万级CSV文件时&#xff0c;我盯着16GB的硬盘文件发愁——128GB内存的服务器居然加载到一半就崩溃了。这种场景在金融交易记录、物联网传感器数据、用户行为日志分析中太常见了。pandas默认的read_csv()会一次性把数据…...

编程新知 2026/3/30 8:37:28