4、ArkTS语言基础(下):掌握函数定义、箭头函数、数组与对象的操作,理解模块化与导入导出
好,咱们接着聊。上一节我们把 ArkTS 的类型系统、变量声明和条件循环捋了一遍。这一节,我带你看看真正让代码“活”起来的东西——函数、数组、对象,还有模块化。
说实话,这些概念在 JavaScript/TypeScript 里都有,但 ArkTS 做了一些“收紧”。嗯,说白了就是更严格了。我刚开始从 TS 切到 ArkTS 时,也踩过几个坑。今天我把这些经验都摊开给你看。
4.1 函数定义:从基础到进阶
函数是代码的“积木块”。ArkTS 的函数定义,我个人习惯用 function 关键字,清晰明了。
// 基础函数
function greet(name: string): string {
return `你好,${name}!`;
}
// 调用
let message: string = greet("张三");
console.log(message); // 输出:你好,张三!
这里有个细节:参数和返回值必须标注类型。ArkTS 不像 JS 那么“随意”,它要求你明确告诉编译器“我要什么类型”。
4.1.1 可选参数与默认参数
实际开发中,有些参数不是每次都需要传。ArkTS 支持可选参数和默认参数。
// 可选参数(用 ? 标记)
function buildUser(name: string, age?: number): string {
if (age !== undefined) {
return `${name} 今年 ${age} 岁`;
}
return `${name} 年龄未知`;
}
// 默认参数
function createLogger(prefix: string = "LOG"): void {
console.log(`[${prefix}] 消息已记录`);
}
我在项目中遇到过一个问题:可选参数如果放在必选参数前面,编译器会报错。你想想看,这其实很合理——你总不能跳过前面的参数去传后面的吧?
4.1.2 函数类型与回调
函数也可以作为“值”传来传去。这在事件处理、异步回调里特别常见。
// 定义函数类型
type Callback = (result: string) => void;
// 使用函数类型
function fetchData(url: string, onSuccess: Callback): void {
// 模拟网络请求
let data = "模拟数据";
onSuccess(data);
}
// 调用
fetchData("https://api.example.com", (data) => {
console.log("收到数据:", data);
});
Function 这个类型。你必须显式定义参数和返回值的结构。这是为了类型安全。
4.2 箭头函数:简洁与 this 的奥秘
箭头函数是 ES6 引入的语法糖,ArkTS 完全支持。它的写法更简洁,但更重要的是——它不绑定自己的 this。
// 传统函数
let add1 = function(a: number, b: number): number {
return a + b;
};
// 箭头函数
let add2 = (a: number, b: number): number => a + b;
// 如果函数体只有一行,可以省略 return 和花括号
let double = (x: number): number => x * 2;
为什么会这样?箭头函数的 this 指向定义时的上下文,而不是调用时的上下文。我曾经在写 UI 事件处理时,因为用了传统函数,this 指向了 DOM 元素,结果死活拿不到组件实例。换成箭头函数,问题瞬间解决。
class Counter {
count: number = 0;
// 传统函数:this 可能丢失
incrementTraditional(): void {
// 这里的 this 可能不是 Counter 实例
this.count++;
}
// 箭头函数:this 永远指向 Counter 实例
incrementArrow = (): void => {
this.count++;
}
}
this 的指向,优先使用箭头函数。尤其是在回调、事件监听里。
4.3 数组操作:增删改查与高阶函数
数组是日常开发中使用频率最高的数据结构之一。ArkTS 的数组类型是 Array<T> 或 T[]。
// 声明数组
let fruits: string[] = ["苹果", "香蕉", "橘子"];
let numbers: Array<number> = [1, 2, 3, 4, 5];
// 增
fruits.push("葡萄"); // 末尾添加
fruits.unshift("草莓"); // 开头添加
// 删
fruits.pop(); // 删除末尾
fruits.shift(); // 删除开头
fruits.splice(1, 1); // 从索引1开始删除1个元素
// 改
fruits[0] = "西瓜";
// 查
let index = fruits.indexOf("香蕉");
let hasApple = fruits.includes("苹果");
4.3.1 高阶函数:map、filter、reduce
这些函数是函数式编程的利器。说白了,就是让你用更少的代码做更多的事。
let scores: number[] = [85, 92, 78, 95, 88];
// map:转换每个元素
let gradeLevels: string[] = scores.map(score => {
if (score >= 90) return "优秀";
if (score >= 80) return "良好";
return "及格";
});
// 结果:["良好", "优秀", "及格", "优秀", "良好"]
// filter:筛选元素
let highScores: number[] = scores.filter(score => score >= 90);
// 结果:[92, 95]
// reduce:累积计算
let totalScore: number = scores.reduce((acc, score) => acc + score, 0);
// 结果:438
map 里直接修改原数组,导致数据混乱。记住:map 返回新数组,forEach 才适合做副作用操作。
4.4 对象操作:接口与类型别名
ArkTS 中,对象通常配合接口(Interface)或类型别名(Type Alias)使用。这比纯 JS 的对象要严谨得多。
// 定义接口
interface User {
id: number;
name: string;
email?: string; // 可选属性
readonly createdAt: Date; // 只读属性
}
// 创建对象
let user: User = {
id: 1,
name: "李四",
email: "lisi@example.com",
createdAt: new Date()
};
// 访问属性
console.log(user.name); // 李四
console.log(user["id"]); // 1
// 修改属性
user.name = "王五";
// user.createdAt = new Date(); // 错误!只读属性不能修改
4.4.1 解构赋值
解构赋值能让你从对象或数组中快速提取数据。我特别喜欢这个语法,代码瞬间清爽很多。
// 对象解构
let person = { name: "赵六", age: 25, city: "北京" };
let { name, age } = person;
console.log(name, age); // 赵六 25
// 数组解构
let colors = ["红", "绿", "蓝"];
let [first, second] = colors;
console.log(first, second); // 红 绿
// 剩余参数
let [head, ...tail] = colors;
console.log(head, tail); // 红 ["绿", "蓝"]
4.5 模块化与导入导出
模块化是大型项目的基石。ArkTS 遵循 ES Module 规范,用 export 和 import 来组织代码。
4.5.1 导出方式
// mathUtils.ts
// 命名导出
export function add(a: number, b: number): number {
return a + b;
}
export const PI = 3.14159;
// 默认导出
export default class Calculator {
multiply(a: number, b: number): number {
return a * b;
}
}
4.5.2 导入方式
// main.ts
// 导入命名导出
import { add, PI } from './mathUtils';
// 导入默认导出
import Calculator from './mathUtils';
// 导入所有
import * as MathUtils from './mathUtils';
// 使用
console.log(add(2, 3)); // 5
console.log(PI); // 3.14159
let calc = new Calculator();
console.log(calc.multiply(4, 5)); // 20
export default。命名导出可以有多个。我见过有人把默认导出和命名导出混用,结果导入时搞混了。建议:工具类函数用命名导出,主类用默认导出。
4.6 本章知识体系
下面这张图,是我为你梳理的本章核心脉络。你可以把它当作一张“地图”,随时回来查阅。
好了,这一节的内容就到这里。函数、箭头函数、数组、对象、模块化——这些是 ArkTS 开发中的“日常工具”。你不需要一次性记住所有细节,但一定要理解它们的设计思路。写代码时多想想:“这个场景用箭头函数合适吗?”“这个数据用 map 处理是不是更优雅?”
慢慢来,多写几遍就熟了。