当前位置：首页 > news >正文

鸿蒙移动应用开发--ArkTS语法进阶实验

news 2025/5/10 16:11:37

任务一：使用“展开运算符 ...”对自行建立的两个数组实现合并。

1、定义两个数组：

在代码中定义两个数组 array1 和 array2，分别包含一些元素。
例如：array1 = [1, 2, 3] 和 array2 = [4, 5, 6]。

2、使用展开运算符合并数组：

使用展开运算符 ... 将两个数组的元素展开并合并到一个新的数组 combinedArray 中。
代码示例：let combinedArray = [...array1, ...array2];

3、输出合并后的数组：

使用 console.log 输出合并后的数组，验证结果是否正确。
预期输出：[1, 2, 3, 4, 5, 6]。

源代码

// 任务一：合并数组
let array1 = [1, 2, 3]
let array2 = [4, 5, 6]
console.log('原始数组1：',(array1).toString())
console.log('原始数组2：',(array2).toString())
let combinedArray = [...array1, ...array2] // 使用展开运算符合并数组
console.log('合并数组：',(combinedArray).toString())// 输出：[1, 2, 3, 4, 5, 6]
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {RelativeContainer() {Text(this.message).id('HelloWorld').fontSize($r('app.float.page_text_font_size')).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }}).onClick(() => {this.message = 'Welcome';})}.height('100%').width('100%')}
}

运行截图：

任务二：使用“剩余参数”实现多个（数量不限）整数相加求和。

1、定义求和函数：

使用剩余参数 ...numbers 定义一个函数 sum，该函数接受任意数量的整数参数。
例如：const sum = (...numbers: number[]): number => { ... };

2、实现求和逻辑：

使用数组的 reduce 方法对传入的参数进行累加求和。
代码示例：return numbers.reduce((acc, num) => acc + num, 0);

3、调用函数并输出结果：

调用 sum 函数，传入多个整数参数，并使用 console.log 输出结果。
例如：console.log(sum(1, 2, 3, 4, 5));

源代码：

// 任务二：使用剩余参数实现求和
const sum = (...numbers: number[]): number => {return numbers.reduce((acc, num) => acc + num, 0);
};
console.log('剩余参数实现求和:',(sum(1, 2, 3, 4, 5)).toString()); // 输出：15
console.log('剩余参数实现求和:',(sum(10, 20, 30)).toString()); // 输出：60
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {RelativeContainer() {Text(this.message).id('HelloWorld').fontSize($r('app.float.page_text_font_size')).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }}).onClick(() => {this.message = 'Welcome';})}.height('100%').width('100%')}
}

运行截图：

任务三：创建一个class 类，使用“extends”实现子类继承父类，使用“readonly”“private”“protected”“public”这四个修饰符，体会类的访问权限。

1、定义父类：

创建一个父类 Parent，包含以下成员：
1. public 成员变量 name：可以在类外部访问。
2. protected 成员变量 age：只能在类内部和子类中访问。
3. private 成员变量 gender：只能在类内部访问。
4. readonly 成员变量 role：只读属性，初始化后不可修改。

定义构造函数初始化这些成员变量。
定义 public 方法 displayInfo，用于输出基本信息。
定义 protected 方法 displayProtectedInfo，用于输出受保护的信息。
定义 private 方法 displayPrivateInfo，用于输出私有信息。

2、定义子类：

创建一个子类 Child，继承父类 Parent。
在子类中调用父类的构造函数，并尝试访问父类的成员变量和方法。
定义一个 public 方法 displayChildInfo，用于调用父类的 public 和 protected 方法。

3、测试类的继承和访问权限：

创建父类和子类的实例。
调用父类和子类的方法，验证访问权限是否符合预期。
使用 console.log 输出结果。

源代码：

// 父类
class Parent {public name: string;protected age: number;private gender: string;readonly role: string;constructor(name: string, age: number, gender: string, role: string) {this.name = name;this.age = age;this.gender = gender;this.role = role;}public displayInfo() {console.log(`Name: ${this.name}, Age: ${this.age}, Role: ${this.role}`);}protected displayProtectedInfo() {console.log(`Protected Info: ${this.age}`);}private displayPrivateInfo() {console.log(`Private Info: ${this.gender}`);}
}
// 子类
class Child extends Parent {constructor(name: string, age: number, gender: string, role: string) {super(name, age, gender, role);}public displayChildInfo() {this.displayInfo(); // 可以访问父类的 public 方法this.displayProtectedInfo(); // 可以访问父类的 protected 方法// this.displayPrivateInfo(); // 无法访问父类的 private 方法}
}
// 任务三：测试类的继承和访问权限
let parent = new Parent('John', 30, 'Male', 'Developer');
let child = new Child('Alice', 25, 'Female', 'Designer');
parent.displayInfo(); // 输出：Name: John, Age: 30, Role: Developer
child.displayChildInfo(); // 输出：Name: Alice, Age: 25, Role: Designer
// child.displayProtectedInfo(); // 错误：无法直接访问父类的 protected 方法
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {RelativeContainer() {Text(this.message).id('HelloWorld').fontSize($r('app.float.page_text_font_size')).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }}).onClick(() => {this.message = 'Welcome';})}.height('100%').width('100%')}
}

运行截图：