javascript实现的各种排序性能比较

最新推荐文章于 2024-11-02 12:42:04 发布
最新推荐文章于 2024-11-02 12:42:04 发布
阅读量199 收藏
点赞数
分类专栏： javascript 文章标签： javascript ui 数据结构与算法 ViewUI 
<!DOCTYPE html>
<html sort-visualize-app>
	<head>
		<meta charset="UTF-8" />
		<title>javascript各种排序算法</title>
		<meta name="Description" content="jsdo.it - share JavaScript, HTML5 and CSS -" />
		<meta name="Keywords"  content="JavaScript,HTML5,CSS" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />
		<style type="text/css">
			body {
				background: #333;
				overflow: hidden;
			}
			.ui > div {
				display: inline-block;
				margin-bottom: 5px;
			}
			.ui input[type=radio] {
				display: none;
			}
			.ui .button-set {
				font-size: 0px;
				margin: 5px 5px;
			}
			.ui .button {
				display: inline-block;
				background: #ddd;
				padding: 6px 4px;
				border-right: 1px solid #bbb;
				font-size: 10px;
				font-family: monospace;
			}
			.ui .button:hover {
				background: #ccc;
			}
			.ui label:first-child .button {
				border-radius: 5px 0px 0px 5px;
			}
			.ui label:last-child .button {
				border-radius: 0px 5px 5px 0px;
				border-right-width: 0px;
			}
			.ui label:only-child .button {
				border-radius: 5px;
			}
			.ui input:checked + .button {
				background: #666;
				color: #fff;
			}
			.ui input[type=range] {
				position: relative;
				top: 7px;
			}
		</style>
		<meta charset="UTF-8">
		<title>Sort Visualize</title>
		<link rel="stylesheet" href="/norahiko/oxly/css" type="text/css" charset="utf-8">

	</head>
	<body>

		<div class="ui">
			<div data-bind="foreach: algorithmList" class="button-set">
				<label>
					<input type="radio" data-bind="checkedValue: $data, checked: $root.algorithm">
					<span data-bind="text: $data" class="button"></span> </label>
			</div>

			<div>
				<input type="range" data-bind="
				value: speed,
				attr: { min: speedMin, max: speedMax }">
			</div>

			<div data-bind="foreach: sizeList" class="button-set">
				<label>
					<input type="radio" data-bind="checkedValue: $data, checked: $root.size">
					<span data-bind="text: $data" class="button"></span> </label>
			</div>

			<div class="button-set">
				<label> <span data-bind="click: restart" class="button">Restart</span> </label>
			</div>
		</div>

		<div class="graph">
			<canvas id="graph-canvas" width="450" height="380"></canvas>
		</div>

		<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="/norahiko/oxly/js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// https://github.com/norahiko/sort-visualize

			var helper = {
				range : function(min, max) {
					var res = [];
					for (var i = min; i < max; i++) {
						res.push(i);
					}
					return res;
				},

				shuffle : function(ary) {
					for (var i = ary.length - 1; 0 <= i; i--) {
						var rnd = Math.random() * (i + 1) | 0;
						helper.swap(ary, i, rnd);
					}
				},

				swap : function(ary, a, b) {
					if (a < 0 || b < 0 || ary.length <= a || ary.length <= b) {
						throw new Error('IndexError ' + a + " - " + b);
					}
					var temp = ary[a];
					ary[a] = ary[b];
					ary[b] = temp;
				},

				insert : function(ary, from, to) {
					while (from != to) {
						if (from < to) {
							helper.swap(ary, from, from + 1);
							from += 1;
						} else {
							helper.swap(ary, from, from - 1);
							from -= 1;
						}
					}
				},

				median3 : function(a, b, c) {
					if (b <= a)
						if (a <= c)
							return a;
						else if (c <= b)
							return b;
						else
							return c;
					else if (c <= a)
						return a;
					else if (c <= b)
						return c;
					else
						return b;
				},

				getCanvas : function(id) {
					var canvas = document.getElementById(id);
					if (canvas === null || canvas.nodeName.toLowerCase() !== 'canvas') {
						return document.createElement('canvas');
					}
					return canvas;
				}
			};

			var graph = {};

			(function() {
				var canvas;
				var ctx;
				var width;
				var height;

				var bgColor = '#333';
				var barColor = '#6cf';
				var highlightColor = '#cf6';

				graph.init = function(c) {
					canvas = c;
					ctx = canvas.getContext('2d');
					width = canvas.offsetWidth;
					height = canvas.offsetHeight;
				};

				graph.draw = function(highlightIndexes, values) {
					ctx.fillStyle = bgColor;
					ctx.fillRect(0, 0, width, height);
					var idx1 = highlightIndexes[0];
					var idx2 = highlightIndexes[1];

					var size = values.length;
					var barWidth = (width - size + 1) / size;
					var barHeightUnit = height / size;

					var x = 0;
					var h = 0;
					ctx.fillStyle = barColor;
					for (var i = 0; i < values.length; i++) {
						h = values[i] * barHeightUnit;
						if (i === idx1 || i === idx2) {
							ctx.fillStyle = highlightColor;
							ctx.fillRect(x, height - h, barWidth, h);
							ctx.fillStyle = barColor;
						} else {
							ctx.fillRect(x, height - h, barWidth, h);
						}
						x = x + barWidth + 1;
					}
				};
			})();

			function SortStep(type, indexes) {
				// type = 'swap' | 'highlight' | 'insert'
				this.type = type;
				this.indexes = indexes;
			}


			SortStep.SWAP = 'swap';
			SortStep.HIGHLIGHT = 'highlight';
			SortStep.INSERT = 'insert';

			SortStep.prototype.run = function(ary) {
				if (this.type === SortStep.SWAP) {
					helper.swap(ary, this.indexes[0], this.indexes[1]);
				} else if (this.type === SortStep.INSERT) {
					helper.insert(ary, this.indexes[0], this.indexes[1]);
					this.indexes[0] = -1;
				}
			};

			function SortAlgorithm(values) {
				this.values = values;
				this.size = values.length;
				this.steps = [];
				this.finished = false;
			}


			SortAlgorithm.prototype.sort = function(algorithm) {
				this[algorithm]();
				this.steps.reverse();
				if (algorithm !== 'bogo') {
					this.finished = true;
				}
			};

			SortAlgorithm.prototype.addStep = function(type, indexes) {
				this.steps.push(new SortStep(type, indexes));
			};

			SortAlgorithm.prototype.swap = function(a, b) {
				helper.swap(this.values, a, b);
				this.addStep(SortStep.SWAP, [a, b]);
			};

			SortAlgorithm.prototype.highlight = function(a, b) {
				this.addStep(SortStep.HIGHLIGHT, [a, b]);
			};

			SortAlgorithm.prototype.insert = function(from, to) {
				helper.insert(this.values, from, to);
				this.addStep(SortStep.INSERT, [from, to]);
			};

			SortAlgorithm.prototype.bubble = function bubbleSort() {
				for (var i = this.size - 1; 0 < i; i--) {
					for (var k = 0; k < i; k++) {
						if (this.values[k] > this.values[k + 1]) {
							this.swap(k, k + 1);
						} else {
							this.highlight(k, k + 1);
						}
					}
				}
			};

			SortAlgorithm.prototype.selection = function selectionSort() {
				for (var i = 0; i < this.size - 1; i++) {
					var min = i;
					for (var k = i + 1; k < this.size; k++) {
						this.highlight(min, k);
						if (this.values[k] < this.values[min]) {
							min = k;
						}
					}
					this.swap(i, min);
				}
			};

			SortAlgorithm.prototype.shaker = function shakerSort() {
				var left = 0;
				var right = this.size - 1;
				var incr = 1;
				var i = 0;
				var next;
				var lastSwapped = 0;

				var count = 0;
				while (left < right) {
					next = i + incr;
					if ((incr === 1 && this.values[i] > this.values[next]) || (incr === -1 && this.values[next] > this.values[i])) {
						this.swap(i, next);
						lastSwapped = i;
					} else {
						this.highlight(i, next);
					}

					if (next === right) {
						i = right = lastSwapped;
						incr = -incr;
					} else if (next === left) {
						i = left = lastSwapped;
						incr = -incr;
					} else {
						i = next;
					}
				}
			};

			SortAlgorithm.prototype.insertion = function insertionSort() {
				for (var i = 1; i < this.size; i++) {
					for (var k = i; 0 < k; k--) {
						if (this.values[k - 1] > this.values[k]) {
							this.swap(k - 1, k);
						} else {
							this.highlight(k - 1, k);
							break;
						}
					}
				}
			};

			SortAlgorithm.prototype.shell = function shellSort() {
				var gap = 1;
				while (gap < this.size) {
					gap = gap * 3 + 1;
				}

				while (1 < gap) {
					gap = gap / 3 | 0;
					for (var i = gap; i < this.size; i++) {
						for (var k = i; 0 < k; k -= gap) {
							if (this.values[k - gap] > this.values[k]) {
								this.swap(k - gap, k);
							} else {
								this.highlight(k - gap, k);
								break;
							}
						}
					}
				}
			};

			SortAlgorithm.prototype.merge = function mergeSort() {
				this.mergeSortImpl(0, this.size - 1);
			};

			SortAlgorithm.prototype.mergeSortImpl = function(left, right) {
				if (right <= left) {
					return;
				}
				var middle = (left + right) / 2 | 0;
				this.mergeSortImpl(left, middle);
				this.mergeSortImpl(middle + 1, right);

				var l = left;
				var m = middle + 1;
				while (l < m && m <= right) {
					this.highlight(l, m);
					if (this.values[l] >= this.values[m]) {
						this.insert(m, l);
						m++;
					}
					l++;
				}
			};

			SortAlgorithm.prototype.quick = function quickSort() {
				this.quickSortImpl(0, this.size - 1);
			};

			SortAlgorithm.prototype.quickSortImpl = function(left, right) {
				var values = this.values;
				var middle = (left + right) / 2 | 0;
				var pivot = helper.median3(values[left], values[middle], values[right]);
				var l = left;
				var r = right;
				while (true) {
					while (values[l] < pivot) {
						this.highlight(l, r);
						l++;
					}
					while (pivot < values[r]) {
						this.highlight(l, r);
						r--;
					}
					if (r <= l) {
						break;
					}
					this.swap(l, r);
					l++;
					r--;
				}

				if (left < l - 1) {
					this.quickSortImpl(left, l - 1);
				}
				if (r + 1 < right) {
					this.quickSortImpl(r + 1, right);
				}
			};

			SortAlgorithm.prototype.heap = function heapSort() {
				for (var i = 0; i < this.size; i++) {
					this.swapUp(i);
				}

				for ( i = this.size - 1; 0 < i; i--) {
					if (this.values[0] > this.values[i]) {
						this.swap(0, i);
					} else {
						this.highlight(0, i);
					}
					this.swapDown(0, i);
				}
			};

			SortAlgorithm.prototype.swapUp = function(cur) {
				var parent;
				while (cur !== 0) {
					parent = (cur - 1) / 2 | 0;
					if (this.values[parent] >= this.values[cur]) {
						this.highlight(parent, cur);
						break;
					}
					this.swap(parent, cur);
					cur = parent;
				}
			};

			SortAlgorithm.prototype.swapDown = function(cur, length) {
				var values = this.values;
				var child;
				while (true) {
					child = cur * 2 + 1;
					if (values[child] < values[child + 1]) {
						child += 1;
					}
					if (values[cur] >= values[child]) {
						this.highlight(cur, child);
						break;
					}
					if (length <= child) {
						break;
					}
					this.swap(cur, child);
					cur = child;
				}
			};

			SortAlgorithm.prototype.bogo = function bogoSort() {
				for (var i = 0; i < this.size; i++) {
					var rnd = (Math.random() * (this.size - i) | 0) + i;
					this.swap(i, rnd);
				}

				for ( i = 0; i < this.size - 1; i++) {
					this.highlight(i, i + 1);
					if (this.values[i] > this.values[i + 1]) {
						return;
					}
				}
				this.finished = true;
			};

			function ViewModel() {
				this.algorithm = ko.observable('Bubble');
				this.size = ko.observable(50);
				this.speed = ko.observable(9);

				this.sort = null;
				this.nums = [];
				this.algorithmList = ['Bubble', 'Selection', 'Shaker', 'Insertion', 'Shell', 'Merge', 'Heap', 'Quick', 'Bogo'];
				this.sizeList = [5, 10, 50, 100, 150];
				this.speedMin = 1;
				// 2 seconds
				this.speedMax = 22;
				// 4 milliseconds
				this.intervalId = -1;

				graph.init(helper.getCanvas('graph-canvas'));

				this.changed = ko.computed({
					read : function() {
						this.start(this.algorithm(), this.size());
					},
					owner : this,
					deferEvaluation : true,
				});
			}


			ViewModel.prototype.start = function(algorithm, size) {
				var vm = this;
				this.nums = helper.range(1, size + 1);
				helper.shuffle(this.nums);
				this.sort = new SortAlgorithm(this.nums.slice());

				clearInterval(this.intervalId);
				this.intervalId = setTimeout(animationFrame, 0);

				function animationFrame() {
					if (vm.sort.steps.length === 0) {
						if (vm.sort.finished) {
							graph.draw([-1, -1], vm.nums);
							return;
						} else {
							vm.sort.sort(algorithm.toLowerCase());
							console.log(vm.sort.steps.length);
						}
					}

					var step = vm.sort.steps.pop();
					step.run(vm.nums);
					graph.draw(step.indexes, vm.nums);
					vm.intervalId = setTimeout(animationFrame, vm.getIntervalTime());
				}

			};

			ViewModel.prototype.restart = function() {
				this.start(this.algorithm.peek(), this.size.peek());
			};

			ViewModel.prototype.getIntervalTime = function() {
				var speed = parseInt(this.speed.peek(), 10);
				return 2000 / speed / speed | 0;
			};

			if (document.documentElement.hasAttribute('sort-visualize-app')) {
				document.addEventListener('DOMContentLoaded', main);
			}

			function main() {
				var vm = window.vm = new ViewModel();
				ko.applyBindings(vm);
				vm.changed();
			}
		</script>
	</body>
