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

news2024/11/18 17:52:31

文章目录

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

执行结果 :

在这里插入图片描述

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

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

相关文章

Vue2 组件通信方式

Vue2 组件通信方式

props/emit props 作用&#xff1a;父组件通过 props 向子组件传递数据parent.vue <template><div><Son :msg"msg" :pfn"pFn"></Son></div> </template><script> import Son from ./son export default {name: …
阅读更多...
Web前端开发 小实训（三） 商品秒杀小练习

Web前端开发 小实训（三） 商品秒杀小练习

学生能够在本次实训中完成商品秒杀页面的基本逻辑 任务要求 能够实现某一个商品的秒杀&#xff0c;在倒计时结束后不再进行秒杀。 操作步骤 1、打开预设好的页面 <html><head><meta charset"utf-8"><title>秒杀</title><link …
阅读更多...
DataLab-数据分析的Ai辅助工具

DataLab-数据分析的Ai辅助工具

添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09;DataLab是一个由DataCamp提供的强大在线数据分析平台&#xff0c;它通过AI技术简化了数据处理流程&#xff0c;使得用户无需编程或数据分析的高级技能即可快速获取数据洞察。它支持多种数据源&#xff0c;包…
阅读更多...
AJAX概述和基本使用

AJAX概述和基本使用

01 【AJAX概述和基本使用】 1.AJAX简介 AJAX 全称为Asynchronous JavaScript And XML&#xff0c;就是异步的JS 和XML 通过AJAX 可以在浏览器中向服务器发送异步请求&#xff0c;最大的优势&#xff1a;无刷新获取数据 AJAX 不是新的编程语言&#xff0c;而是一种将现有的标准…
阅读更多...
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
阅读更多...
C语言 [力扣]详解环形链表和环形链表II

C语言 [力扣]详解环形链表和环形链表II

各位友友们&#xff0c;好久不见呀&#xff01;又到了我们相遇的时候&#xff0c;每次相遇都是一种缘分。但我更加希望我的文章可以帮助到大家。下面就来具体看看今天所要讲的题目。 文章目录 1.环形链表2.环形链表II 1.环形链表 题目描述:https://leetcode.cn/problems/link…
阅读更多...
亲测有效！关键点检测——COCO格式转YOLO格式代码！！！

亲测有效！关键点检测——COCO格式转YOLO格式代码！！！

话不多收&#xff0c;直接上代码&#xff0c;这个我也是找了好久的&#xff0c;分享不易&#xff0c;给个鼓励&#xff01;&#xff08;记得点赞收藏&#xff09; 大家可以直接使用此代码转换你自己的数据集&#xff0c;路径换成你自己的就行了&#xff0c;注意路径格式&#x…
阅读更多...
【经验总结】超参数对模型训练的影响

【经验总结】超参数对模型训练的影响

1. 学习率对模型训练的影响 python 代码&#xff1a; import numpy as np from keras.models import Sequential from keras.layers import Dense from keras.optimizers import Adam import matplotlib.pyplot as plt# 生成随机数据集 np.random.seed(0) X_train np.random…
阅读更多...
2024年最新趋势跨境电商平台开发需了解的新技术

2024年最新趋势跨境电商平台开发需了解的新技术

随着数字化技术的不断演进和全球市场的日益融合&#xff0c;跨境电商平台开发将面临前所未有的挑战和机遇。为了更好地适应并引领这一发展&#xff0c;开发者需要密切关注2024年最新的技术趋势&#xff0c;以确保他们的平台能够在竞争激烈的市场中脱颖而出。本文将对跨境电商平…
阅读更多...
TCP UDP

TCP UDP

传输层 端口号 tcp udp 网络层 IP地址 IP TCP&#xff0c;UDP 1&#xff0c;TCP是面向链接的协议&#xff0c;而UDP是无连接的协议; 2&#xff0c;TCP协议的传输是可靠的&#xff0c;而UDP协议的传输“尽力而为” 3&#xff0c;TCP可以实现流控&#xff0c;但UDP不行;…
阅读更多...
通用型产品发布解决方案（后端环境搭建）

通用型产品发布解决方案（后端环境搭建）

文章目录 后端renren脚手架配置1.解压后放到项目目录下2.新建商品模块1.创建一个新模块 sunliving-commodity2.删除两个不必要的文件3.pom.xml 引入依赖 3.maven进行聚合管理1.将刚才配置的pom.xml文件复制到父项目下并进行修改2.手动将这个pom.xml加入项目&#xff08;如果右下…
阅读更多...
14 华三 Telent

14 华三 Telent

AI 解读 09 华三 SSH-CSDN博客 华三 Telent是华为三号电信工程有限公司的简称&#xff0c;是一家专门从事电信网络工程建设的公司。该公司提供电信网络规划、设计、建设、维护等一系列服务&#xff0c;包括有线和无线网络设备的安装和调试、网络性能优化等。华三 Telent致力于…
阅读更多...
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…
阅读更多...
指针（脑图梳理）

指针（脑图梳理）

今天让我们来梳理一下指针都有哪些概念吧 这个脑图是整理的一些指针相关知识的概念&#xff0c;希望对大家有帮助
阅读更多...
如何远程控制另一部手机：远程控制使用方法

如何远程控制另一部手机：远程控制使用方法

在现今高科技的社会中&#xff0c;远程控制手机的需求在某些情境下变得越来越重要。不论是为了协助远在他乡的家人解决问题&#xff0c;还是为了确保孩子的在线安全&#xff0c;了解如何实现这一功能都是有益的。本文将为您简要介绍几种远程控制手机的方法及其使用要点。 KKVi…
阅读更多...
OC foudation框架（下）的学习

OC foudation框架（下）的学习

OCfoudation框架&#xff08;下&#xff09; 前面学习了有关OCfoudation框架的部分内容&#xff0c;我们现在对于后面的内容继续学习。 文章目录 OCfoudation框架&#xff08;下&#xff09;数组&#xff08;NSArray和NSMutableArray&#xff09;对集合元素整体调用方法排序使用…
阅读更多...
idea-自我常见配置

idea-自我常见配置

1. 主题配置 2. 显示方法分隔符 Editor->General->Appearance 3. 忽略大小写提示 Editor->General->Code Completion 4. 自动导包 Editor->general->Auto Import 5. 取消单行显示Tabs Editor->General->Editor Tabs 效果如下图&#xff1a; 6. 设置…
阅读更多...
Vue项目npm install certificate has expired报错解决方法

Vue项目npm install certificate has expired报错解决方法

1.Vue项目 npm install 安装依赖突然报错&#xff1a; npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.org/zrender/download/zrender-4.3.0.tgz failed, reason: certificate has expired npm ERR! A com…
阅读更多...
Neo4j 之安装和 CQL 基本命令学习

Neo4j 之安装和 CQL 基本命令学习

正常使用结构化的查询语言 SQL&#xff08;Structured Query Language&#xff09;较多一些&#xff0c;但是像 Neo4j 这种非结构化的图形数据库来说&#xff0c;就不得不学习下 CQL&#xff08;Cypher Query Language&#xff09;语言了。如果你之前学过 《离散数学》或《图论…
阅读更多...
Navicat 17 的数据分析

Navicat 17 的数据分析

上周的博客预告了 Navicat 17&#xff08;英文版&#xff09;即将发布&#xff0c;目前正在测试阶段&#xff0c;并计划于 5 月 13 日发布。如我们所见&#xff0c;版本 17 推出了众多令人兴奋的新功能。其中最大亮点是数据分析工具&#xff0c;只需点击按钮&#xff0c;即可为…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023