【前端，TypeScript】TypeScript速成（六）：函数

函数

函数的定义

定义一个最简单的加法函数：

function add(a: number, b: number): number {return a + b
}

（可以看到 JavaScript/TypeScript 的语法与 Golang 也非常的相似）

调用该函数：

console.log(add(2, 3))
// out
[LOG]: 5

可选参数、默认参数和可变参数列表

在函数定义时，假定我们有一个可选的参数，可以在形参列表该参数后加上?。注意可选参数和默认参数一样都应该放在参数列表的后面：

function add(a: number, b: number, c?: number, d: number = 0): number {return a + b + (c || 0) + d
}console.log(add(2, 3))
console.log(add(2, 3, 9))
console.log(add(2, 3, 9, 15))
// out
[LOG]: 5 
[LOG]: 14 
[LOG]: 29

还可以加入一个可变参数列表：

function add(a: number, b: number, c?: number, d: number = 0,...e: number[]): number {let sum = a + b + (c || 0) + dfor(let i = 0; i < e.length; i ++) {sum += e[i]}return sum
}console.log(add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10))
// out
[LOG]: 55 

函数的重载

TypeScript 支持函数的重载（Golang 不允许函数的重载），但是不建议使用。

对象类型参数

假设我们现在有下述的函数定义：

function sendRequest(url: string, method: 'GET' | 'POST' | 'PUT',header: object,data: string,requireAuth: boolean,retry: boolean,retryTimeOut: number) {// ... ... ...
}

函数掉调用者在使用这个函数的时候，可能会给出非常冗长的参数列表，且我们无法从参数列表得知这个函数在做什么。

TypeScript 的一个解决办法是使用对象类型参数：

function sendRequest(params: {url: string, method: 'GET' | 'POST' | 'PUT',header: object,data: string,requireAuth: boolean,retry: boolean,retryTimeOut?: number,}) {// ... ... ...
}

参数直接是一个对象。函数调用时：

sendRequest({url: 'https://www.test.com',method: 'GET',header: {contentType: '... ... ...'},data: '{}',requireAuth: true,retry: true,retryTimeOut: 3000
})

这种做法使得函数调用者非常的方便。

通过函数为对象定义方法

将函数定义在对象内部，即可完成对象方法的定义：

const emp1 = {name: 'John',salary: 8000,performance : 3.5,bonus: undefined as (number | undefined),updataBonus() {if(!emp1.bonus) {emp1.bonus = emp1.salary * emp1.performance}},
}emp1.updataBonus()
console.log(emp1)// out
[LOG]: {"name": "John","salary": 8000,"performance": 3.5,"bonus": 28000
} 

观察对象方法的定义：

updataBonus() {if(!emp1.bonus) {emp1.bonus = emp1.salary * emp1.performance}
}

我们看到，必须通过 emp1 才能访问 bonus，但如果我们使用 emp2、emp3 来保存对象该怎么办呢？可以通过使用保留的关键字 this 来解决上述问题，修改后的方法如下：

updataBonus() {if(!this.bonus) {this.bonus = this.salary * this.performance}
}

函数式编程

函数式编程是 TypeScript/JavaScript 非常大的一个亮点，这个特性非常适配于前端开发。TypeScript/JavaScript 的 Promise 也是基于函数式编程的。

使用函数式编程辅助数组的排序

之前在对数组的学习过程当中我们提到过，直接对 number 类型的数组使用 sort 方法之后，数组将按照字典顺序排序，而不是按照数字大小的顺序排序。现在我们希望借助函数实现按照 number 大小进行排序：

function compareNumber(a: number, b: number) {// a < b -> 返回负数// a === b -> 返回 0// a > b -> 返回正数return a - b
}let a = [5, 2, 1, 6, 8, 10, 5, 25, 16, 23, 11]
a.sort(compareNumber)
console.log(a)

👆将函数名称传递给函数，就是函数式编程。（看起来和 C++ 当中的函数指针非常的像，但函数式编程比函数指针复杂很多，唯一和函数指针相似的地方就是在上述例子当中）

在函数式编程中，函数是一等公民

函数作为一等公民时：

• 变量类型可以是函数；
• 值（literal）可以是函数；
• 对象的字段可以是函数；
• 函数的参数也可以是函数；
• 函数的返回值可以是函数。

