ts - 多属性排序

现在有一个学生数组:

enum Sex {
    man,
    woman
}

interface Student {
    Name: string,
    Age: number,
    Sex: Sex
}

const Students: Student[] = [
    { Name: 'lux', Age: 18, Sex: Sex.man },
    { Name: 'hey', Age: 21, Sex: Sex.man },
    { Name: 'haha', Age: 23, Sex: Sex.woman },
    { Name: 'yo', Age: 19, Sex: Sex.woman }
]

需要按照年龄(或其他属性)来排序。

在上上篇笔记里面,提到了阮一峰的快速排序

var arr = [6,2,5,1,3];

function quickSort(arr:Number[]):Number[]{
    if(arr.length <= 1){
        return arr;
    }
    var pivotIndex = Math.floor(arr.length/2);
    var pivot = arr.splice(pivotIndex,1)[0];
    var left = [] as Number[];
    var right = [] as Number[];

    for(var i =0;i<arr.length;i++){
        if (arr[i] < pivot) {
            left.push(arr[i]);
        } else {
            right.push(arr[i]);
        }
    }
    return quickSort(left).concat([pivot], quickSort(right));
}
console.log(quickSort(arr));

那么,对于学生数组的排序,也是基于这个快排的方法。
首先,我们需要给函数签名添加一个参数,用来传递学生数组的属性。

function orderby<Titem, Tvalue>(arr: Titem[], selector: (i: Titem) => Tvalue): Titem[] 

(其中用到了泛型的概念)
参数arr代表我们需要传入的学生数组,而selector代表学生数组中具体的某一个属性。
接下来这一段就是快速排序的源代码:

if (arr.length <= 1) {
        return arr;
    }//如果数组的项小于等于1,直接返回数组就OK
const pivotIndex = Math.floor(arr.length / 2);//取中间的索引
const pivot = arr.splice(pivotIndex, 1)[0];//取中间的学生
const left = [] as Titem[];
const right = [] as Titem[];

接下来的这一段,用来做排序的判断。

for (const i of arr) {
    if (selector(i) < selector(pivot)) {
        left.push(i);
    } else {
        right.push(i);
    }
}
return orderby(left, selector).concat([pivot], orderby(right, selector));

调用的方法:

const StudentOrderbyAge = orderby(Students, i => i.Age);
console.log(StudentOrderbyAge);

源码:

function orderby<Titem, Tvalue>(arr: Titem[], selector: (i: Titem) => Tvalue): Titem[] {
    if (arr.length <= 1) {
        return arr;
    }
    const pivotIndex = Math.floor(arr.length / 2);
    const pivot = arr.splice(pivotIndex, 1)[0];
    const left = [] as Titem[];
    const right = [] as Titem[];

    for (const i of arr) {
        if (selector(i) < selector(pivot)) {
            left.push(i);
        } else {
            right.push(i);
        }
    }
    return orderby(left, selector).concat([pivot], orderby(right, selector));
}

const StudentOrderbyAge = orderby(Students, i => i.Age);
console.log(StudentOrderbyAge);

JS源码:

function orderby(arr, selector) {
    if (arr.length <= 1) {
        return arr;
    }
    const pivotIndex = Math.floor(arr.length / 2);
    const pivot = arr.splice(pivotIndex, 1)[0];
    const left = [];
    const right = [];

    for (const i of arr) {
        if (selector(i) < selector(pivot)) {
            left.push(i);
        } else {
            right.push(i);
        }
    }
    return orderby(left, selector).concat([pivot], orderby(right, selector));
}

const StudentOrderbyAge = orderby(Students, i => i.Age);
console.log(StudentOrderbyAge);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基本的nz-table的排序实现示例: HTML代码: ```html <nz-table #myTable [nzData]="data" [nzPageSizeOptions]="[5, 10, 20]" [nzShowPagination]="true"> <thead> <tr> <th nzShowSort nzSortKey="id" (nzSortChange)="sort('id', $event)"> ID <i nz-icon [nzType]="myTable.nzSortKey=='id'?(myTable.nzSortValue=='ascend'?'caret-up':'caret-down'):''></i> </th> <th nzShowSort nzSortKey="name" (nzSortChange)="sort('name', $event)"> Name <i nz-icon [nzType]="myTable.nzSortKey=='name'?(myTable.nzSortValue=='ascend'?'caret-up':'caret-down'):''></i> </th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr *ngFor="let item of myTable.data"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> <td>{{item.gender}}</td> </tr> </tbody> </nz-table> ``` TS代码: ```typescript import { Component } from '@angular/core'; import { NzTableSortOrder, NzTableSortFn, NzTableSortConfig } from 'ng-zorro-antd/table'; @Component({ selector: 'app-my-table', templateUrl: './my-table.component.html', styleUrls: ['./my-table.component.css'] }) export class MyTableComponent { data = [ { id: 1, name: 'Alice', age: 20, gender: 'female' }, { id: 2, name: 'Bob', age: 25, gender: 'male' }, { id: 3, name: 'Charlie', age: 30, gender: 'male' }, { id: 4, name: 'David', age: 35, gender: 'male' }, { id: 5, name: 'Eva', age: 40, gender: 'female' }, { id: 6, name: 'Frank', age: 45, gender: 'male' }, { id: 7, name: 'Grace', age: 50, gender: 'female' }, { id: 8, name: 'Henry', age: 55, gender: 'male' }, { id: 9, name: 'Isabel', age: 60, gender: 'female' }, { id: 10, name: 'John', age: 65, gender: 'male' } ]; sortMap: NzTableSortConfig = { id: null, name: null }; sort(sortName: string, value: NzTableSortOrder): void { this.sortMap[sortName] = value; this.search(); } search(): void { const sortName = Object.keys(this.sortMap).find(key => this.sortMap[key] != null); const sortOrder = this.sortMap[sortName]; const sortFn: NzTableSortFn = (a, b) => a[sortName] > b[sortName] ? sortOrder === 'ascend' ? 1 : -1 : sortOrder === 'ascend' ? -1 : 1; if (sortName && sortOrder) { this.data = this.data.sort(sortFn); } } } ``` 这个例子中,我们通过设置`nzShowSort`和`nzSortKey`属性来启用排序,然后通过`(nzSortChange)`事件来监听排序改变。在代码中,我们使用一个`sortMap`对象来保存每个列的排序状态,然后在`sort`函数中更新`sortMap`并调用`search`函数重新排序。在`search`函数中,我们根据`sortMap`来确定当前排序的列和排序的顺序,并定义一个`sortFn`函数来实现排序。最后,我们通过调用数组的`sort`函数来进行排序

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值