javaScript:一分钟看懂数组排序以及冒泡排序(重点)

news2024/11/17 3:24:20

目录

一.前言

二.数组排序

sort()

    字符串大小的比较原则

    字符编码排序规则

如果使用sort从小到大排列  (重点)

    函数的返回值

    规则:

代码 

案例 

数组打乱

sort相关代码 

三.冒泡排序(重点)

执行过程

代码演示(详细步骤/过程拆解)

案例

练习随机生成 [10,80]的10个整数然后进行冒泡排序


一.前言

        数组排序是将数组中的元素按照一定的规则进行重新排列的过程。排序的目的通常是为了使数组的元素按照升序或降序的方式排列,以便更方便地进行搜索、比较和查找操作。

       冒泡排序是最简单且常见的排序算法之一,它通过重复遍历数组并比较相邻元素的大小来进行排序。在每次遍历中,如果前面的元素大于后面的元素,则交换它们的位置,直到整个数组排序完成。

二.数组排序

sort()

    使用 sort()方法,对数组进行排序(该方法改变的是原数组)

    sort 默认 把 number类型转化为string 类型,然后根据每个字符串的字符编码比较大小。

    字符串大小的比较原则

    几个字符串比较大小,会依次比较每一位置上的字符编码大小,直到比较出大小之后就不再比较,后面的字符直接省略

    字符编码排序规则

    数字 0-9

    A-Z,a-z 依次变大

    A<a

如果使用sort从小到大排列  (重点)

     一般的在进行排序的时候,会给sort()传入一个参数,该参数是一个函数,在函数中设置排序规则,

    该函数必须有返回值

    函数的返回值

    return 参数1 - 参数2: 从小到大排序

    return 参数2 - 参数1: 从大到小排序

    规则:

    当返回一个正数,就会交换两者的位置

    当返回一个负数,不会交换两者的位置

    当返回一个0,会认为这两个数字相等,也不会交换位置

代码 

 let arr4 = [112,231,21,21,1,3,32]
   arr4.sort(function(a,b){
       return a-b  //从小到大
   })
   console.log(arr4)

 

案例 

数组打乱

//数组打乱
   let arr5 = ["1","2","3","4","5","6",
   "7","8","9","10","11","12","13","14"]
   arr5.sort(function(){
      return Math.random()-0.5
   })
   console.log(arr5);

sort相关代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组排序</title>
</head>
<body>
    
</body>
</html>
<script>
    /*
    使用 sort()方法,对数组进行排序
    该方法改变的是原数组
    sort 默认 把 number类型转化为string 类型,然后根据每个字符串的字符编码比较大小。

    字符串大小的比较原则
    几个字符串比较大小,会依次比较每一位置上的字符编码大小,直到比较出大小之后就不再比较
    后面的字符直接省略

    字符编码排序规则
    数字 0-9
    A-Z,a-z 依次变大 
    A<a

    */
    let arr1 = [1,4,6,3,2,10]
    arr1.sort();
    console.log(arr1);

    let arr2 = ['e','ab','ac','d']
    arr2.sort();
    console.log(arr2);

    let arr3 = ['刘备','关羽','曹操','张飞']
    arr3.sort();
    console.log(arr3);

    /*
    一般的在进行排序的时候,会给sort()传入一个参数,该参数是一个函数,在函数中设置排序规则,
    该函数必须有返回值

    函数的返回值
    return 参数1 - 参数2: 从小到大排序
    return 参数2 - 参数1: 从大到小排序

    规则:
    当返回一个正数,就会交换两者的位置
    当返回一个负数,不会交换两者的位置
    当返回一个0,会认为这两个数字相等,也不会交换位置
    */
   let arr4 = [112,231,21,21,1,3,32]
   arr4.sort(function(a,b){
       return a-b  //从小到大
   })
   console.log(arr4)

   //数组打乱
   let arr5 = ["1","2","3","4","5","6",
   "7","8","9","10","11","12","13","14"]
   arr5.sort(function(){
      return Math.random()-0.5
   })
   console.log(arr5);
</script>

三.冒泡排序(重点)

执行过程

  1. 从数组的第一个元素开始,依次比较相邻的两个元素。
  2. 如果前面的元素比后面的元素大(或小,取决于排序顺序),则交换这两个元素的位置。
  3. 继续向后遍历数组,重复1和2步骤,直到遍历到倒数第二个元素。
  4. 重复以上步骤的过程,每次遍历都使得最大(或最小)的元素“浮”到上一轮排序中最后一个未排序的位置。
  5. 重复上述步骤,直到全部元素排序完成。

代码演示(详细步骤/过程拆解)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冒泡排序</title>
</head>
<body>
    
