整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端排序算法,冒泡排序、插入排序、快速排序、选择排序

前端排序算法,冒泡排序、插入排序、快速排序、选择排序

.冒泡排序思想:数组当前项和后一项比较,前比后大则交换位置,最大的数放后面。
以下代码实现

function bubbleSort(arr){
				let temp=null;
				var len=arr.length;
				for(let i=0; i<len-1; i++){
					for(let j=0; j<len-1-i; j++){
						if(arr[j]>arr[j+1]){
							temp=arr[j];
							arr[j]=arr[j+1];
							arr[j+1]=temp;
						}
					}
				}
				return arr;
			}
			var newArr=bubbleSort([5,6,4,9,1,3,4,10,44,33,66]);
			console.log(newArr);

控制台输出:

2.插入排序:抽扑克牌,和手里的扑克牌依次比较

function insertSort(arr){
				let handle=[];
				handle.push(arr[0]);
				let len=arr.length;
				for(let i=1; i<len; i++){
					let A=arr[i];
					for(let j=handle.length-1; j>=0; j--){
						let B=handle[j];
						if(A>B){
							handle.splice(j+1,0,A);
							break;
						}
						if(j===0){
							handle.unshift(A)
						}
					}
				}
				return handle;
			}
			var newArr=insertSort([5,6,4,9,1,3,4,10,33,55,66]);
			console.log(newArr);

控制台输出:

3.快速排序:找到中间项,把它从原来数组中移除

function quickSort(arr){
				if(arr.length<=1){
					return arr;
				}
				let middleIndex=Math.floor(arr.length/2);
				let middleValue=arr.splice(middleIndex,1)[0];
				let arrLeft=[];
				let	arrRight=[];
				for(let i=0; i<arr.length; i++){
					let item=arr[i];
					item < middleValue ? arrLeft.push(item) : arrRight.push(item);
				}
				var newArr=quickSort(arrLeft).concat(middleValue, quickSort(arrRight));
				return newArr;
			}
			var newArr=quickSort([5,6,4,9,1,3,4,10,55,33,66,77]);
			console.log(newArr);

控制台打印:

TML ul li 横排居中排列的方法,三步骤及实例

ul li 横排居中排列的方法

无序列表的列表项默认情况下是竖着排的,因为li元素是块级元素,会自动分行。那如果要将列表的列表项进行横排,比用无序列表ul元素定义一个导航条。那该怎么办呢?这当中有三个应当被解决的东西,一个是横排本身,另一个就是应当把无序列表项的圆点去掉,第三则是让ul定义的列表居中显示,包括水平居中和垂直居中。方法如下:

HTML ul li 横排居中排列的方法,三步骤及实例

ul li横排的方法

将ul无序列表元素中的列表项li元素的display属性设置成inline或inline-block,个人比较常用的是后者:

ul li{display:inline-block;}

ul水平居中和垂直居中的方法

水平居中方法:只要将ul元素包含于一个div元素,并将div元素的text-align属性设置为center即可将ul水平居中。除此之外,因为ul的列表默认情况下是有左内边距的,所以,为了能够让列表能够更好地水平居中,需要将ul的左内边距padding-left设置为0,具体可见下方的综合实例。

垂直居中方法:为包含ul元素的div元素设置宽度width和高度height(实际上导航条一般也需要有宽度和高度的设置),然后将ul的line-height属性设置为父元素的高度height即可。

去掉圆点的方法

将ul元素的list-style属性设置为none即可。

HTML ul li 横排居中排列的方法,三步骤及实例

ul li 横排居中排列综合实例代码,及在线编辑器

<div class='e1'>
  <ul class='e2'>
    <li>HTML</li>
    <li>python</li>
    <li>golang</li>
  </ul>
</div>

<style>
  .e1{width:100%;height:50px;border:1px solid skyblue;text-align:center;}
  .e2{list-style:none;padding-left:0%;}
  .e2 li{line-height:50px;display:inline-block;}
</style>

HTML+CSS+JS实例在线编辑器:

HTML ul li 横排居中排列的方法,综合实例在线 - HTML教程

实例代码解析

