数组对象排序

最新推荐文章于 2024-06-23 19:30:36 发布
最新推荐文章于 2024-06-23 19:30:36 发布
阅读量693 收藏 1
点赞数
分类专栏： js 文章标签： 数组排序 排序 数组 升序 降序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jsyxiaoba/article/details/84587021
版权

今天来写个简单的数组排序，先把比较冗余的代码写出来，然后再把简洁的代码写出来。

其实我们在排序时是根据字段里的某些数值来排序（可能我说的不准确，但先就这么理解），所以需要先把那些具有对比性的内容获取出来，然后再进行对比。

这里的例子我用一个表格来做说明，具体的思路可以分为几个步骤：

获取–赋值–排序–添加–调用

1. 获取表格里的tbody，方便往里面添加排好序的tr
2. 获取行trs，此时trs还不是数组（是类数组对象），所以要使用循环将每一行的值赋值给新的数组
   arr[i] = trs[i]
 3. 紧接着就可以对新的数组进行排序的操作 arr.sort(function(t1, t2){})
 4. 在排序操作里面需要两个参数，个人认为：这两个参数可以代表新数组里需要比较的项
 5. 获取项里面需要做比较的内容（可对内容进行处理以获得精准内容），比如：
  var n1 = t1.cells[2].innerHTML.substring(2).replace(".", "");
  var n2 = t2.cells[2].innerHTML.substring(2).replace(".", "");
 6. 再接着就是：
  升序：return n1 - n2;
  降序：return n2 - n1;
 7. 循环排好序的数组，将每一项添加到tbody里面即可
     addToTbody()；
 8. 调用方法  		
        btn4.click(function(){
     			s_tab();// 排序方法
     			addToTbody(); //添加到tbody
         })

