JavaScript 数组排序

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量460 收藏 8
点赞数 10
分类专栏： js 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78133614/article/details/140996734
版权

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>

点击前：

点击后 ：

软件技术NINI
关注
  • 10
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
六种JavaScript数组排序方法
Rui_shen的博客
04-16 1472
冒泡排序 //冒泡排序 function sort(arr) { for (let i = 0; i < arr.length - 1; i++) { for (let j = 0; j < arr.length - 1 - i; j++) { if (arr[j] < arr[j + 1]) { let temp = arr[j]; ar
javascript数组排序
且听真言
11-25 1037
最常用的数组操作之一是排序，按一定的秩序对数组元素进行排序。遗憾的是，正确地实现排序算法并不是简单的编程任务：我们必须选择最好的排序算法，实现排序算法，以满足我们定制化任务，同时注意不要产生缺陷。为了解决这个问题，JavaScript数组具有sort方法，使用方法如下： array.sort((a, b) =&gt; a-b); JavaScript引擎实现了排序算法。我们需要提供回调函数，告...
JavaScript 26 JavaScript 数组排序
谢谢你们的关注
10-29 329
JavaScript 26 JavaScript 数组排序
javascript数组排序的方法
精通前端技术，了解后端接口
03-05 591
这个方法会按照指定的顺序对数组的元素进行排序，并返回排序后的数组。如果未指定比较函数，那么元素会被转换为字符串，并按照字符的Unicode码点顺序进行排序。默认将数组元素转换为字符串进行排序，因此上面的代码可能不会按照预期的数字大小顺序进行排序。为了得到正确的数字排序，你需要提供一个比较函数。方法会直接修改原数组，并返回排序后的数组。如果你不想修改原数组，可以先复制一份数组再进行排序。，那么元素会按照字符的Unicode码点顺序进行排序。在这个例子中，我们按照字符串的长度进行排序。，则返回一个负数，如果。
JavaScript数组排序
weixin_46585382的博客
06-17 123
JavaScript数组排序
JavaScript 数组排序【六大方法】
热门推荐
yi_yayaya的博客
07-27 1万+
文章目录 数组排序 sort()方法 冒泡排序 选择排序 插入排序 快速排序 希尔排序 数组排序 排序，就是把一个乱序的数组，通过我们的处理，让他变成一个有序的数组 1. sort()方法 sort() 数组对象排序 其原理是冒泡排序 reverse() 方法能够颠倒数组元素的排列顺序 例如： var arr = [3,1,5,6,4,9,7,2,8]; var asc = arr.sort() console.log(asc); // 1,2,3,4,5,6,7,8,9 var desc = asc.
JavaScript数组排序方法
weixin_50930483的博客
04-17 162
JavaScript数组排序
JavaScript数组排序的介绍
这里是前端，是不一样的前端
09-22 165
JavaScript数组排序是一种常见的技术，它允许我们对数组中的元素进行排序。在本文中，我们将探讨JavaScript数组排序的背景、原理、使用场景、具体实现代码以及一些注意事项，并最后进行全文总结。JavaScript数组排序方法是一种常见且重要的技术，它可以帮助我们对数组中的元素进行排序。通过了解排序的原理和使用数组排序的具体实现代码，我们可以更好地应用JavaScript，实现灵活和高效的数组排序。
JavaScript 数组排序函数sort（）的使用
oiooio11的博客
12-27 3774
简介   sort（）方法是js中对于数组进行排序的函数。其可以方便快捷的实现对于数组的排序而不用我们自己编写排序方法。注：sort（）函数会直接改变原数组。 1.纯字符串数组排序 let myArray = ["people","person","apple","ziv"] console.log(myArray.sort()) // 打印结果[ 'apple', 'people', 'person', 'ziv' ]   其对于字符串数组直接按照字典顺序进行排序。注意：大小写字母也会影响排序结果，大
JavaScript数组排序的六种常见算法总结
11-19
在JavaScript中，数组排序是常见的操作，涉及到多种不同的算法，每种算法有着不同的效率和适用场景。本文将总结六种常见的排序算法，并提供相应的代码示例。 首先，我们来看看希尔排序（Shell Sort），这是一种改进...
javascript 数组排序
04-17
通过阅读《2011-02-14-js-sort.html》这篇博文，你将能了解更多关于JavaScript数组排序的细节，包括一些高级技巧和常见陷阱。同时，CSS文件可能是用来美化博客页面样式的，但在这个讨论中并不直接相关。 总之，理解...
javascript数组排序汇总
10-23
JavaScript数组排序汇总主要涉及到四种经典的排序算法：冒泡排序、快速排序、插入排序和希尔排序。这些算法在处理数组时有着不同的效率和应用场景。 1. **冒泡排序**（Bubble Sort）： 冒泡排序是一种简单的排序...
javascript 数组排序函数
10-29
JavaScript数组排序函数是JavaScript编程语言中用于对数组元素进行排序的标准方法。数组的sort方法可以对数组中的元素进行排序，其默认排序行为是按照字符串的Unicode码点顺序进行排序，也就是说，它会将数组元素...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2015
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 450
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 266
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 287
实现中国地图各省数据案例
Javascript数组排序
10-18
好的，Javascript数组排序可以使用sort()方法来实现。sort()方法可以接受一个可选的比较函数作为参数，用于指定排序规则。如果不传入比较函数，则默认按照Unicode码点进行排序。 下面是一个例子，将一个数字数组...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值