vue中数组和对象的排序
1数组排序
rush:js;">
2对象排序
rush:js;">
一、前言
我在vue项目中遇到了一个表格排序的需求，根据某一项的值的大小从大到小调整数组顺序。
二、代码
rush:js;">
股票
| Now_price')">最新价 |
Now_price}}<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; } } } } 1. 排序方法这里用到的是数组的sort方法，这个方法有一个需要注意的地方，就是不传参数的话，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。这并不是我们想要的排序方法，所以必须要传参。 sort方法的参数是一个函数，这个函数提供了一个比较方法，要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。 rush:js;">
compare(key) {
return function(a,b){
var val1 = a[key];
var val2 = b[key];
return val2 - val1;
}
}
在代码中，compare函数中的匿名函数就是这样一个函数，但这个函数外面又嵌套了一层，这是因为需要根据数组中的某一项来排序，所以需要把这一项的key值传进来。 2. 调用排序方法rush:js;">
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;
// }
}
一开始我按照注释的部分写的，和我一样抽象能力不是特别好的人首先会想到要这样写，但是写出来之后发现三种情况不过是重复的代码，这时我就直接用最上面两行代码来代替，写完以后感觉内心一片平和。这种复用率高的代码简直让人太舒服了。 三、结语虽然是一个简单的功能，但是非常值得归纳总结一下。希望对大家的学习有所帮助，也希望大家多多支持编程之家。 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。 相关推荐 |
|---|