上代码（html代码）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>数组对象排序</title>
	<style>
		.sx, .jx{background-color:#5FAFF7;outline: none;cursor: pointer;border:none;}
		.backgroundColorEA5F5D{background-color:#EA5F5D;}
		.backgroundColor5FAFF7{background-color:#5FAFF7;}
		.btn_box{margin-top:30px;}
	</style>
</head>
<body>
	<table id="tab1">
		<thead>
			<tr>
				<th>发货物流</th>
				<th>运输时效</th>
				<th>预估运费</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>ePacket-燕文揽收</td>
				<td>7-20个工作日</td>
				<td>￥ 85.93</td>
			</tr>
			<tr>
				<td>TNT Global express（TNT全球）</td>
				<td>2-6个工作日</td>
				<td>￥ 200.06</td>
			</tr>
			<tr>
				<td>ePacket-莆田揽收</td>
				<td>7-20个工作日</td>
				<td>￥ 84.33</td>
			</tr>
			<tr>
				<td>SF eParcel（顺丰国际）</td>
				<td>7-12个工作日</td>
				<td>￥ 85.93</td>
			</tr>
			<tr>
				<td>DHL-HK（香港DHL）</td>
				<td>3-8个工作日</td>
				<td>￥ 120.35</td>
			</tr>
			<tr>
				<td>TNT Global express（TNT全球）</td>
				<td>5-6个工作日</td>
				<td>￥ 162.35</td>
			</tr>
			<tr>
				<td>FEDEX_IP（FedEx优先型）</td>
				<td>3-8个工作日</td>
				<td>￥ 374.06</td>
			</tr>
			<tr>
				<td>TNT Global express（TNT全球）</td>
				<td>3-8个工作日</td>
				<td>￥ 50.06</td>
			</tr>
		</tbody>
	</table>
	<div class="btn_box">
	<button class="sx" id="btn1">运费升序排列</button>
	<button class="jx" id="btn2">运费降序排列</button>
	</div>
	<div class="btn_box">
	<button class="sx" id="btn3">时效升序排列</button>
	<button class="jx" id="btn4">时效降序排列</button>
	</div>
	<script src="js/jquery-3.3.1.min.js"></script>
</body>
</html>

上代码（js代码，这是比较冗余的代码，看起来思路比较清晰）：

		var 
		btn1 = $("#btn1"),
		btn2 = $("#btn2"),
		btn3 = $("#btn3"),
		btn4 = $("#btn4"),
		trs = $("tbody>tr"),
		tbody = $("table>tbody"),
		pre_arr = [],
		pric_arr = [];

		// 将非数组性质的trs赋值给数组pric_arr
		function trsTo_Pric_arr(){
			for(var i=0;i<trs.length;i++){
				pric_arr[i] = trs[i];
			}
		}

		// 将非数组性质的trs赋值给数组pre_arr
		function trsTo_Pre_arr(){
			for(var i=0;i<trs.length;i++){
				pre_arr[i] = trs[i];
			}
		}

		// 运费升序排列
		function y_tabs(){
			trsTo_Pric_arr();
			pric_arr.sort(function(t1,t2){
				var n1 = t1.cells[2].innerHTML.substring(2).replace(".", "");
				var n2 = t2.cells[2].innerHTML.substring(2).replace(".", "");
				return n1 - n2;
			})
		}

		// 运费降序排列
		function y_tabj(){
			trsTo_Pric_arr();
			pric_arr.sort(function(t1,t2){
				var n1 = t1.cells[2].innerHTML.substring(2).replace(".", "");
				var n2 = t2.cells[2].innerHTML.substring(2).replace(".", "");
				return n2 - n1;
			})
		}

		// 时效升序排列
		function s_tabs(){
			trsTo_Pre_arr();
			pre_arr.sort(function(t1,t2){
				var str1 = t1.cells[1].innerHTML;
				var str2 = t2.cells[1].innerHTML;
				var n1 = str1.substring(0,str1.length-4).replace("-", "");
				var n2 = str2.substring(0,str2.length-4).replace("-", "");
				return n1 - n2;
			})
		}

		// 时效降序排列
		function s_tabj(){
			trsTo_Pre_arr();
			pre_arr.sort(function(t1,t2){
				var str1 = t1.cells[1].innerHTML;
				var str2 = t2.cells[1].innerHTML;
				var n1 = str1.substring(0,str1.length-4).replace("-", "");
				var n2 = str2.substring(0,str2.length-4).replace("-", "");
				return n2 - n1;
			})
		}

		// 将排列好顺序的运费tr添加到tbody里
		function addPricToTbody(){
			for(var i=0;i<pric_arr.length;i++){
				tbody.append(pric_arr[i]);
			}
		}

		// 将排列好顺序的时效tr添加到tbody里
		function addPreToTbody(){
			for(var i=0;i<pre_arr.length;i++){
				tbody.append(pre_arr[i]);
			}
		}

		// 点击btn1运费进行升序排列
		btn1.click(function(){
			y_tabs();
			addPricToTbody();
		})

		// 点击btn2运费进行降序排列
		btn2.click(function(){
			y_tabj();
			addPricToTbody();
		})
		// 点击btn3时效进行升序排列
		btn3.click(function(){
			s_tabs();
			addPreToTbody();
		})

		// 点击btn4时效进行降序排列
		btn4.click(function(){
			s_tabj();
			addPreToTbody();
		})

上代码（js代码，这是比较简洁的代码）：


  $(function(){
    	var 
		btn1 = $("#btn1"),
		btn2 = $("#btn2"),
		btn3 = $("#btn3"),
		btn4 = $("#btn4"),
		trs = $("tbody>tr"),
		tbody = $("table>tbody"),
		pre_arr = [],
		pric_arr = [];

    // 将非数组性质的trs赋值给新数组
    function trsTo_New_arr(type_arr){
        for(var i=0;i<trs.length;i++){
            type_arr[i] = trs[i];
        }
    }

    // 运费排序
    function y_tab(f){
        trsTo_New_arr(pric_arr);
        pric_arr.sort(function(t1,t2){
            var n1 = t1.cells[2].innerHTML.substring(2).replace(".", "");
            var n2 = t2.cells[2].innerHTML.substring(2).replace(".", "");
            return f*(n1 - n2);
        })
    }

    // 时效排序
    function s_tab(f){
        trsTo_New_arr(pre_arr);
        pre_arr.sort(function(t1,t2){
            var str1 = t1.cells[1].innerHTML;
            var str2 = t2.cells[1].innerHTML;
            var n1 = str1.substring(0,str1.length-4).replace("-", "");
            var n2 = str2.substring(0,str2.length-4).replace("-", "");
            return f*(n1 - n2);
        })
    }

    // 将排列好顺序的tr添加到tbody里
    function addToTbody(type_arr){
        for(var i=0;i<type_arr.length;i++){
            tbody.append(type_arr[i]);
        }
    }

    // 点击按钮运费进行升序排列
    btn1.click(function(){
        y_tab(1);
        addToTbody(pric_arr);
    })
    // 点击按钮运费进行降序排列
    btn2.click(function(){
        y_tab(-1);
        addToTbody(pric_arr);
    })
    // 点击按钮时效进行升序排列
    btn3.click(function(){
        s_tab(1);
        addToTbody(pre_arr);
    })
    // 点击按钮时效进行降序排列
    btn4.click(function(){
        s_tab(-1);
        addToTbody(pre_arr);
    })
  })

//参数说明
//  f = 1,升序排列；  f = -1,降序排列
jsyxiaoba
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery对象排序
09-16
obj为对象，如student对象，sortName为排序字段,sortOrder为升序或降序，升序为asc,降序为desc 如果两边都为数字，转换为数字比较 如果两边都为String,比较string 如果一边是数字，一边是String，转换为数字。 这是利用js本身的比较符比较的，如果要比较比如日期等等的，可以自己写一种比较方法，进行扩展。
vue数组对象排序的实现代码
08-27
Vue 数组对象排序的实现代码 Vue 数组对象排序的实现代码主要介绍了在 Vue 框架中对数组对象的排序方法，包括普通数组的排序和数组对象的排序。下面是对应的知识点： 普通数组的排序 在 Vue 中，对普通数组的排序...
数组中的对象排序
weixin_34153893的博客
11-19 214
学习链接：http://www.cnblogs.com/xljzlw/p/3694861.html var arr = [{name: "zlw", age: 24}, {name: "wlz", age: 25}];var compare = function (prop) { return function (obj1, obj2) { var val1 = obj...
JavaScripts数组里的对象排序的24个方法
最新发布
BIBOR的博客
06-23 1298
如果你需要对数组进行复杂的排序操作，可以使用 reduce() 方法。let i = 0;i++;}, []);如果你希望根据多个字段进行排序，可以编写自定义的比较函数。// 按年龄升序，如果年龄相同按身高降序if (a.age!// 年龄升序} else {// 年龄相同，身高降序});]);// 按优先级排序'user': 2,'admin': 3// 按角色权重排序。
一、数组对象排序
盏茶作酒的博客
06-07 1万+
一、普通数组排序　　 　　js中用方法sort()为数组排序。sort()方法有一个可选参数，是用来确定元素顺序的函数。如果这个参数被省略，那么数组中的元素将按照ASCII字符顺序进行排序。如： var arr = ["a", "b", "A", "B"]; arr.sort(); console.log(arr);//["A", "B", "a", "b"] 因为字母A、B的ASCII值分别为65、66，而a、b的值分别为97、98，所以上面输出的结果是["A", "B", "a", "b"]..
数组对象排序 （arr.sort()）
weixin_48838046的博客
09-24 4738
数组对象排序 （arr.sort()） 描述 方法sort()将在原数组上对数组元素进行排序，即排序时不创建新的数组副本。 如果想按照别的顺序进行排序，就必须提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。 普通数组从大到小排序： 在这里插入代码片 var arr = [1,2,5,4,23,45,24,3,7,18]; arr.sort(function (a,b) { return b - a }) 数组对象从大到小排序： 在这里插入代码片 var arr = [{'
对象数组排序
webZRH的博客
01-23 325
function compare(property) { return function (a, b) { var value1 = a[property]; var value2 = b[property]; return value1 - value2; } } console.log(list.sort(compare('count'))) console.log(lis
js中的数组对象排序分析
10-17
JavaScript中的数组对象排序是一个重要的概念，特别是在处理数据和列表展示时。本文主要分析了JavaScript中数组的`sort()`方法以及如何使用比较函数进行自定义排序。 首先，`sort()`方法是JavaScript数组对象的一个...
JS实现给数组对象排序的方法分析
10-16
在JavaScript中，数组对象排序是一项常见的任务，尤其在处理包含对象的数据集合时。本文将深入探讨如何使用JavaScript的`sort()`方法对数组对象进行排序，并介绍一种通用的解决方案，即通过创建自定义比较函数来根据...
对象数组的排序
qq_39040192的博客
05-23 2882
对象数组的排序 对此类对象数组进行排序 var jzdata = [ {element_flag:"凯里",flow:0.222}, {element_flag:"凯里",flow:0.111}, {element_flag:"凯里",flow:0.333}, ] 排序方法（上面数据是模拟数据，不影响排序结果） var jzdata = JSON.parse(JSON.stringify(...
数组排序，对象数组排序
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
09-13 376
数组排序，根据数组中对象的某一个属性进行排序 数组排序  sortlen =[1,9,11,55,3,4] sortlen = sortlen.sort(function(x,y){ return y-x; //从大到小 }) console.log(sortlen); //[55,11,9,4,3,1] 根据数组中对象的某一个属性进行排序 //根据age从小到大排列 va...
数组（数组对象）排序
weixin_49708498的博客
11-29 404
【代码】数组（数组对象）排序。
javascript 对象数组排序
热门推荐
我只是坚持我的兴趣。
01-04 1万+
javascript 对象数组排序 作者: admin 日期: 二月 13, 2011发表评论 (3)查看评论 javascript实现多维数组、对象数组排序，其实用的就是原生的sort()方法，用于对数组的元素进行排序。 其基本的用法就不说了，先看个简单的排序例子： 帮助 1 2 3 //Sort
数组(数组对象)排序
ltc_Yan的博客
08-03 371
排序
jQuery对象数组排序
fonyer的博客
12-29 350
              知识点： 假设以对象数组形式来保存学生信息。每个学生包括3个属性：sid,sname,sage。请基于sid为该数组排序。 说明： sort()方法：需要添加比较函数，反复从数组中获取一对值，在比较的基础上返回&lt;0、=0和&gt;0的值。 其实和排序字符串、数值没什么区别，比较对象是按照对象中的某个属性比较，所以，我们只要取出对象中的某个属性比较...
vue 数组对象排序
05-10
Vue 数组对象排序可以通过数组的 `sort()` 方法来实现，这个方法可以接受一个比较函数作为参数。比较函数有两个参数，分别为要比较的数组元素 a 和 b。比较函数应该返回一个负数、零或者正数来表示 a 小于、等于或者大于 b。 下面是一个例子，假设有一个数组对象 `items`，其中每个元素都包含 `name` 和 `age` 两个属性，我们可以按照 `age` 属性进行排序： ``` items.sort(function(a, b){ return a.age - b.age; }); ``` 以上代码会将数组对象 `items` 按照 `age` 属性从小到大进行排序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值