JavaScript 数组排序

news2024/9/23 16:31:27

JavaScript 提供了多种对数组进行排序的方法，其中最常见和直接的是使用数组的 .sort() 方法。.sort() 方法可以对数组的元素进行排序，并返回排序后的数组。然而，.sort() 方法默认将数组元素转换为字符串，并按照字符串的 Unicode 编码进行排序，这对于数字数组或对象数组来说通常不是期望的排序方式。

sort() 方法是最强大的数组方法之一。

<!DOCTYPE html>
<html lang="en">

<body>
    <button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script>
        var zimus = ["B", "C", "D", "A", "F", "H"];
        document.getElementById("demo").innerHTML = zimus;
        function myFunction() {
            zimus.sort();
            document.getElementById("demo").innerHTML = zimus

        }
    </script>
</body>

</html>

点击前：

点击后 ：

反转数组

reverse() 方法反转数组中的元素。

您可以使用它以降序对数组进行排序：

<!DOCTYPE html>
<html lang="en">

<body>
    <h1>逆序</h1>
    <button onclick="myFunction()">试一试</button>

    <p id="demo1"></p>
    <script>
        var fruits = ["Banana", "Orange", "Apple", "Mango"];
        document.getElementById("demo1").innerHTML = fruits;

        function myFunction() {
            // First sort the array
            fruits.sort();
            // Then reverse it:
            fruits.reverse();
            document.getElementById("demo1").innerHTML = fruits;
        }
    </script>
</body>

</html>

点击前：

点击后 ：

数字排序

默认地，sort() 函数按照字符串顺序对值进行排序。

该函数很适合字符串（"Apple" 会排在 "Banana" 之前）。

不过，如果数字按照字符串来排序，则 "25" 大于 "100"，因为 "2" 大于 "1"。

正因如此，sort() 方法在对数值排序时会产生不正确的结果。

我们通过一个比值函数来修正此问题：

<!DOCTYPE html>
<html lang="en">

<body>
    <h1>数组排序</h1>
    <button onclick="myFunction()">单机</button>
    <p id="demo3"></p>
    <script>
        var points = [101, 88, 99, 66, 77, 44, 11, 22, 33,]
        document.getElementById("demo3").innerHTML = points;
        function myFunction() {
            points.sort(function (a, b) { return a - b });
            document.getElementById("demo3").innerHTML = points;
        }
    </script>
</body>

</html>

点击前：

点击后 ：

使用相同的技巧对数组进行降序排序：

点击前：

<!DOCTYPE html>
<html lang="en">

<body>
      <h1>数组降序</h1>
    <button onclick="myFunction()">单机</button>
    <p id="demo4"></p>
    <script>
        var ps = [101, 88, 99, 66, 77, 44, 11, 22, 33,]
        document.getElementById("demo4").innerHTML = points;
        function myFunction() {
            ps.sort(function (a, b) { return b - a });
            document.getElementById("demo4").innerHTML = ps;
        }
    </script>
</body>

</html>

点击前：

点击后 ：

比值函数

比较函数的目的是定义另一种排序顺序。

比较函数应该返回一个负，零或正值，这取决于参数：

function(a, b){return a-b}

当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。

当比较 40 和 100 时，sort() 方法会调用比较函数 function(40,100)。

该函数计算 40-100，然后返回 -60（负值）。

排序函数将把 40 排序为比 100 更低的值。

您可以使用下面的代码片段来测试数值和字母排序

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction1()">按字母排序</button>
<button onclick="myFunction2()">按数字排序</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction1() {
  points.sort();
  document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
  points.sort(function(a, b){return a - b});
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

点击前：

按字母排序

按数字排序

以随机顺序排序数组

实例

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">试一试</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction() {
  points.sort(function(a, b){return 0.5 - Math.random()});
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

查找最高（或最低）的数组值

JavaScript 不提供查找数组中最大或最小数组值的内建函数。

不过，在对数组进行排序之后，您能够使用索引来获得最高或最低值。

升序排序：

<!DOCTYPE html>
<html>
<body>
<p>最低值是：<span id="demo"></span></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
document.getElementById("demo").innerHTML = points[0];
</script>

</body>
</html>

降序排序

<!DOCTYPE html>
<html>
<body>
<p>最高值是：<span id="demo"></span></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
document.getElementById("demo").innerHTML = points[0];
</script>

</body>
</html>

对数组使用 Math.max()

您可以使用 Math.max.apply 来查找数组中的最高值：

<!DOCTYPE html>
<html>
<body>

<p>最高值是：<span id="demo"></span></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
  return Math.max.apply(null, arr);
}
</script>

