尝试编写一些干净的JS排序函数。下面是我的模板中一个按钮的click处理程序,它调用各个方法按不同的属性排序。
(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甚至从来没有调用过GET。我做错了什么?
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)
很可能使用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函数不会改变行为,因为它不依赖于成员变量。