简单解析JavaScript中数组的冒泡排序和选择排序

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 简单解析JavaScript中数组的冒泡排序和选择排序上篇博客我们讲解了数组的sort()方法,这篇博客我们来讲一下数组的另外两种排序方法:冒泡排序和选择排序。其中冒泡排序在前端面试中笔试部分经常会被问到。1.冒泡排序冒泡排序:简单解释,就是相邻两元素之间两两比较,比较出大值进行赋值互换,再依次与相邻的元素比较,层层递进互换元素位置,相互赋值,最后得出排序的结果。在这里插入图片描述 var arr = [100, 20, 9, 3, 22, 111, 28, 55]; // js数组的冒泡排序 // var arr=[1,2,3,4] // 第一层

简单解析JavaScript中数组的冒泡排序和选择排序




上篇博客我们讲解了数组的sort()方法,这篇博客我们来讲一下数组的另外两种排序方法:冒泡排序和选择排序。其中冒泡排序在前端面试中笔试部分经常会被问到。


1.冒泡排序


冒泡排序:简单解释,就是相邻两元素之间两两比较,比较出大值进行赋值互换,再依次与相邻的元素比较,层层递进互换元素位置,相互赋值,最后得出排序的结果。


图片.png

在这里插入图片描述

vararr= [100, 20, 9, 3, 22, 111, 28, 55];
// js数组的冒泡排序// var arr=[1,2,3,4]// 第一层for循环  遍历数组项for (vari=0; i<arr.length; i++) {
// console.log(arr[i]);// 第二层for循环 进行数组项的相互比较for (varj=0; j<arr.length-i-1; j++) {
if (arr[j] >arr[j+1]) {
vark;
k=arr[j];
arr[j] =arr[j+1];
arr[j+1] =k;
            }
        }
console.log(arr);
    }
// 对方法进行封装functionbubble(arr) {
for (vari=0; i<arr.length; i++) {
// console.log(arr[i]);// 第二层for循环 进行数组项的相互比较for (varj=0; j<arr.length-i-1; j++) {
if (arr[j] >arr[j+1]) {
vark;
k=arr[j];
arr[j] =arr[j+1];
arr[j+1] =k;
                }
            }
        }
returnarr;
    }
console.log(bubble(arr));


当然上面的方法是进行升序排列,降序排序只需要简单修改:

functionbubble(arr) {
for (vari=0; i<arr.length; i++) {
// console.log(arr[i]);// 第二层for循环 进行数组项的相互比较for (varj=0; j<arr.length-i-1; j++) {
if (arr[j] <arr[j+1]) {
vark;
k=arr[j];
arr[j] =arr[j+1];
arr[j+1] =k;
                }
            }
        }
returnarr;
    }
console.log(bubble(arr));    

总结:冒泡排序主要是要分清每一层for循环的作用是什么。同时还要知道如何将两个变量的值互换。


vara=10;
varb=20;
varc;
c=a;//10a=b;//20b=c;//10

2.选择排序


选择排序:先定义一个元素的最大值或最小值,然后将每个数组项与最值比较,取大值放到元素最右端,层层比较,互换元素下标位置,再赋值,此方法比冒泡排序的效率高。

vararr= [100, 20, 9, 3, 22, 111, 28, 55];
functionchose(arr) {
for (vari=0; i<arr.length-1; i++) {
// 假设最大值varmaxone=i;
for (varj=i+1; j<arr.length; j++) {
if (arr[j] >arr[maxone]) {
maxone=j;
                }
            }
vartemp=arr[i];
arr[i] =arr[maxone];
arr[maxone] =temp;
        }
returnarr;
    }
console.log(chose(arr));// [111, 100, 55, 28, 22, 20, 9, 3]   


视频讲解链接:
1.https://www.bilibili.com/video/BV1jC4y1p7oW/
2.https://www.bilibili.com/video/BV1az4y1d7Bm/

相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
2月前
|
存储 前端开发 JavaScript
JavaScript垃圾回收机制深度解析
【10月更文挑战第21】JavaScript垃圾回收机制深度解析
124 59
|
1月前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
57 0
|
2月前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
|
1月前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
49 0
|
2月前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
41 0
|
2月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
167 0
|
2月前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
58 0
|
2月前
|
存储 JavaScript 前端开发
Vue.js项目中全面解析定义全局变量的常用方法与技巧
Vue.js项目中全面解析定义全局变量的常用方法与技巧
61 0
|
1月前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
77 2

热门文章

最新文章

推荐镜像

更多