</body>
</html>

Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。

对数组使用 Math.min()

您可以使用 Math.min.apply 来查找数组中的最低值

<!DOCTYPE html>
<html>
<body>
<p>最低值是：<span id="demo"></span></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);

function myArrayMin(arr) {
  return Math.min.apply(null, arr);
}
</script>

</body>
</html>

Math.min.apply([1, 2, 3]) 等于 Math.min(1, 2, 3)。

我的 Min / Max JavaScript 方法

最快的解决方法是使用“自制”方法。

此函数遍历数组，用找到的最高值与每个值进行比较

<!DOCTYPE html>
<html>

<body>
  <p>最高值是：<span id="demo"></span></p>

  <script>
    var points = [40, 100, 1, 5, 25, 10];
    document.getElementById("demo").innerHTML = myArrayMax(points);

    function myArrayMax(arr) {
      var len = arr.length;
      var max = -Infinity;
      while (len--) {
        if (arr[len] > max) {
          max = arr[len];
        }
      }
      return max;
    }
  </script>

</body>

</html>

实例（查找 Min）

<!DOCTYPE html>
<html>

<body>

  <p>最低值是：<span id="demo"></span></p>

  <script>
    var points = [40, 100, 1, 5, 25, 10];
    document.getElementById("demo").innerHTML = myArrayMin(points);

    function myArrayMin(arr) {
      var len = arr.length;
      var min = Infinity;
      while (len--) {
        if (arr[len] < min) {
          min = arr[len];
        }
      }
      return min;
    }
  </script>

</body>

</html>

排序对象数组

JavaScript 数组经常会包含对象

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];

即使对象拥有不同数据类型的属性，sort() 方法仍可用于对数组进行排序。

<!DOCTYPE html>
<html>

<body>
  <button onclick="myFunction()">排序</button>

  <p id="demo"></p>

  <script>
    var cars = [
      { type: "BMW", year: 2017 },
      { type: "Audi", year: 2019 },
      { type: "porsche", year: 2018 }
    ];

    displayCars();

    function myFunction() {
      cars.sort(function (a, b) { return a.year - b.year });
      displayCars();
    }

    function displayCars() {
      document.getElementById("demo").innerHTML =
        cars[0].type + " " + cars[0].year + "<br>" +
        cars[1].type + " " + cars[1].year + "<br>" +
        cars[2].type + " " + cars[2].year;
    }
  </script>

</body>

</html>

点击前：

点击后 ：

比较字符串属性会稍复杂

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">排序</button>

<p id="demo"></p>

<script>
var cars = [
  {type:"BMW", year:2017},
  {type:"Audi", year:2019},
  {type:"porsche", year:2018}
];

displayCars();

function myFunction() {
  cars.sort(function(a, b){
    var x = a.type.toLowerCase();
    var y = b.type.toLowerCase();
    if (x < y) {return -1;}
    if (x > y) {return 1;}
    return 0;
  });
  displayCars();
}

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}
</script>

</body>
</html>

点击前：

点击后 ：

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

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

相关文章

【Python】数据类型之字典（上）

【Python】数据类型之字典（上）

字典是有序、键不重复且元素只能是键值对的可变的一个容器。 data{"k1":1,"k2":25} data中“k1”和“k2”是键&#xff0c;而1,25是值。“k1”:1,"k2":25是键值对。 1&#xff09;&#xff09;容器&#xff1a;存储多个元素。 2&#xff09;…
阅读更多...
2024年港澳台联考高校新一波录取分数线来啦

2024年港澳台联考高校新一波录取分数线来啦

导读 在前面几次中&#xff0c;我们和大家分享了一些2024年港澳台联考高校最新的录取分数线。今天我们继续来看一批新的录取分数线吧&#xff01;景于行分享的数据基本上都是经过可靠验证的&#xff0c;大家可以放心参考。 上海大学 上海大学和深圳大学是近些年来&#xff0c;依…
阅读更多...
haproxy的安装和服务信息

haproxy的安装和服务信息

