HarmonyOS NEXT鸿蒙开发 ArkTS：箭头函数

作者：马育民 • • 阅读：10055

介绍

箭头函数（Arrow Function）是一种简洁的函数定义方式，语法比传统函数更紧凑。它在鸿蒙应用开发中被广泛用于回调函数、事件处理等场景。

应用场景

  • 作为回调函数，如：事件、定时器、数组方法中使用箭头函数，避免 this 指向问题
  • 异步操作
  • 简单的单行逻辑（函数中只有一行代码），适合用箭头函数简化代码

箭头函数通过简洁的语法和稳定的 this 绑定，成为 ArkTS 开发中处理回调场景的理想选择。

基本语法

注意：要将箭头函数 赋值 给 变量 或 常量，否则无法调用

形式一

(参数:类型) => 表达式

形式二

(参数:类型) => {
    代码块
}

箭头函数的写法

  1. 只有一个参数，() 可以 省略（没有参数 或 多个参数，不能省略）
  2. {} 中只有一行代码，{} 可省略
  3. {} 中只有一行代码，而是是 return ，{} 和 return 可以省略

例子：没有形参，{}中只有一条语句

  • 没有形参，() 不可省略
  • {}中只有一条语句，{} 可以省略

普通函数：

function test():number {
  return 10
}

let res = test()
console.log("res="+res)

箭头函数：

// 没有形参，不可省略 ()
// 同时省略{} 和 return，自动将该行代码的结果返回
let test2 = () => 10

let res2=test2()
console.log("res2="+res2)

例子：只有一个形参，{}中有一条语句

  • 只有一个形参，() 可省略
  • {}中只有一条语句，{} 可以省略

普通函数：

function test(a:number):number {
  return a*2
}

let res:number=test(3)
console.log("res="+res)

箭头函数：

// 因为这里无法推断出形参 a 的类型，所以不能省略()。最为回调函数时，可以推断出类型，就可省略()
// 同时省略{} 和 return，自动将该行代码的结果返回
let test2 = (a:number) => a*2

let res2:number = test2(3)
console.log("res2="+res2)

例子：多个参数，{}中有多条语句

  • 多个形参，() 不可省略
  • {} 中有多条语句，{} 不可省略

普通函数：

function add(a:number,b:number):number {
  console.log("a="+a)
  console.log("b="+b)
  return a+b
}

let res:number = add(1,2)
console.log("res="+res)

箭头函数：

// 多个形参，不可省略()
// {}中有多行代码，不可省略{}
let add2 = (a:number,b:number) => {
  console.log("a="+a)
  console.log("b="+b)
  return a+b
}

let res:number = add2(1,2)
console.log("res="+res)

其他限制

  • 不能用作构造函数（不能用 new 调用）
  • 没有 arguments 对象（可使用剩余参数 ...args 替代）
  • 不能使用 yield（不能作为生成器函数）

在鸿蒙开发中的常见应用

事件处理

在 UI 组件的事件回调中常用箭头函数，确保 this 指向组件实例：

@Entry
@Component
struct ArrowFuncDemo {
  @State count: number = 0;

  build() {
    Column() {
      Text(`计数: ${this.count}`)
        .fontSize(20)
        .margin(10)

      Button("增加")
        .onClick(() => {
          // 箭头函数中 this 指向组件实例
          this.count++;
        })
        .padding(10)
    }
  }
}

数组方法回调

与数组的 map、forEach 等方法结合，简化代码：

const numbers: number[] = [1, 2, 3, 4, 5];

// 使用箭头函数简化 map 回调
const squared = numbers.map(num => num * num);
console.log(squared); // 输出：[1,4,9,16,25]

// 使用箭头函数简化 forEach 回调
numbers.forEach((num, index) => {
  console.log(`索引 ${index}: ${num}`);
});

异步操作

在 Promise 或异步处理中使用，保持上下文：

class DataLoader {
  data: string = "";

  loadData() {
    // 模拟异步加载数据
    return new Promise<string>((resolve) => {
      setTimeout(() => {
        resolve("加载完成的数据");
      }, 1000);
    });
  }

  handleLoad() {
    this.loadData().then((result) => {
      // 箭头函数确保 this 指向 DataLoader 实例
      this.data = result;
      console.log("数据已更新:", this.data);
    });
  }
}

const loader = new DataLoader();
loader.handleLoad(); // 1秒后输出：数据已更新: 加载完成的数据

原文出处：/show_1GW1wiYlzaf8.html

吉ICP备15003043号