</html>

 

 

sfSam
关注
专栏目录
Java和JavaScript运算性能对比
大菜鸟的博客
08-31 2万+
Java和JavaScript运算性能对比以下仅展示两段运算代码的运行时间。Jdk版本为1.7.0_07（64位），JavaScript运行环境为Google Chrome60.0.3112.113（64位）。超大规模运算（万亿级）Java代码public static void calc1(){ float value=0; long start = System.
比sort()性能更好的原生js代码实现数组从小到大排序
weixin_30408165的博客
09-29 384
nums = [1,2,4,1,34,6,-1,2] for(let i = nums.length - 1; i > 0; i--) { let maxIdx = i; for(let j = 0; j < i; j++) { if(nums[maxIdx] < nums[j]) maxIdx ...
基础组件学习-button
m0_62236091的博客
05-07 1076
属性 名称 类型 默认值 必填 描述 type string - 否 不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下： capsule：胶囊型按钮，带圆角按钮，有背景色和文本； ci
JavaScript、Java、C#关于for循环的比较
练涛
03-20 855
如下代码：//JavaScript<script> window.onload=function(){ var a=new Array('1','2','3','4','5'); var i=0; for(i in a){ //这里不能写document.write(i); document.write(a[i]+" ");
JavaScript各种排序算法的实现及其速度性能分析
小易的博客
09-20 3283
今天我们来讨论的问题有两个：如何用JavaScript实现选择排序、冒泡排序、插入排序、快速排序、归并排序、堆排序；对生成的10万个随机数进行排序，各个排序算法的性能分析。创建数据类型这里我们全部用数组来存储数据，首先创建一个类ArrayList。其中属性的说明如下：array空数组---&gt;用以存放数据insert()方法---&gt;往array中插入数据swapItemInArray(n...
JavaScript实现冒泡排序
热门推荐
FEWY的博客
03-18 3万+
说明 对数组进行 冒泡排序 算是比较简单的，冒泡排序也是容易理解的一种排序算法了，在面试的时候，很可能就会问到。 实现原理 比较每相邻两个数，如果前者大于后者，就把两个数交换位置；这样一来，第一轮就可以选出一个最大的数放在最后面；那么经过 n-1（数组的 length - 1） 轮，就完成了所有数的排序。 好的，我们先来实现找数组中的最大数，并把他放到数组最后。 va...
JavaScript实现归并排序算法详解
07-06 1310
归并排序（Merge Sort）算法，也叫合并排序，是创建在归并操作上的一种有效的排序算法。算法是采用分治法（Divide and Conquer）的一个非常典型的应用，且各层分治递归可以同时进行。归并排序思路简单，速度仅次于快速排序，为稳定排序算法，一般用于对总体无序，但是各子项相对有序的数列。归并排序和选择排序一样，归并排序的性能不受输入数据的影响，但表现比选择排序好的多，因为始终都是O(n log n）的时间复杂度。代价是需要额外的内存空间。
JavaScript实现归并排序算法并详解
yangxinxiang84的专栏
08-30 927
归并排序是非常经典的基础排序之一，使用分治的思想，分而治之。 先将待排序数组分拆为更小的数组，一直拆分到只有一个元素（只有一个元素的数组就是有序的），然后对分拆的数组按顺序进行合并。这个思想就是分而治之的思想，变成实现的时候，常用递归编程技巧来实现。 直接上图来说这个过程（图是拷贝网上的）： 这里重点详细讲一下合并过程，合并被分解好的左右两部分的时候，左右两部分分别已经排好了，因此可以按如下图策略合并：比如需要合并left [1,5,6]的数组和right [2,3,4]数组的过程图： ..
八大排序Javascript（原理+实现）
Darlingmi的博客
12-26 1049
文章目录插入排序直接插入排序(稳定)思路实现希尔排序(不稳定)思路实现选择排序简单选择排序（不稳定）思路实现堆排序（不稳定）思路实现交换排序冒泡排序（稳定）思路实现快速排序（不稳定）思路实现归并排序思路实现基数排序（稳定）思路实现 插入排序 直接插入排序(稳定) 思路 将数组第一个元素看作已经排序好的，按顺序遍历后面的元素，每遍历到一个，将它与已排序好的数组元素比较，插入到正确位置。 实现 function insertSort(arr){ for(let i=1;i<arr.length;i
JavaScript实现各种排序的代码详解
10-19
通过双层循环比较数组中的元素，并在需要的情况下交换它们的位置，从而实现排序。最后，排序完成的数组被返回。 选择排序在JavaScript中的实现则稍微复杂一些，因为它需要两层循环来完成。外层循环用于确定未排序...
JavaScript实现表格排序方法
10-27
总结以上知识点，我们可以看到使用JavaScript实现表格排序不仅涉及到算法的实现，还需要考虑与用户交互、性能优化、兼容性处理以及代码组织等多个方面。一个高效的、用户友好的排序功能能够显著提升网站或应用的用户...
使用JavaScript实现的排序二叉树.zip
04-26
本教程将深入探讨如何使用JavaScript来实现排序二叉树。 一、基础知识 在开始之前，我们需要了解二叉树的基本概念。二叉树是由节点组成的，每个节点最多有两个子节点，分别称为左子节点和右子节点。二叉树的遍历...
基于JavaScript实现的希尔排序算法分析
10-20
JavaScript实现的希尔排序算法示例代码中，首先定义了一个间隔序列数组`gaps`。在实际的排序过程中，按照间隔序列中的值作为步长，逐个对数组元素进行分组排序。初始时，步长较大，元素之间比较的间隔远，减少每一轮...
JavaScript实现快速排序的方法
10-23
这一步骤是快速排序性能的关键，不同的选择方式会影响排序效率。 接着，创建两个空数组：`less`用于存储小于基准的元素，`greater`用于存储大于基准的元素。遍历输入数组，根据每个元素与基准的大小关系，将它们...
【JavaScript 算法】快速排序：高效的排序算法
Allen-
07-12 1557
快速排序（Quick Sort）是一种高效的排序算法，通过分治法将数组分为较小的子数组，递归地排序子数组。快速排序通常比其他 O(n log n) 算法表现更好，因为它的内部循环可以在大多数架构上被有效地实现。本文将详细介绍快速排序算法的原理、实现及其应用。
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1128
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
最新发布
qq_30049249的博客
11-02 119
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
基于vue框架的的汇生活家居商城的设计与实现bdjlq（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
10-29 1367
项目功能：商品分类,商品信息,用户。
JavaScript常见比较排序算法实现
资源摘要信息:"本文将详细介绍在JavaScript中常见的比较排序算法。比较排序是一种基于比较操作来决定元素顺序的排序方法。...在实际应用中，开发者需要根据具体情况选择合适的排序算法来实现排序需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值