为什么要使用haproxy&#xff1f; 因为LSV无后端检测&#xff0c;当webserver有一台状态异常&#xff0c;则运作异常&#xff1b;所以用haproxy来解决。 haproxy是一款具备高并发(万级以上)、高性能的TCP和HTTP负载均衡器&#xff0c;它支持基于cookie的持久性&#xff0c;自动…
阅读更多...
力扣-1两数之和2两数相加-2024/8/3

力扣-1两数之和2两数相加-2024/8/3

1、两数之和 解法一 暴力法&#xff08;2个for循环&#xff09; class Solution:def twoSum(self, nums: List[int], target: int) -> List[int]:for ii in range(len(nums)):for jj in range(ii1, len(nums)):if nums[ii]nums[jj] target:return [ii,jj]解法二 哈希表法…
阅读更多...
具有并发功能的网页以及一点链表相关内容

具有并发功能的网页以及一点链表相关内容

最近学习内容&#xff0c;前几天做了个小项目&#xff0c;通过tcp与html构建具有并发功能的商城 具有以下功能&#xff1a; 1 登陆进入查询页面 2 搜索商品信息概述 3 查看商品详细信息 4 记录访客信息 5 注册新用户 主页如下 主页程序 程序的设计&#xff1a;将现实中大…
阅读更多...
DELL EMC PowerStore1000T存储添加主机、映射LUN

DELL EMC PowerStore1000T存储添加主机、映射LUN

本次操作是为了把存储的卷映射给VMware集群&#xff0c;存储网络协议为FC SAN&#xff0c;存储端和主机端均连接FC交换机&#xff0c;并且FC交换机已完成ZONE相关配置 具体操作过程如下&#xff1a; 一、DELL EMC PowerStore1000T添加主机 1、进入Web控制台&#xff0c;点击…
阅读更多...
字符函数和字符串函数(C语言)

字符函数和字符串函数(C语言)

目录 一. 字符分类函数 二. 字符转换函数 三.多种函数的使用和模拟实现 3.1 strlen函数 3.2 strcpy函数 3.3 strcat函数 3.4 strcmp函数 3.5 strncpy strncat strncmp &#x1f35f;&#x1f9e3;结束了指针的学习&#xff0c;我们开始了字符串之旅&#xf…
阅读更多...
【若依项目-RuoYi】掌握若依前端的基本流程

【若依项目-RuoYi】掌握若依前端的基本流程

搞毕设项目&#xff0c;使用前后端分离技术&#xff0c;后端springBoot&#xff0c;前端vue3element plus。自己已经写好前端与后端代码&#xff0c;但想换一个前端界面所以使用到了若依&#xff0c;前前后后遇到许多坑&#xff0c;记录一下&#xff0c;方便之后能够快速回忆。…
阅读更多...
创意指南丨VR游览沉浸式空间体验

创意指南丨VR游览沉浸式空间体验

欢迎来到我们制作的VR幻想世界。玩家的起点是一条蓝色水晶大道&#xff0c;让我们一起探索这个如梦似幻的境地。 在这条大道的两侧&#xff0c;漂浮着半透明的大水晶水母。它们轻盈地在空中飘动&#xff0c;仿佛在欢迎我们的到来。这条道路上方&#xff0c;一个个半圆环不停地…
阅读更多...
人脸身份证比对接口如何用Java对接？（二）

人脸身份证比对接口如何用Java对接？（二）

一、什么是人脸身份证比对&#xff1f; 人脸身份证比对又称人证比对&#xff0c;实人比对&#xff0c;人像比对&#xff0c;输入姓名、身份证号码和头像照片&#xff0c;与公安库身份证头像进行权威比对&#xff0c;返回分值作为判断依据。 二、人脸身份证比对接口适用哪些场…
阅读更多...
iMovie Tutorial【iMovie 剪辑教程】

iMovie Tutorial【iMovie 剪辑教程】

文章目录 项目字幕视频截取范围 显示进度条大小播放速度视频图层降噪转场设置转场时间 声音录制声音 分享导出文件 项目 字幕 视频 截取范围 i、o、e 显示进度条大小 播放速度 视频图层 例如&#xff1a;视频衔接、插入表情视频、头像对话 降噪 户外录制视频需要降噪。…
阅读更多...
计算机学习

计算机学习

