【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 == b
            return 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 == b
            return 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 == b
            return 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>

执行结果 :

在这里插入图片描述

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

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

相关文章

C#编程模式之享元模式

C#编程模式之享元模式

创作背景&#xff1a;各位朋友&#xff0c;我们继续学习C#的编程模式&#xff0c;本文主要介绍享元模式。享元模式是一种结构型设计模式&#xff0c;它主要用于减少创建对象的数量&#xff0c;从而提高程序性能。它通过共享对象的方式来减少内存的使用&#xff0c;特别是系统中…
阅读更多...
彩虹聚合DNS管理系统

彩虹聚合DNS管理系统

聚合DNS管理系统可以实现在一个网站内管理多个平台的域名解析&#xff0c;目前已支持的域名平台有&#xff1a;阿里云、腾讯云、华为云、西部数码、CloudFlare。本系统支持多用户&#xff0c;每个用户可分配不同的域名解析权限&#xff1b;支持API接口&#xff0c;支持获取域名…
阅读更多...
同城组局同城活动找搭子小程序JAVA源码面芽组局的实现方案

同城组局同城活动找搭子小程序JAVA源码面芽组局的实现方案

功能概述 基于微信小程序开发的一款软件&#xff0c;支持用户动态发布、私信聊天关注、礼物充值打赏、发起活动组局、用户报名参与、支持商家入驻&#xff0c;对接广告功能等。 活动发布&#xff1a;用户可以在平台上发布各种类型的活动&#xff0c;如户外徒步、音乐会观赏、…
阅读更多...
回炉重造java----单列集合(List,Set)

回炉重造java----单列集合(List,Set)

体系结构: 集合主要分为两种&#xff0c;单列集合collection和双列集合Map&#xff0c;区别在于单列集合一次插入一条数据&#xff0c;而双列的一次插入类似于key-value的形式 单列集合collection 注:红色的表示是接口&#xff0c;蓝色的是实现类 ①操作功能: 增加: add()&am…
阅读更多...
探索震坤行API：一键解锁高效工业用品采购新纪元！

探索震坤行API：一键解锁高效工业用品采购新纪元！

震坤行是一家专注于工业用品的B2B电商平台&#xff0c;为企业客户提供一站式的工业用品采购服务。虽然震坤行没有直接公开通用的API接口供开发者调用&#xff0c;但通常大型企业或合作伙伴之间可以通过API进行系统集成和数据交互。以下是一个假设性的震坤行API接口调用示例与代…
阅读更多...
博特激光:355nm高精度紫外激光打标机带来极致工艺

博特激光:355nm高精度紫外激光打标机带来极致工艺

紫外激光打标机在现代制造业和技术中的应用&#xff0c;的确在准确度和精密度方面带来了革命性的提高。特别是在微电子、半导体、医疗器械、高端消费品等需要高精度、高清晰打标的行业&#xff0c;紫外激光打标机以其独特的优势&#xff0c;赋予产品极致的工艺品质。 以下是UV激…
阅读更多...
软件测试之 接口测试 Postman使用

软件测试之 接口测试 Postman使用

接口测试 URL HTTP协议 HTTP 请求部分 HTTP响应部分 Postman使用 界面介绍 这里 注意 如果你无法访问 那么 captchaImage这个打错了&#xff0c;给的资料中是错误的地址 https://kdtx-test.itheima.net/api/captchaImage登录接口 科大天下 第一个接口的登录设置 https://kd…
阅读更多...
基于vgg16和efficientnet卷积神经网络的天气识别系统(pytorch框架)全网首发【图像识别-天气分类】

基于vgg16和efficientnet卷积神经网络的天气识别系统(pytorch框架)全网首发【图像识别-天气分类】

一个能够从给定的环境图像中自动识别并分类天气&#xff08;如晴天、多云、雨天、雪天等&#xff09;的系统。 技术栈&#xff1a; 深度学习框架&#xff1a;PyTorch基础模型&#xff1a;VGG16与EfficientNet任务类型&#xff1a;计算机视觉中的图像分类 模型选择 VGG16 VGG…
阅读更多...
Redis 源码安装（CentOS 单机）

Redis 源码安装（CentOS 单机）

序言 本文给大家介绍如何在 CentOS 上&#xff0c;通过 Redis 源码单机部署 Redis 服务。 一、部署流程 通过官网下载源码 # 下载源码 wget https://download.redis.io/redis-stable.tar.gz# 解压源码包 tar -xzvf redis-stable.tar.gz在 linux 中执行以下命令&#xff0c;安…
阅读更多...
信息系统项目管理师0101：项目建议与立项申请（7项目立项管理—7.1项目建议与立项申请）

信息系统项目管理师0101：项目建议与立项申请（7项目立项管理—7.1项目建议与立项申请）

