5  第4章:函数

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),以小写字母开头: - ✅ calculateSumgetUserInforenderView - ❌ CalculateSumgetuserinfoRender_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 + y

6.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)  // false

6.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中的函数:

  1. 函数定义:三种方式(函数声明、函数表达式、箭头函数)
  2. 参数:必选参数、可选参数、默认参数、剩余参数
  3. 返回值:基本类型、对象/数组、void(无返回值)
  4. 箭头函数:简洁语法,常与数组方法结合使用
  5. 高阶函数:函数作为参数或返回值,实现更灵活的代码

6.8 ✏️ 练习

  1. 编写一个函数 factorial(n: number): number,计算 n 的阶乘
  2. 使用箭头函数和数组方法,将数组 [1,2,3,4,5] 转换为 [2,4,6,8,10]
  3. 创建一个高阶函数 createGreeting(prefix: string),返回一个可以添加前缀的问候函数
  4. 使用 reduce 方法计算数组 [10, 20, 30, 40, 50] 中所有元素的和与平均值

6.9 📚 参考资料