变量类型可以是函数

上述的 compareNumber 函数的另一种定义形式如下：

const compareNumber = function(a: number, b: number) {return a - b
}

此时，compareNumber 是一个对象，它的类型是函数。

值（literal）可以是函数

上述 compareNumber 可以是一个变量，并被赋予其它的值（其它函数）：

let compareNumber = function(a: number, b: number) {return a - b
}
compareNumber = function(a: number, b: number) {return b - a
}	// 实现降序排序

对象的字段也可以是函数

一个例子如下：

const emp1 = {name: 'John',salary: 8000,increaseSalary: function(p: number) {	// 此处不能使用箭头函数this.salary *= p					// 箭头函数和 this 之间有坑}
}

函数的参数可以是函数

比如 sort 的参数是 compareNumber。

函数的返回值可以是参数

一个例子如下：

function createComparer(greater: boolean = false) {return greater ? (a: number, b: number) => b - a : (a: number, b: number) => a - b
}let a = [5, 2, 1, 6, 8, 10, 5, 25, 16, 23, 11]
a.sort(createComparer())
console.log(a)

lambda 表达式

上述 compareNumber 函数更简单的写法如下：

let compareNumber = (a: number, b: number) => a - b

它是 lambda 表达式，在 TypeScript / JavaScript 中也被称为箭头函数。

一个快速实现排序的方法是：

a.sort((a: number, b: number) => a - b)

=>后面可以像函数体一样使用{ ... }包裹，但此时必须有返回值。

高阶函数

高阶函数指的就是返回值是函数的函数，这个概念类似于函数的叠加与嵌套。一个例子如下：

function loggingComparer(comp: (a: number, b: number) => number) {return (a: number, b: number) => {  // 对作为参数的函数进行包装console.log('comparing', a, b)  // 首先打印 logreturn comp(a, b)               // 再调用作为参数传入的函数}                                   // 看起来很像 Python 的 decorator
}

函数的闭包

在上述高阶函数 loggingComparer 的基础上，我们希望知道排序函数总共进行了多少次比较操作。可以通过函数的闭包（而不是设置全局变量）来实现上述功能。（使用全局变量的缺点在于全局变量或对象的状态字段需要维护，此外，打印同样改变了前端 UI 元素的状态，它同样也是一个副作用，我们应该尽可能地减少副作用，以提高用户体验）

一个函数闭包的例子如下，在下述代码片段中，函数 processArray 当中的局部函数 logger 和变量 compCount 是一个闭包，compCount 是它所携带的自由变量：

function loggingComparer(logger: (a: number, b: number) => void, comp: (a: number, b: number) => number) {return (a: number, b: number) => {  logger(a, b)  return comp(a, b)               }                                   
}function createComparer(params: {greater: boolean}) {return params.greater ? (a: number, b: number) => b - a : (a: number, b: number) => a - b
}let compareNumber = (a: number, b: number) => a - bfunction processArray(a: number[]) {let compCount = 0const logger = (a: number, b: number) => {console.log('comparing', a, b)compCount ++	}const comp = createComparer({greater: false})a.sort(loggingComparer(logger, comp))return compCount
}let a = [5, 2, 1, 6, 8, 10, 5, 25, 16, 23, 11]const compCount = processArray(a)
console.log(a)
console.log('Compare Count: ', compCount)

在上述例子中，随着 processArray 函数调用的结束，logger 函数也随之结束，compCount 作为返回值返回。但是如果 processArray 函数调用结束时，其内部的闭包由于某种原因尚未停止运行（比如一个线程），那么其所携带的自由变量的生命周期将会超越该函数的局部作用域。

部分应用函数

基于闭包可以实现部分应用函数。

一个部分应用的例子如下：

const a = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(a.filter((v) => v % 2 == 0))
// out
[LOG]: [2, 4, 6, 8] 

一个等价的实现如下：

function isGoodNumber(goodFactor: number, v: number) {return v % goodFactor === 0
}function filterArray(a: number[], f: (v: number) => boolean) {return a.filter(f)
}const GOOD_FATOR = 2const a = [1, 2, 3, 4, 5, 6, 7, 8, 9]console.log(filterArray(a, (v) => isGoodNumber(GOOD_FATOR, v)))