不要只盯着计算机语言学习&#xff0c;你现在已经学习了C语言和Java&#xff0c;暑假又规划学习Python&#xff0c;最后你掌握的就是计算机语言包而已。 2. 建议你找一门想要深挖的语言&#xff0c;沿着这个方向继续往后学习知识就行。计算机语言是学不完的&#xff0c;而未来就…
阅读更多...
在ccs theia上用jlink下载烧录调试msp芯片配置

在ccs theia上用jlink下载烧录调试msp芯片配置

转载自ti官网的文章结合我自己的经历 将 Segger 编程器与 MSPM0 配合使用 1. 引言 本指南说明了如何将 Segger 编程器与 MSPM0 配合使用。 本文档不用于详细说明如何使用 Segger 工具。有关详细文档&#xff0c;请参阅相应的 IDE 或 Segger 文档。 2. 先决条件 用户应已下…
阅读更多...
某个国外的真实XSS漏洞利用探寻

某个国外的真实XSS漏洞利用探寻

Background 在一次测试中&#xff0c;在git中找到部分的源码&#xff0c;发现可能存在xss问题&#xff0c;但是经过了一点处理&#xff0c;于是经过探寻思考&#xff0c;找到了bypass的方法&#xff0c;写下本篇文章 Part.1 从git到混淆 server头看见这个配置 基本是flask了,…
阅读更多...
普中51单片机：DS18B20温度传感器操作指南（十三）

普中51单片机：DS18B20温度传感器操作指南（十三）

文章目录 引言电路图引脚讲解初始化时序写时序读时序温度变换温度读取完整代码 引言 DS18B20是一款单总线接口的数字温度传感器&#xff0c;仅需一个IO口即可实现数据通信。这里只对如何简单操作开发板的DS1802进行讲解&#xff0c;关于DS18B20温度传感器的详细操作原理&#…
阅读更多...
矢量文件坐标转换：2000坐标系转换为wgs84坐标系，具体代码实现

矢量文件坐标转换：2000坐标系转换为wgs84坐标系，具体代码实现

最近在处理矢量样本的时候&#xff0c;遇到一些shp文件的坐标系为2000坐标&#xff0c;需要统一地把非WGS84坐标系的矢量转换为WGS84坐标系。 本文记录一下如何进行2000坐标系转化为wgs84坐标系的过程。 在处理矢量数据转换的过程中&#xff0c;有几个关键步骤确保了数据的有效…
阅读更多...
ComfyUI LoRA应用和三级放大

ComfyUI LoRA应用和三级放大

ComfyUI LoRA应用和三级放大 LoRA加载器LoRA应用三级放大 LoRA加载器 新建节点–>加载器–>LoRA加载器 LoRA应用 如下图串起来 三级放大
阅读更多...
ActiveMQ任意文件写入漏洞（CVE-2016-3088）复现

ActiveMQ任意文件写入漏洞（CVE-2016-3088）复现

一.环境配置 腾讯云的ubuntu操作系统&#xff0c;已经安装有docker 和 vulhub 直接来到 启动环境docker-compose&#xff0c;要在root权限下运行。 docker-compose up -d 若出现等待时间过长的情况&#xff0c;请参考这篇文章http://t.csdnimg.cn/SYhbE 访问http://公网ip:8…
阅读更多...
Vivado启用modelsim报错boost::filesystem::remove

Vivado启用modelsim报错boost::filesystem::remove

问题描述 在vivado中以配置好仿真工具为modelsim&#xff0c;但是启动仿真时报错如下&#xff1a; boost::filesystem::remove: 另一个程序正在使用此文件&#xff0c;进程无法访问。 "C:/Users/ZYP_PC/Desktop/verilog_test/simulation_project/project_1/project_1.si…
阅读更多...
VTK8.2.0编译（Qt 5.14.2+VS2017）

VTK8.2.0编译（Qt 5.14.2+VS2017）

VTK8.2.0编译（Qt 5.14.2+VS2017） 关于Qt和MSVC的安装，可以参考文章（Qt+MSVC2017）。 本篇VTK在Qt+MSVC的配置下的编译。VTK 以8.2.0为例。 一、环境变量的配置 我们打开电脑的环境变量，可以看到没有Qt相关的路径的配置： 我们把Qt相关的变量增加一下（主要以64位为主，…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023