</body>
</html>
<script>
    let arr = [3,5,4,2,1]
    //第一趟,比较4次
    for (let i = 0; i < 4; i++) {
        //比较两个相邻的大小,如果i位置的值 大于 i+1位置是值,则交换数据
        if(arr[i]>arr[i+1]){
            let temp = arr[i]
            arr[i] = arr[i+1]
            arr[i+1] = temp
        }
        
    }
    console.log(arr);  //[3, 4, 2, 1, 5]

    //第二趟比较三次
    for (let i = 0; i < 3; i++) {
        if(arr[i]>arr[i+1]){
            let temp = arr[i]
            arr[i] = arr[i+1]
            arr[i+1] = temp
        }
    }
    console.log(arr); //[3, 2, 1, 4, 5]

    //第三趟比较两次
    for (let i = 0; i < 2; i++) {
        if(arr[i]>arr[i+1]){
            let temp = arr[i]
            arr[i] = arr[i+1]
            arr[i+1] = temp
        }
    }
    console.log(arr);  //[2, 1, 3, 4, 5]
    //第四趟  ,比较一次
    for (let i = 0; i < 2; i++) {
        if(arr[i]>arr[i+1]){
            let temp = arr[i]
            arr[i] = arr[i+1]
            arr[i+1] = temp
        }
    }
    console.log(arr); //1, 2, 3, 4, 5]

    /*
    比较的数组,每一次比较的趟数,他和对应比较的次数关系是
    一共比较的趟数 arr.lenght-1

    每一轮比较的的次数,是arr.lenght  - 当前的趟数(轮数)
    */

    //外层控制比较的轮数
   for (let i = 1; i < arr.length; i++) {
       //内层控制比较的次数
       for (let j = 0; j < arr.length-i; j++) {
        if(arr[j]>arr[j+1]){    //(s[j]<s[j+1]) 从大到小
            let temp = arr[j]
            arr[j] = arr[j+1]
            arr[j+1] = temp
        }
        
       }
    
   }


  
    </script>

案例

练习随机生成 [10,80]的10个整数然后进行冒泡排序

//练习随机生成 [10,80]的10个整数然后进行冒泡排序

   let s = []
   for (let i = 0; i < 10; i++) {
    let sj = Math.floor(Math.random()*71+10)
    s[i] = sj
   }
   console.log(s)
   for (let i = 1; i < s.length; i++) {
       //内层控制比较的次数
       for (let j = 0; j < s.length-i; j++) {
        if(s[j]>s[j+1]){    //(s[j]<s[j+1]) 从大到小
            let temp = s[j]
           s[j] =s[j+1]
            s[j+1] = temp
        } 
       }  
   }
   console.log(s);
   console.log('最小值是'+s[0]);
   console.log('最大值是'+s[s.length-1]);

 

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

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

相关文章

Zass主题 - 手工艺术家和工匠的WooCommerce商城主题

Zass主题是适合手工艺术家和工匠的完美 WordPress / WooCommerce 主题。无论您是想为您的手工制作业务构建功能齐全的 Etsy Style 在线商店、博客还是作品集&#xff0c;Zass 主题都是您的正确选择。凭借其极其强大的自定义电子商务功能、无限的作品集风格、不同的博客风格和无…

多维时序 | MATLAB实现WOA-CNN-GRU-Attention多变量时间序列预测

多维时序 | MATLAB实现WOA-CNN-GRU-Attention多变量时间序列预测 目录 多维时序 | MATLAB实现WOA-CNN-GRU-Attention多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLAB实现WOA-CNN-GRU-Attention多变量时间序列预测&#xff0c;WOA-CNN-GR…

小象课堂在线授课教育系统

此项目包含后端全部代码&#xff0c;前端包括后台和web界面的源码&#xff0c;数据库用的mysql,可当作课设或者毕设&#xff0c;还可写入自己的简历中 web界面展示&#xff1a; 前端后台界面展示&#xff1a; 用户管理 课程管理 内容配置 订单管理 系统管理 系统监控

Postman项目实战一

项目简介&#xff1a;外卖任务委派系统 测试脚本&#xff1a; 登录&#xff0c;获取token创建任务&#xff0c;获取任务id根据id&#xff0c;修改任务根据id&#xff0c;查询任务根据id&#xff0c;删除任务根据id&#xff0c;验证任务已被删除 步骤&#xff1a; 1.创建Col…

聚隆转债上市价格预测

聚隆转债 基本信息 转债名称&#xff1a;聚隆转债&#xff0c;评级&#xff1a;A&#xff0c;发行规模&#xff1a;2.185亿元。 正股名称&#xff1a;南京聚隆&#xff0c;今日收盘价&#xff1a;16.64元&#xff0c;转股价格&#xff1a;18.27元。 当前转股价值 转债面值 / 转…

炒股票怎么加杠杆_融资融券账户怎么开通

炒股票作为一种投资方式&#xff0c;可以带来不错的回报。然而&#xff0c;对于那些希望以较小的资金获得更高收益的投资者来说&#xff0c;加杠杆炒股票是一个值得考虑的选择。本文将为您介绍加杠杆炒股票的意义&#xff0c;以及如何开通融资融券账户。 加杠杆炒股票的意义&a…

vue常识

