代码之家 › 专栏 › 技术社区 › Gentem

如何让排序函数调用比较函数

sorting typescript angular html javascript

0

Gentem · 技术社区 · 4 年前

尝试编写一些干净的JS排序函数。下面是我的模板中一个按钮的点击处理程序,它调用各个方法按不同的属性排序。

(click)="addresses.sort(sortByTown)"

sortByTown(address1: any, address2: any): number {
    const a = address1.town.toUpperCase();
    const b = address2.town.toUpperCase();
    if (a > b) {
      return 1;
    } else if (a < b) {
      return -1;
    }
    return 0;
  }

我遇到的问题是,我有4个这样的排序方法,我想把if语句放到它们自己的函数中,以便更好地编写干代码。所以我尝试了下面的方法,但是compareFunction从来没有被调用过。我做错什么了?

sortByTown(address1: any, address2: any): number {
    const a = address1.town.toUpperCase();
    const b = address2.town.toUpperCase();
    return this.compareAddresses(a, b);
  }

  compareAddresses(a: string | number, b: string | number): number {
    if (a > b) {
      return 1;
    } else if (a < b) {
      return -1;
    }
    return 0;
  }

TypeError: Cannot read property 'compareAddresses' of undefined
    at sortByStreetName (address.component.ts:43)
    at Array.sort (<anonymous>)
    at AddressComponent_Template_button_click_9_listener (address.component.html:10)
    at executeListenerWithErrorHandling (core.js:15182)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:15217)
    at HTMLButtonElement.<anonymous> (platform-browser.js:582)
    at ZoneDelegate.invokeTask (zone-evergreen.js:406)
    at Object.onInvokeTask (core.js:28500)
    at ZoneDelegate.invokeTask (zone-evergreen.js:405)
    at Zone.runTask (zone-evergreen.js:178)

1 回复 | 直到 4 年前

1

2

Michael D 4 年前

很可能是用 this 在被定义为普通JS函数的回调中,会遇到范围问题。

sortByTown()

sortByTown = (address1: any, address2: any): number => {
  const a = address1.town.toUpperCase();
  const b = address2.town.toUpperCase();
  return this.compareAddresses(a, b);
}

更新:正如@yurzui在评论中指出的,定义 compareAddresses() 作为一个普通的JS函数,它不会改变行为,因为它不依赖于成员变量。