zoukankan      html  css  js  c++  java
  • 一个简单的排序例子理解闭包作为参数

    通过一个简单的排序例子理解Sort带参数的排序规则以及闭包作为参数执行计算。
    下面是一段HTML内容:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    //$each是一个迭代方法,它将遍历collection中的每一个元素,并将其作为参数执行闭包运算
      function $each(collection,closure)
      {
    	var ret = [];//定义数组		
    	for(var i = 0;i<collection.length;i++)
    	{ //将执行闭包运算后的结果加到数组集合中
    	  ret.push(closure(collection[i]));
    	}
    	return ret;
      }
      //对Table进行排序	
      function SortTable(table,id)
      {
    	var rows = $each(table.rows,function(x){return x;});
    	if(id == "Asc")//判断点击了升序
    	{
           //带闭包参数的排序方法,可以控制升序还是降序。
    	  rows.sort(function(a,b){
    	  if(a.childNodes[0].innerText - 0 > b.childNodes[0].innerText - 0)
    	    {
    		  return 1;
    	    }
    	  else
    	    return -1;
    	  });
         }
    	else if(id == "Desc")
    	{
    	  rows.sort(function(a,b){
    	  if(a.childNodes[0].innerText - 0 > b.childNodes[0].innerText - 0)
    	  {
    		return -1;
    	  }
    	  else
    		return 1;
    	  });
    	}
    	//将排序后的rows添加到table中	
    	$each(rows,function(x){
    	  x.parentElement.appendChild(x);
    	  return x;
    	});
    	}
    
    </script>
    </head>
    <body>
    <table id="mytable" style="border: medium solid #000000">
    	<tr>
    		<td>3</td>
    		<td>Hello World</td>
    	</tr>
    	<tr>
    		<td>0</td>
    		<td>Will</td>
    	</tr>
    	<tr>
    		<td>2</td>
    		<td>Pan</td>
    	</tr>
    	<tr>
    		<td>1</td>
    		<td>Tian Tian Xiang Shang</td>
    	</tr>
    	<tr>
    		<td>4</td>
    		<td>Hao Hao Xue xi</td>
    	</tr>
    </table>
    <div>
      <button id="Asc" onclick="SortTable(mytable,'Asc')">Sort By ASC</button>  <button id="Desc" onclick="SortTable(mytable,'Desc')">Sort By Desc</button>
    </div>
    </body>
    </html>
    
     
    其上对应的输出图:

    点击Sort By Asc后显示为:

     点击Sort By Desc后输出为:

  • 相关阅读:
    Linux账户密码安全策略设置 /etc/login.defs:
    GPS网络时间服务器安装注意事项
    ntp时间校准服务器的调试方法
    北斗网络时钟服务器的特点
    sntp时间服务器的介绍
    网络校时服务器
    综合时间码分配器介绍
    子母钟系统介绍
    智能计数器简介
    怎样选择通用计数器?
  • 原文地址:https://www.cnblogs.com/willpan/p/javascript_Sort.html
Copyright © 2011-2022 走看看