vue是一套用于构建用户界面的渐进式框架,vue的核心库只关注视图层 1.声明式框架 ● 早在jquery的时期,编写代码都是命令式的,命令式框架的特点就是关注过程 ● 声明式框架更加注重结果,命令式的代码封装到了vue.js中,过程靠vue.js来实现 声明式代码更加简单,不需要关注实现,…

ssm学生请假系统源码和论文

ssm学生请假系统034 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集…

知了汇智与西南石油大学合作开展网络安全生产实习,培养实战型人才

近年来&#xff0c;随着互联网的快速发展和数字化转型的推进&#xff0c;网络安全问题日益突出。然而&#xff0c;网络安全应用型人才的供给却严重不足&#xff0c;导致行业面临着巨大的挑战和风险。面对这一现状&#xff0c;开展校企合作&#xff0c;培养优秀的网络安全行业人…

Talk | ICCV‘23 HumanMAC:简洁易拓展的人体动作预测新框架

​ 本期为TechBeat人工智能社区第522期线上Talk&#xff01; 北京时间8月16日(周三)20:00&#xff0c;清华大学博士生—陈凌灏的Talk已准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “HumanMAC-简洁易拓展的人体动作预测新框架”&#xff0c;介绍了人体动…

使用爱校对提升公文材料准确性的必要性

在我们的工作中&#xff0c;公文材料的准确性往往决定了我们的工作效果。无论是内部的报告、计划&#xff0c;还是外部的公告、通知&#xff0c;都需要准确无误才能达到我们预期的效果。为此&#xff0c;我们需要使用强大的工具——爱校对&#xff0c;来提升公文材料的准确性。…

Yii2 advanced 框架,自定义Log日志方案

背景 近期在使用 【Yii2 advanced】框架时 在接触到 微信支付回调操作时&#xff0c;想要将微信服务器请求的参数信息记录下来 但是&#xff0c;不喜欢框架自带的日志配置方式 在此&#xff0c;推荐使用一种自定义文件目录与log记录形式的方案 希望有此需求的道友&#xff0c;能…

IDEA下方工具栏SideBar没有Services解决方法 IDEA配合微服务学习多端口管理打开Services栏方法

问题 微服务学习时&#xff0c;一次要打开多个端口&#xff0c;比如8080给order模块、8081给user模块……这就需要用idea管理多端口。 这时候就可以用到Services栏进行管理。 解决 首先看下方Sidebar没有Services。 打开Services 打开方式一&#xff1a;手动打开 在IDEA中…

智能语音开放平台选哪家,启英泰伦提供硬件、软件一体化服务

离线智能语音产品方案的开发主要包含两个方面&#xff1a;硬件和软件。这里硬件是指采用语音芯片等电子元器件为该产品设计的电路板&#xff0c;软件是指基于电路板上主控芯片的种类及产品功能需求所开发的代码&#xff0c;再经过编译工具等生成可下载到主控芯片中的语音固件&a…

【云原生、k8s】Calico网络策略

第四阶段 时 间&#xff1a;2023年8月17日 参加人&#xff1a;全班人员 内 容&#xff1a; Calico网络策略 目录 一、前提配置 二、Calico网络策略基础 1、创建服务 2、启用网络隔离 3、测试网络隔离 4、允许通过网络策略进行访问 三、Calico网络策略进阶 1、创…

【RP2040】香瓜树莓派RP2040之搭建开发环境(windows)

本文最后修改时间&#xff1a;2022年08月23日 01:57 一、本节简介 本节以树莓派pico开发板为例&#xff0c;搭建windows下的编译环境。 二、实验平台 1、硬件平台 1&#xff09;树莓派pico开发板 ①树莓派pico开发板 ②micro usb数据线 2&#xff09;电脑 2、软件平台 …

绝对值函数的可导性

绝对值函数的可导性 声明&#xff1a;下面截图来自《考研数学常考题型解题方法技巧归纳》

无涯教程-Perl - syswrite函数

描述 此函数尝试将SCALAR中的LENGTH个字节写入与FILEHANDLE相关的文件。如果指定了OFFSET,则从提供的SCALAR中的OFFSET字节中读取信息。该函数使用C /操作系统的write()函数,该函数绕过普通缓冲。 语法 以下是此函数的简单语法- syswrite FILEHANDLE, SCALAR, LENGTH, OFFS…

[oneAPI] 手写数字识别-GAN

[oneAPI] 手写数字识别-GAN 手写数字识别参数与包加载数据模型训练过程结果 oneAPI 比赛&#xff1a;https://marketing.csdn.net/p/f3e44fbfe46c465f4d9d6c23e38e0517 Intel DevCloud for oneAPI&#xff1a;https://devcloud.intel.com/oneapi/get_started/aiAnalyticsToolki…

高德地图1.4.15楼层处理

前因&#xff1a; 接入了高德1.4.15JS API的项目中使用了mapStyle: ‘amap://styles/grey’,在这个模式下楼层几近透明&#xff0c;方案一是升级到2.0然后加wallColor &#xff08;表示建筑物墙面的颜色&#xff09;和roofColor &#xff08;表示建筑物屋顶的颜色&#xff09;…