6. TypeScript 函数基础

6.1 概述

所谓函数，就是声明一次但却可以调用任意多次的一段代码。
意义：实现代码复用，提升开发效率。
封装：将一段代码包装起来，隐藏细节。
例如：

function getSum(nums: number[]) {
	let sum: number = 0
		for (let i: number = 0; i < nums.length; i++) {
		sum += nums[i]
	}
	console.log(sum)
}
getSum(nums1) // 计算nums1中所有元素的和
getSum(nums2) // 计算nums2中所有元素的和

6.2 函数的使用

函数的使用分为两步：1 声明函数 2 调用函数 （类比变量）。

• 第一步：声明函数

function 函数名称() {
	函数体
}

解释：
    函数名称：推荐以动词开头，因为函数表示做一件事情，实现一个功能。
    函数体：表示要实现功能的代码，复用的代码。

function sing() {

}

• 第二步：调用函数

函数名称()

比如，调用 sing 函数：

sing()

注意：只有调用函数后，函数中的代码才会执行。

总结：
1.函数的基本使用分为哪两步？ 1 声明函数  2 调用函数
2.声明函数的关键字是什么？function
3.不调用函数，函数中的代码会执行吗？不会

// 1 声明函数
function sing() {
	console.log('五环之歌')
}
// 2 调用函数
sing()

6.3 函数参数

6.3.1 概述

需求：让唱歌的函数（sing），每次调用时，“唱”不同的歌。

function sing() {
	console.log('五环之歌')
}
sing() // 五环之歌
sing() // 五环之歌

原因：函数（sing）中歌曲名称是固定值。
存在的问题：函数（sing）只能“唱”固定的歌，太死板，没有体现出函数复用的灵活性。

使用函数参数来实现： 调用函数时，告诉函数要唱

// 调用函数时，告诉函数要唱的歌曲名称
sing('五环之歌')
sing('探清水河')
// 声明函数时，接收传入的歌曲名称
function sing(songName: string) {
	console.log(songName)
}

函数（sing）中歌曲名称：固定值 -> 动态传入的值。
函数参数的作用：增加了函数的灵活性、通用性，针对相同的功能，能够适应更多的数据（值）。

6.3.2 形参和实参

函数参数分为两部分：1 形参 2 实参。

1.形参：声明函数时指定的参数，放在声明函数的小括号中（挖坑）。

function sing(songName: string) { }

• 语法：形参名称: 类型注解，类似于变量声明，但是没有赋值。
• 作用：指定函数可接收的数据。
  然后，就可以在函数体中，像使用变量一样使用形参了。

2.实参：调用函数时传入的参数，放在调用函数的小括号中（填坑）。

sing('五环之歌')

• 实参是一个具体的值（比如：‘字符串’、18、[]等），用来赋值给形参。

形参和实参的总结：

• 声明函数时的参数，叫什么？作用？ 形参，指定函数能够接收什么数据。
• 调用函数时的参数，叫什么？作用？实参，是一个具体的值，用来赋值给形参。

function sing(songName: string) { }

sing('五环之歌')

通过形参和实参的配合，函数可以接收动态数据，从而让函数变得更加灵活、强大。

6.3.3 其他说明

• 1.根据具体的功能，函数参数可以有多个，参数之间使用逗号（,）来分隔。

function fn(name: string, age: number) { }
fn('刘老师', 18)

• 2.实参和形参按照顺序，一一对应。

function fn(name: string, age: number) { }
fn('刘老师', 18) // name -> '刘老师', age -> 18

• 3.实参必须符合形参的类型要求，否则会报错！

function sing(songName: string) {}
sing(18) // 报错！ 形参要求是 string 类型，但是，实参是 number 类型。

技巧：调用函数时，鼠标放在函数名称上，会显示该函数的参数以及类型。

6.4 函数返回值

6.4.1 概述

函数返回值的作用：将函数内部计算的结果返回，以便于使用该结果继续参与其他的计算。

需求：计算以下两次调用结果的和。

getSum([1, 3, 5])// 9
getSum([10, 100, 1000]) // 1110

getSum([1, 3, 5]) + getSum([10, 100, 1000]) // 9 + 1110 => 1119

关键点：拿到函数（getSum）内部计算出来的结果，然后，才能进行后续的加法计算。
注意：如果没有指定函数的返回值，那么，函数返回值的默认类型为 void（空，什么都没有）。

6.4.2 基本使用

步骤：1 指定返回值类型 2 指定返回值

• 1.指定返回值类型

function fn(): 类型注解 {

}

在声明函数的小括号后面，通过 : 类型注解 指定。

function fn(): number {

}

• 2.指定返回值

function fn(): 类型注解 {
	return 返回值
}

• 在函数体中，使用 return 关键字来返回函数执行的结果。

function fn(): number {
	return 18
}

• 注意：返回值必须符合返回值类型的类型要求，否则会报错！