【前端，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) + d
    for(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)  // 首先打印 log
        return 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 - b

function processArray(a: number[]) {
    let compCount = 0
    const 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 = 2

const a = [1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(filterArray(a, (v) => isGoodNumber(GOOD_FATOR, v)))