6 第4章:函数
6.1 🎯 学习目标
- 掌握函数的定义与调用方式
- 理解参数与返回值的各种形式
- 熟练使用箭头函数
- 掌握高阶函数的使用
6.2 4.1 函数定义与调用
6.2.1 📝 函数的基本定义
函数是执行特定任务的代码块。ArkTS中定义函数的主要方式:
// 方式一:函数声明(推荐)
function greet(name: string): string {
return 'Hello, ' + name + '!'
}
// 方式二:函数表达式
const greet2 = function(name: string): string {
return 'Hello, ' + name + '!'
}
// 方式三:箭头函数(ES6+)
const greet3 = (name: string): string => {
return 'Hello, ' + name + '!'
}6.2.2 📞 函数调用
// 基本调用
let result: string = greet('张三')
console.log(result) // 输出:Hello, 张三!
// 调用函数表达式
let result2: string = greet2('李四')
console.log(result2) // 输出:Hello, 李四!
// 调用箭头函数
let result3: string = greet3('王五')
console.log(result3) // 输出:Hello, 王五!命名规则:
函数名应使用驼峰命名法(camelCase),以小写字母开头: - ✅ calculateSum、getUserInfo、renderView - ❌ CalculateSum、getuserinfo、Render_View
6.3 4.2 参数
6.3.1 🔢 必选参数与可选参数
// 必选参数(调用时必须提供)
function add(x: number, y: number): number {
return x + y
}
add(10, 20) // ✅ 正确
// add(10) // ❌ 错误:缺少参数
// 可选参数(使用 ? 标记)
function greet(name: string, greeting?: string): string {
if (greeting) {
return greeting + ', ' + name + '!'
}
return 'Hello, ' + name + '!'
}
console.log(greet('张三')) // Hello, 张三!
console.log(greet('张三', '你好')) // 你好, 张三!6.3.2 📋 默认参数
// 默认参数(使用 = 指定默认值)
function multiply(x: number, y: number = 1): number {
return x * y
}
console.log(multiply(5)) // 5(y使用默认值1)
console.log(multiply(5, 3)) // 15(y被覆盖为3)
// 默认参数通常放在参数列表末尾
function createUser(name: string, age: number = 18, city: string = '北京'): object {
return { name, age, city }
}
console.log(createUser('张三')) // {name:'张三', age:18, city:'北京'}
console.log(createUser('李四', 25)) // {name:'李四', age:25, city:'北京'}
console.log(createUser('王五', 30, '上海')) // {name:'王五', age:30, city:'上海'}6.3.3 📦 剩余参数
剩余参数允许将不定数量的参数收集到一个数组中。
// 剩余参数(使用 ... 语法)
function sum(...numbers: number[]): number {
let total: number = 0
for (let num of numbers) {
total += num
}
return total
}
console.log(sum(1, 2, 3)) // 6
console.log(sum(1, 2, 3, 4, 5)) // 15
// 剩余参数与普通参数结合
function greetWithTitle(title: string, ...names: string[]): void {
for (let name of names) {
console.log(title + ' ' + name)
}
}
greetWithTitle('Mr.', '张三', '李四', '王五')
// 输出:
// Mr. 张三
// Mr. 李四
// Mr. 王五6.4 4.3 返回值
6.4.1 🔙 返回基本类型
// 返回 number 类型
function square(x: number): number {
return x * x
}
// 返回 string 类型
function fullName(first: string, last: string): string {
return first + ' ' + last
}
// 返回 boolean 类型
function isEven(n: number): boolean {
return n % 2 === 0
}6.4.2 🔙 返回对象与数组
// 返回对象
function createPoint(x: number, y: number): { x: number, y: number } {
return { x, y }
}
let p = createPoint(3, 4)
console.log(p.x, p.y) // 3, 4
// 返回数组
function getNumbers(): number[] {
return [1, 2, 3, 4, 5]
}
// 返回元组
function getMinMax(arr: number[]): [number, number] {
let min: number = Math.min(...arr)
let max: number = Math.max(...arr)
return [min, max]
}
let result = getMinMax([3, 1, 4, 1, 5, 9])
console.log(result) // [1, 9]6.4.3 🚫 无返回值(void)
// void 表示函数没有返回值
function logMessage(message: string): void {
console.log(message)
// 不需要 return 语句
}
// 也可以显式 return,但不返回具体值
function doSomething(): void {
console.log('Doing something...')
return // 允许,但不返回任何值
}🎮 互动演示:函数参数与返回值
尝试不同的参数组合,观察函数返回值的变化:
6.5 4.4 箭头函数
箭头函数是ES6引入的简洁函数写法,在ArkTS/TypeScript中广泛使用。
6.5.1 🏹 基本语法
// 传统函数
function double1(x: number): number {
return x * 2
}
// 箭头函数(完整写法)
const double2 = (x: number): number => {
return x * 2
}
// 箭头函数(省略写法:单行可省略 return 和 {})
const double3 = (x: number): number => x * 2
// 无参数
const getRandom = (): number => Math.random()
// 一个参数(可省略括号)
const increment = (x: number): number => x + 1
// 多个参数
const add = (x: number, y: number): number => x + y6.5.2 🔗 箭头函数与数组方法
箭头函数常与数组方法结合使用:
let numbers: number[] = [1, 2, 3, 4, 5]
// map:转换每个元素
let doubled: number[] = numbers.map(x => x * 2)
console.log(doubled) // [2, 4, 6, 8, 10]
// filter:过滤元素
let evens: number[] = numbers.filter(x => x % 2 === 0)
console.log(evens) // [2, 4]
// reduce:累积计算
let sum: number = numbers.reduce((acc, curr) => acc + curr, 0)
console.log(sum) // 15
// find:查找第一个符合条件的元素
let firstEven: number | undefined = numbers.find(x => x % 2 === 0)
console.log(firstEven) // 2
// some:检查是否有元素符合条件
let hasEven: boolean = numbers.some(x => x % 2 === 0)
console.log(hasEven) // true
// every:检查是否所有元素都符合条件
let allEven: boolean = numbers.every(x => x % 2 === 0)
console.log(allEven) // false6.6 4.5 高阶函数
高阶函数是接受函数作为参数或返回函数的函数。
6.6.1 📥 函数作为参数
// 接受回调函数的高阶函数
function processArray(arr: number[], callback: (x: number) => number): number[] {
return arr.map(callback)
}
let numbers: number[] = [1, 2, 3, 4, 5]
let result: number[] = processArray(numbers, x => x * x)
console.log(result) // [1, 4, 9, 16, 25]
// 实用案例:防抖函数
function debounce(func: Function, delay: number): Function {
let timer: number | undefined
return function(...args: any[]) {
clearTimeout(timer)
timer = setTimeout(() => func(...args), delay)
}
}6.6.2 📤 函数作为返回值
// 返回一个函数
function createMultiplier(factor: number): (x: number) => number {
return (x: number): number => x * factor
}
let double = createMultiplier(2)
let triple = createMultiplier(3)
console.log(double(5)) // 10
console.log(triple(5)) // 15
// 闭包示例
function createCounter(): () => number {
let count: number = 0
return (): number => {
count++
return count
}
}
let counter = createCounter()
console.log(counter()) // 1
console.log(counter()) // 2
console.log(counter()) // 3🎮 互动练习:高阶函数应用
使用高阶函数处理数据:
// 原始数据
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
6.7 📝 本章小结
本章我们学习了ArkTS中的函数:
- 函数定义:三种方式(函数声明、函数表达式、箭头函数)
- 参数:必选参数、可选参数、默认参数、剩余参数
- 返回值:基本类型、对象/数组、void(无返回值)
- 箭头函数:简洁语法,常与数组方法结合使用
- 高阶函数:函数作为参数或返回值,实现更灵活的代码
6.8 ✏️ 练习
- 编写一个函数
factorial(n: number): number,计算 n 的阶乘 - 使用箭头函数和数组方法,将数组
[1,2,3,4,5]转换为[2,4,6,8,10] - 创建一个高阶函数
createGreeting(prefix: string),返回一个可以添加前缀的问候函数 - 使用
reduce方法计算数组[10, 20, 30, 40, 50]中所有元素的和与平均值