点击查看专栏目录 文章目录 第七章 项目立项管理7.1项目建议与立项申请1.立项申请概念2.项目建议书内容记忆要点总结第七章 项目立项管理 项目立项管理是对拟规划和实施的项目技术上的先进性、适用性，经济上的合理性、效益性，实施上的可能性、风险性以及社会价值的有效性、可…
阅读更多...
Java面试——MyBatis

Java面试——MyBatis

优质博文&#xff1a;IT-BLOG-CN 一、MyBatis 与 JDBC 的区别 【1】JDBC 是 Java 提供操作数据库的 API&#xff1b;MyBatis 是一个持久层 ORM 框架&#xff0c;底层是对 JDBC 的封装。 【2】使用 JDBC 需要连接数据库&#xff0c;注册驱动和数据库信息工作量大&#xff0c;每…
阅读更多...
Html生成自定义函数的图形（2024/5/10）

Html生成自定义函数的图形（2024/5/10）

大概效果如下&#xff1a; 可以自定义函数和x的定义域。 我们可以使用数学表达式解析库来解析用户输入的函数方程&#xff0c;并根据给定的 x 区间计算函数的值&#xff0c;然后使用图表库绘制图形。 在这里&#xff0c;我将使用 math.js 库来解析数学表达式&#xff0c;并使…
阅读更多...
linux fdisk 银河麒麟操作系统 v10 磁盘分区和挂载 详细教程

linux fdisk 银河麒麟操作系统 v10 磁盘分区和挂载 详细教程

1查看 未加载的磁盘 fdisk -l 2 开始分区 fdisk /dev/vdb #查看分区 #新建分区和保存 3 格式化和挂载 fdisk -l mkfs.xfs /dev/vdb1 #查看uuid blkid /dev/vdb1 mkdir /data vi /etc/fstab UUID209daa-fb1c-48f2-bf5e-e63f38cb8a /data xfs defaults 0 0 #加载下 mo…
阅读更多...
Java 各类注解、Bean、作用域、生命周期

Java 各类注解、Bean、作用域、生命周期

这里写目录标题 一、注解和Bean创建时机1. Controller:2.RestController:3.Service:4.Repository:5.Component: 二、作用域1.Singleton:2.Prototype:3.Request:4.Session: 一、注解和Bean创建时机 1. Controller: Bean生成时机: 在应用程序启动时由Spring容器创建。作用域: 默…
阅读更多...
力扣每日一题37：解数独

力扣每日一题37：解数独

目录 题目 大致思路 方法一&#xff1a;回溯剪枝&#xff08;正常人能想出来的&#xff09; 方法二&#xff1a;位运算优化剪枝 需要使用的位运算技巧 代码 位运算怎么就优化了呢&#xff1f; 方法三&#xff1a;枚举优化。 官解代码 方法四&#xff1a;舞蹈链算法 题…
阅读更多...
机器学习-Padans

机器学习-Padans

机器学习-Padans 面对人生的烦恼与挫折&#xff0c;最重要的是摆正自己的心态&#xff0c;积极面对一切。再苦再累&#xff0c;也要保持微笑。笑一笑&#xff0c;你的人生会更美好&#xff01; 目录 机器学习-Padans 1.DataFrame 2.画图 3. 扩展&#xff1a; 1.DataFrame #…
阅读更多...
一键局域网共享工具

一键局域网共享工具

一键局域网共享工具&#xff1a;实现文件快速共享的新选择 在数字化时代&#xff0c;文件共享已成为我们日常工作和生活中的重要需求。无论是在家庭还是在办公环境中&#xff0c;我们经常需要在不同的设备之间传输文件。为了满足这一需求&#xff0c;一键局域网共享工具应运而…
阅读更多...
python爬虫（三）之虎嗅网汽车文章爬虫

python爬虫（三）之虎嗅网汽车文章爬虫

python爬虫&#xff08;三&#xff09;之虎嗅网汽车文章爬虫 闲来没事&#xff0c;闲鱼上有个好兄弟要我从虎嗅网上抓一些汽车文章的爬虫&#xff0c;于是大力出奇迹&#xff0c;我写了一个python程序&#xff0c;将这个网站上所有的汽车文章全部抓取下来了&#xff0c;存储到…
阅读更多...
（三十九）第 6 章 树和二叉树（二叉树的三叉链表存储）

（三十九）第 6 章 树和二叉树（二叉树的三叉链表存储）

1. 背景说明 2. 示例代码 1) errorRecord.h // 记录错误宏定义头文件#ifndef ERROR_RECORD_H #define ERROR_RECORD_H#include <stdio.h> #include <string.h> #include <stdint.h>// 从文件路径中提取文件名 #define FILE_NAME(X) strrchr(X, \\) ? strrc…
阅读更多...
RF Plasma gernerator-系列(RF-5KW Adtec)说明书TX06-9001-00

RF Plasma gernerator-系列(RF-5KW Adtec)说明书TX06-9001-00

RF Plasma gernerator-系列(RF-5KW Adtec)说明书TX06-9001-00
阅读更多...
最新文章

Copyright @ 2022~2023