四重常见的排序方法
2017-12-13 本文已影响0人
郭子web
- 冒泡排序
var ary=[9,4,2,8,8,8,8,8,7,6,11,0];
function bubbleSort(arr) {
for(var i=0;i<arr.length-1;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[j]<arr[i]){
var temp;
temp=arr[j];
arr[j]=arr[i];
arr[i]=temp;
}
}
}
return arr;
}
console.log(bubbleSort(ary));
- 快速排序
var ary=[9,4,2,8,8,8,8,8,7,6,11,0];
function quickSort(arr) {
if(arr.length<=1){
return arr;
}
var n=parseInt(arr.length/2);
var center=arr.splice(n,1);
var left=[];
var right=[];
for (var i=0;i<arr.length;i++){
arr[i]<center?left.push(arr[i]):right.push(arr[i]);
}
return quickSort(left).concat(center,quickSort(right));
}
console.log(quickSort(ary));
- 插入排序
var ary=[9,4,2,8,8,8,8,8,7,6,11,0];
function sort(arr) {
var consult=arr.splice(0,1);
for(var i=0;i<arr.length;i++){
for(var j=consult.length-1;j>=0;j--){
if(arr[i]>consult[j]){
consult.splice(j+1,0,arr[i]);
break;
}else{
if(j==0){
consult.unshift(arr[i]);
}
}
}
}
return consult;
}
console.log(sort(ary));
- 表格排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格排序</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 700px;
text-align: center;
margin: 100px auto;
border-radius: 10px;
padding: 10px;
box-shadow: 0 0 10px darkgreen;
font-size: 20px;
}
table caption {
line-height: 50px;
font-size: 30px;
font-weight: 700;
}
table thead {
height: 40px;
line-height: 40px;
background: darkgreen;
color: #ffffff;
}
table thead tr {
-webkit-user-select: none;
}
table thead tr th.cursor {
cursor: pointer;
}
table tbody tr {
height: 40px;
line-height: 40px;
}
table tbody tr.bg0 {
background: lightcyan;
}
table tbody tr.bg1 {
background: lightpink;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" id="tab">
<caption>表格排序</caption>
<thead>
<tr>
<th class="cursor">name</th>
<th class="cursor">age</th>
<th class="cursor">level</th>
<th>sex</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="../utils.js"></script>
<!--<script src="js/tab1.js"></script>-->
</body>
</html>
<script>
var oTab=document.getElementById("tab");
var tHead=oTab.tHead;
var tBody=oTab.tBodies[0];
var aRows=tBody.rows;
var aCells=tHead.rows[0].cells;
var data;
var xhr=new XMLHttpRequest();
xhr.open('GET','data.txt');
xhr.onreadystatechange=function () {
if(xhr.readyState===4&&/^2\d{2}$/.test(xhr.status)){
data=utils.jsonParse(xhr.responseText);
bindData();
}
};
xhr.send();
function bindData() {
var frg=document.createDocumentFragment();
for(var i=0;i<data.length;i++){
var oTr=document.createElement("tr");
for(var attr in data[i]){
var oTd=document.createElement("td");
oTd.innerHTML=data[i][attr];
if(attr=="sex"){
oTd.innerHTML=data[i][attr]==0?'男':'女'
}
oTr.appendChild(oTd);
}
frg.appendChild(oTr)
}
tBody.appendChild(frg);
changeColor();
frg=null;
}
function changeColor() {
for (var i=0;i<aRows.length;i++){
aRows[i].className='bg'+i%2;
}
}
for(var i=0;i<aCells.length;i++){
aCells[i].index=i;
aCells[i].flag=-1;
aCells[i].onclick=function () {
if(this.className=="cursor"){
sort(this.index);
}
}
}
function sort(index) {
for(var i=0;i<aCells.length;i++){
aCells[i].flag=i==index?aCells[i].flag*-1:-1;
}
var ary=utils.makeArray(aRows);
ary.sort(function (a, b) {
a=a.cells[index].innerHTML;
b=b.cells[index].innerHTML;
if (isNaN(a) || isNaN(b)){
return a.localeCompare(b)*aCells[index].flag;
}
return (a-b)*aCells[index].flag;
});
for (var i=0;i<ary.length;i++){
tBody.appendChild(ary[i]);
}
changeColor();
}
</script>
/*json数据*/
[{"name":"郭靖","age":18,"level":98,"sex":0},{"name":"黄蓉","age":16,"level":88,"sex":1},{"name":"杨康","age":17,"level":78,"sex":0},{"name":"梅超风","age":40,"level":90,"sex":1},{"name":"洪七公","age":60,"level":100,"sex":0},{"name":"穆念慈","age":20,"level":50,"sex":1}]
