热门搜索 :
汽车文化
您的当前位置:首页正文

vue 根据数组中某一项的值进行排序的方法

2023-12-07 来源:学车网

vue中数组和对象的排序

1数组排序

<div id="app"> <ul> <li v-for="a in arr1">{{a}}</li> </ul> </div> <script type="text/javascript"> new Vue({ el:"#app", data:{ arr:[1,4,5,2,3,44] },computed:{ arr1:function(){ return this.arr.sort(sortNum)//调用排序方法 } } }) function sortNum(a,b){//排序方法 return a-b; } </script>

2对象排序

<div id="app"> <ul> <li v-for="(stu,index) in students1">{{stu}}</li> </ul> </div> <script type="text/javascript"> new Vue({ el:"#app", data:{ students:[ {name:"小a",age:20}, {name:"小b",age:21}, {name:"小c",age:18}, {name:"小d",age:19}, {name:"小f",age:18} ] }, computed:{ students1:function(){ return sortKey(this.students,'age') } } }) function sortKey(array,key){ return array.sort(function(a,b){ var x = a[key]; var y = b[key]; return ((x<y)?-1:(x>y)?1:0) }) } </script>

一、前言

我在vue项目中遇到了一个表格排序的需求,根据某一项的值的大小从大到小调整数组顺序。

二、代码

表格大概是这个样子,样式和图片在代码中简化了。

<table class="recommend_table" cellspacing="0"> <tr> <th>股票</th> <th @click="sort('in_price')">入选价</th> <th @click="sort('now_price')">最新价</th> <th @click="sort('increase')">模拟涨跌幅</th> </tr> <tr v-for="(item,index) in recommendlist" :key="index"> <td> <div class="recommend_name">{{item.name}}</div> <div class="recommend_num">{{item.bn}}</div> </td> <td>{{item.in_price}}</td> <td>{{item.now_price}}</td> <td>{{item.increase}}%</td> </tr></table><script type="text/ecmascript-6"> export default { data(){ return{ recommendlist: [ { name:'高科石化', bn:'002778', in_price: 20.68, now_price: 28.68, increase: 10.01 }, { name:'中孚信息', bn:'300659', in_price: 19.46, now_price: 17.46, increase: 9.06 }, { name:'永福股份', bn:'300712', in_price: 17.68, now_price: 32.68, increase: 2.01 } ], sortType: 'in_price' } }, methods: { sort(type) { this.sortType = type; this.recommendlist.sort(this.compare(type)); // switch(type){ // case 'in_price': // this.sortType = 'in_price'; // this.recommendlist.sort(this.compare('in_price')); // break; // case 'now_price': // this.sortType = 'now_price'; // this.recommendlist.sort(this.compare('now_price')); // break; // case 'increase': // this.sortType = 'increase'; // this.recommendlist.sort(this.compare('increase')); // break; // } }, compare(attr) { return function(a,b){ var val1 = a[attr]; var val2 = b[attr]; return val2 - val1; } } } }</script>

1. 排序方法

这里用到的是数组的sort方法,这个方法有一个需要注意的地方,就是不传参数的话,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。这并不是我们想要的排序方法,所以必须要传参。

sort方法的参数是一个函数,这个函数提供了一个比较方法,要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。

  1. 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
  2. 若 a 等于 b,则返回 0。
  3. 若 a 大于 b,则返回一个大于 0 的值。
compare(key) { return function(a,b){ var val1 = a[key]; var val2 = b[key]; return val2 - val1; }}

在代码中,compare函数中的匿名函数就是这样一个函数,但这个函数外面又嵌套了一层,这是因为需要根据数组中的某一项来排序,所以需要把这一项的key值传进来。

2. 调用排序方法

sort(type) { this.sortType = type; this.recommendlist.sort(this.compare(type)); // switch(type){ // case 'in_price': // this.sortType = 'in_price'; // this.recommendlist.sort(this.compare('in_price')); // break; // case 'now_price': // this.sortType = 'now_price'; // this.recommendlist.sort(this.compare('now_price')); // break; // case 'increase': // this.sortType = 'increase'; // this.recommendlist.sort(this.compare('increase')); // break; // }}

一开始我按照注释的部分写的,和我一样抽象能力不是特别好的人首先会想到要这样写,但是写出来之后发现三种情况不过是重复的代码,这时我就直接用最上面两行代码来代替,写完以后感觉内心一片平和。这种复用率高的代码简直让人太舒服了。

三、结语

虽然是一个简单的功能,但是非常值得归纳总结一下。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

小编还为您整理了以下内容,可能对您也有帮助:

Vue 3 嵌入式开发中堆排序的原理,你了解多少?

Vue 3 嵌入式开发中堆排序的原理是利用大顶堆(小顶堆)堆顶记录的是最大关键字(最小关键字)这一特性,使得每次从无序中选择最大记录(最小记录)变得简单。具体步骤如下:

1. 将待排序的序列构造成一个最大堆,此时序列的最大值为根节点。

2. 依次将根节点与待排序序列的最后一个元素交换,然后将剩余的元素重新构造成一个最大堆。

3. 重复第二步,直到序列中只剩下一个元素为止。

整个堆排序的过程中,只需要个别的临时存储空间,所以堆排序是原地排序算法。堆排序包括建堆和排序两个操作,建堆的时间复杂度是O(n),排序过程时间复杂度是O(nlogN)。所以,堆排序的整个时间复杂度是O(nlogN)。

什么是排序?常用的排序方法有哪些?比较一下冒泡排序和选择排序算法上的异同。

比较一下冒泡排序和选择排序算法上的异同。比较一下冒泡排序和选择排序算法上的异同。

1、插入排序:将一个无序的数组,以第一个记录作为有序,然后进行排序。

2、希尔排序:是插入排序的一种。

3、选择排序:区间分为有序区间和无序区间,每次选择无序区间的第一个元素,在有序区间合适的位置进行插入操作。

4、冒泡排序:通过不断比较并交换相邻的两个元素,如果顺序错误就把他们交换过来。

5、快速排序:通过选定一个比较基准,将要排序的数列分为两部分,其中一部分的所有数据都比另一部分的所有数据要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,以此达到整个数据变成有序序列。

6、归并排序:采用分治法的一种排序算法,将要排序的数据分成两个部分,分别对这两个部分进行排序,然后将两个排序好的部分合并成一个有序的序列。

7、堆排序:利用堆这种数据结构所设计的一种排序算法。堆是一个近似完全二叉树的结构,并同时满足堆积的性质,即子节点的键值或索引总是小于(或大于)它的父节点。

比较一下冒泡排序和选择排序算法上的异同:

相似之处:

1、都是比较排序:冒泡排序和选择排序都是通过比较相邻元素的大小,然后交换位置来实现排序的,因此它们都属于比较排序算法。

2、都需要进行多次遍历:无论是冒泡排序还是选择排序,都需要多次遍历待排序的序列,才能实现排序。

不同之处:

1、操作方式不同:冒泡排序是依次比较相邻元素的大小,如果顺序错误就交换位置;而选择排序是每次从待排序的序列中选择最小(或最大)的一个元素,然后与第一个元素交换位置。

2、效率不同:由于冒泡排序每次只能交换一个元素,因此它的效率相对较低;而选择排序每次可以交换多个元素,因此它的效率相对较高。

3、稳定性不同:冒泡排序是稳定的排序算法,即相等的元素的顺序不会改变;而选择排序是不稳定的,因为它可能会因为交换元素而改变相等的元素的顺序。

4、应用场景不同:冒泡排序适用于小规模数据的排序,而选择排序适用于大规模数据的排序。

冒泡排序和选择排序的优缺点:

冒泡排序的优点包括:

1、算法简单易懂,易于实现。

2、适用于大规模数据的排序,因为它的时间复杂度是O(n^2),其中n是待排序数据的规模。

3、稳定性好,即相等的元素的顺序不会改变。

冒泡排序的缺点包括:

1、时间复杂度较高,因此对于小规模数据的排序可能不够高效。

2、在数据已经有序的情况下,冒泡排序需要进行比较和交换操作,浪费了计算资源。

选择排序的优点包括:

1、时间复杂度较低,为O(n^2),适用于小规模数据的排序。

2、实现简单,只需进行一次遍历即可完成排序。

3、对于部分已经排好序的数据,选择排序的效率较高。

选择排序的缺点包括:

1、不稳定,即相等的元素的顺序可能会改变。

2、对于大规模数据的排序,选择排序可能不够高效。

3、在数据已经有序的情况下,选择排序需要进行比较和交换操作,浪费了计算资源。

快速排序

基本思想是:通过一趟排序将要排序的数据分割成的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,以此达到整个数据变成有序序列

快速排序算法通过多次比较和交换来实现排序,其排序流程如下:

(1)首先设定一个分界值,通过该分界值将数组分成左右两部分。

(2)将大于或等于分界值的数据集中到数组右边,小于分界值的数据集中到数组的左边。此时,左边部分中各元素都小于或等于分界值,而右边部分中各元素都大于或等于分界值。

(3)然后,左边和右边的数据可以排序。对于左侧的数组数据,又可以取一个分界值,将该部分数据分成左右两部分,同样在左边放置较小值,右边放置较大值。右侧的数组数据也可以做类似处理

(4)重复上述过程,可以看出,这是一个递归定义。通过递归将左侧部分排好序后,再递归排好右侧部分的顺序。当左、右两个部分各数据排序完成后,整个数组的排序也就完成了。

下面通过一个例子介绍快速排序算法的思想,假设要对数组a[10]={6,1,2,7,9,3,4,5,10,8}进行排序,首先要在数组中选择一个数作为基准值,这个数可以随意选择,在这里,我们选择数组的第一个元素a[0]=6作为基准值,接下来,我们需要把数组中小于6的数放在左边,大于6的数放在右边,怎么实现呢?

我们设置两个“哨兵”,记为“哨兵i”和“哨兵j”,他们分别指向数组的第一个元素和最后一个元素,即i=0,j=9。首先哨兵j开始出动,哨兵j一步一步地向左挪动(即j–),直到找到一个小于6的数停下来。接下来哨兵i再一步一步向右挪动(即i++),直到找到一个数大于6的数停下来。

最后哨兵j停在了数字5面前,哨兵i停在了数字7面前。此时就需要交换i和j指向的元素的值。

交换之后的数组变为a[10]={6,1,2,5,9,3,4,7,10,8}:

第一次交换至此结束。接下来,由于哨兵i和哨兵j还没有相遇,于是哨兵j继续向前,发现比6小的4之后停下;哨兵i继续向前,发现比6大的9之后停下,两者再进行交换。交换之后的数组变为a[10]={6,1,2,5,4,3,9,7,10,8}。

第二次交换至此结束。接下来,哨兵j继续向前,发小比6小的3停下来;哨兵i继续向前,发现i==j了!!!于是,这一轮的探测就要结束了,此时交换a[i]与基准的值,数组a就以6为分界线,分成了小于6和大于6的左右两部分:a[10]={3,1,2,5,4,6,9,7,10,8}。

至此,第一轮快速排序完全结束,接下来,对于6左边的半部分3,1,2,5,4,执行以上过程;对于6右边的半部分9,7,10,8,执行以上过程,直到不可拆分出新的子序列为止。最终将会得到这样的序列:1 2 3 4 5 6 7 8 9 10,到此,排序完全结束。

快速排序的一次划分算法从两头交替搜索,直到low和hight重合,因此其时间复杂度是O(n);而整个快速排序算法的时间复杂度与划分的趟数有关。

理想的情况是,每次划分所选择的中间数恰好将当前序列几乎等分,经过log 2 n趟划分,便可得到长度为1的子表。这样,整个算法的时间复杂度为O(nlog 2 n)。

最坏的情况是,每次所选的中间数是当前序列中的最大或最小元素,这使得每次划分所得的子表中一个为空表,另一子表的长度为原表的长度-1。这样,长度为n的数据表的快速排序需要经过n趟划分,使得整个排序算法的时间复杂度为O(n 2 )。

为改善最坏情况下的时间性能,可采用其他方法选取中间数。通常采用“三者值取中”方法,即比较H->r[low].key、H->r[high].key与H->r[(low+high)/2].key,取三者中关键字为中值的元素为中间数。

可以证明,快速排序的平均时间复杂度也是O(nlog 2 n)。因此,该排序方法被认为是目前最好的一种内部排序方法

有没有整数排序的方法?

方法步骤如下:

1.首先,定义一个结构,包括数值、排名和序号。

2.定义结构数组变量d,保存所有整数信息。

3.接下来,定义一个自定义函数来比较整数序列中任意两个整数的大小。

4.定义一个自定义函数,比较整数序列中任意两个数字的序数大小。

5.在主函数中,首先定义两个整数,并保存整数个数和排名计数。

6.使用for循环输入序列中的整数,并设置序列中每个整数的序列号。

7.按整数大小排序的序列中的所有数值。

8.将好排序数值添加排序编号。

9.最后,根据索引输出所有整数的排序。

注意:

(1)交换排序:参照求最大值和最小值的思想,按升序排序的基本过程是将第一个数字与下一个数字进行比较。如果后面的数字很小,那么交换和第一个数字的位置。否则,不要交换。

(2)气泡排序:交换和重复两个相邻数字的过程。一般来说,如果有n个数字要排序,则需要n-1起泡。

(3)选择排序:在交换顺序的基础上,找出剩余数量的最大值,并与地面上的I+1数量进行交换,使得每轮比较中只有一次交换操作,该算法最多只有n-1个交换操作。

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top