如上代码,一定要将ul的左内边距padding-left设置为0,否则ul列表的“水平居中”将偏向右边,大家可以将.e2中的padding-left删除掉,然后再在线运行看一看效果。

python全栈:

笨鸟工具-璞玉天成,大器晚成

速排序和冒泡排序:

快速排序和冒泡排序是常见的排序算法在java、JavaScript等多种语言中都有的两种排序算法

1. 冒泡排序(bubble sort):

var arr=[3,4,1,2,6,7,9,0,5,8];

// arr=[9,8,7,6,5,4,3,2,1,0];

console.log('排序前:'+arr);

// 排列次数的最大应该为数组的长度-1

for(var j=0; j<arr.length-1; j++){

//获取到数组中的每一个元素

for(var i=0; i<arr.length-1; i++){

//比较当前元素和后一个元素的大小

//当前元素 arr[i] 后一个元素arr[i+1]

// console.log(arr[i], arr[i+1]);

if(arr[i] > arr[i+1]){

// 前边的元素大于后边的元素,交换两个元素的位置

var temp=arr[i];

arr[i]=arr[i+1];

arr[i+1]=temp;

}

}

console.log('排序后:'+arr);

}

2. 快速排序(quick sort):

var arr=[3,4,1,2,6,7,9,0,5,8];

//创建一个快速排序的函数

// 对array进行排序,返回一个排好序的新数组

function quickSort(array) {

//设置基线条件

if(array.length <=1){

return array;

}

// 获取一个基准值,获取数组的最后一个元素作为基准值

var base=array[array.length-1];

//创建两个数组

var left=[]; //左数组,存储小于base的元素

var right=[]; //右数组,存储大于base的元素

//比较每个元素和base的大小

for(var i=0; i<array.length - 1; i++){

// 比较当前值和基准值的大小

if(array[i] < base){

//放入到左数组

left.push(array[i]);

}else{

//放入到右数组

right.push(array[i]);

}

}

//left base right

// 将left base right 拼接为一个数组返回

return quickSort(left).concat(base, quickSort(right));

}吧

var result=quickSort(arr);

console.log(arr+'');//原数组

console.log(result+''); //(排序后)新数组

3归并排序(Merge Sort):

function mergeSort(arr) {
  // 基线条件:当数组长度小于等于 1 时,直接返回该数组
  if (arr.length <=1) {
    return arr
  }

  const mid=Math.floor(arr.length / 2) // 计算数组的中间位置
  const left=arr.slice(0, mid) // 将数组分为左右两部分
  const right=arr.slice(mid)

  // 递归地对左右两部分进行归并排序,并将结果合并
  return merge(mergeSort(left), mergeSort(right))
}

function merge(left, right) {
  const result=[]
  let i=0
  let j=0 

  // 比较左右两个子数组的元素,并按顺序加入结果数组
  while (i < left.length && j < right.length) {
    if (left[i] <=right[j]) {
      result.push(left[i])
      i++
    } else {
      result.push(right[j])
      j++ 
    }
  }

  // 处理剩余元素(如果有)
  while (i < left.length) {
    result.push(left[i])
    i++
  }
  while (j < right.length) {
    result.push(right[j])
    j++ 
  }

  return result
}

const nums=[3,4,1,2,6,7,9,0,5,8]
console.log(mergeSort(nums))  // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]


欢迎关注我的原创文章:小伙伴们!我是一名热衷于前端开发的作者,致力于分享我的知识和经验,帮助其他学习前端的小伙伴们。在我的文章中,你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师,还是仅仅对前端开发感兴趣,我的文章将能为你提供宝贵的指导和知识。

在我的文章中,你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

此外,我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展,新的框架和工具层出不穷。通过我的文章,你将会了解到最新的前端技术趋势,并了解如何应对这些变化。

我深知学习前端不易,因此我将尽力以简洁明了的方式解释复杂的概念,并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发,并提升你的技能。

如果你想了解更多关于前端开发的内容,不妨关注我的原创文章。我会不定期更新,为你带来最新的前端技术和知识。感谢你的关注和支持,我们一起探讨交流技术共同进步,期待与你一同探索前端开发的奇妙世界!

#文章首发挑战赛#