2024年HarmonyOS鸿蒙最新【HarmonyOS(ArkTS)学习笔记-3】认识ArkTS语言(1)，2024年最新字节跳动算法面经

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

notSure = ‘maybe a string instead’;
notSure = false;

##### 2.1.8 void


当一个**函数没有返回值**时，你通常会见到其返回值类型是**void**。

function test():void{
console.log(‘This is function is void’);
}

##### 2.1.9 null和undefined


TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。

let u:undefined = undefined;
let n:null = null;

##### 2.1.10 联合类型


联合类型（union types）表示**取值可以为多种类型中的一种**。

let myFavouriteNumber:string|number;
myFavouriteNumber = ‘seven’;
myFavouriteNumber = 7;

#### 2.2 条件语句


条件语句用于基于不同的条件来执行不同的动作。TypeScript条件语句是通过一条或多条语句的执行结果（true或false）来决定执行的代码块。


##### 2.2.1 if语句

let num:number = 5;
if(num>0){
console.log(‘数字是正数’);
}

##### 2.2.2 if...else语句

let num:number = 12;
if(num%2==0){
console.log(‘偶数’);
}else{
console.log(‘奇数’);
}

##### 2.2.3 if...else if...else语句

let num:number = 5;
if(num>0){
console.log(num + ‘是正数’);
}else if(num<0){
console.log(num + ‘是负数’);
}else{
console.log(num + ‘为0’);
}

除了可以通过if...else语句进行条件判断外，还可以通过switch...case语句进行条件判断。


##### 2.2.4 switch...case语句


一个switch语句允许测试一个变量等于多个值时的情况。每个值称为一个case，且被测试的变量会对每个switch case进行检查。

var grade:string = ‘A’;
switch(grade){
case’A’:{
console.log(‘优’);
break;
}
case’B’:{
console.log(‘良’);
break;
}
case’C’:{
console.log(‘及格’);
break;
}
case’D’:{
console.log(‘不及格’);
break;
}
default:{
console.log(‘非法输入’);
break;
}
}

#### 2.3 函数


##### 2.3.1 函数


函数是一组一起执行一个任务的语句，函数声明要告诉编译器函数的名称、返回类型和参数。TypeScript可以创建 **有名字的函数** 和 **匿名函数**，其创建方法如下：

//有名函数
function add(x,y){
return x+y;
}
//匿名函数
let myAdd = function(x,y){
return x+y;
};

##### 2.3.2 为函数定义类型


为了确保输入输出的准确性，我们可以为上面那个函数添加类型

//有名函数：给变量设置为number类型
function add(x:number,y:number):number{
return x+y;
}
//匿名函数：给变量设置为number类型
let myAdd = function(x:number,y:number):number{
return x+y;
};

##### 2.3.3 函数的可选参数


在TypeScript里我们可以在 **参数名旁使用（?）实现可选参数的功能**。比如，我们想让lastName是可选的：

function buildName(firstName:string,lastName?:string){
if(lastName){
return firstName + ‘’ + lastName;
}else{
return firstName;
}
}
let result1 = buildName(‘Bob’);
let result2 = buildName(‘Bob’,‘Adams’);

##### 2.3.4 函数的剩余参数


剩余参数会被当做 **个数不限的可选参数**。 可以一个都没有，同样也可以有任意个。 可以使用省略号（ ...）进行定义：

function getEmployeeName(firstName: string, …restOfName: string[]) {
 return firstName + ’ ’ + restOfName.join(’ ');
}
​
let employeeName = getEmployeeName(‘Joseph’, ‘Samuel’, ‘Lucas’, ‘MacKinzie’);

##### 2.3.5 箭头函数


ES6版本的TypeScript提供了一个箭头函数，它是 **定义匿名函数的简写语法**，用于函数表达式，它省略了function关键字。箭头函数的定义如下，其函数是一个语句块：

( [param1, parma2,…param n] )=> {
   // 代码块
}

其中，**括号内是函数的入参**，可以有0到多个参数，**箭头后是函数的代码块**。我们可以将这个箭头函数赋值给一个变量，如下所示：

let arrowFun = ( [param1, parma2,…param n] )=> {
   // 代码块
}

如何要主动调用这个箭头函数，可以按如下方法去调用：

arrowFun(param1, parma2,…param n)

接下来我们看看如何将我们 **熟悉的函数定义方式转换为箭头函数**。我们可以定义一个判断正负数的函数，如下：

function testNumber(num: number) {
 if (num > 0) {
   console.log(num + ’ 是正数’);
} else if (num < 0) {
   console.log(num + ’ 是负数’);
} else {
   console.log(num + ’ 为0’);
}
}

其调用方法如下：

testNumber(1)   //输出日志：1 是正数

如果将这个函数定义为**箭头函数**，定义如下所示：

let testArrowFun = (num: number) => {
 if (num > 0) {
   console.log(num + ’ 是正数’);
} else if (num < 0) {
   console.log(num + ’ 是负数’);
} else {
   console.log(num + ’ 为0’);
}
}

其调用方法如下：

testArrowFun(-1)   //输出日志：-1 是负数

后面，我们在学习**HarmonyOS应用开发时会经常用到箭头函数**。例如，给一个按钮添加点击事件，其中onClick事件中的函数就是箭头函数。

Button(“Click Now”)
.onClick(() => {
   console.info(“Button is click”)
})

#### 2.4 类


TypeScript支持**基于类的面向对象**的编程方式，定义类的**关键字为 class**，后面**紧跟类名**。**类描述了所创建的对象共同的属性和方法**。


##### 2.4.1 类的定义


例如，我们可以声明一个Person类，这个类有3个成员：一个是**属性（包含name和age)**，一个是**构造函数**，一个是**getPersonInfo方法**，其定义如下所示。

class Person {
 private name: string
 private age: number
​
 constructor(name: string, age: number) {
   this.name = name;
   this.age = age;
}
​
 public getPersonInfo(): string {
   return My name is ${this.name} and age is ${this.age};
}
}
let person1 = new Person(‘Jacky’,18);
person1.getPersonInfo();

##### 2.4.2 继承


继承就是**子类继承父类的特征和行为**，使得**字类具有父类相同的行为**。TypeScript中**允许使用继承来扩展现有的类**，对应的**关键字为extends**

class Employee extends Person {
 private department: string
​
 constructor(name: string, age: number, department: string) {
   super(name, age);
   this.department = department;
}
​
 public getEmployeeInfo(): string {
   return this.getPersonInfo() + and work in ${this.department};
}
}
let person2 = new Employee(‘Tom’,28,‘HuaWei’);
person2.getPersonInfo();
person2.getEmployeeInfo();

#### 2.5 模块


**随着应用越来越大，通常要将代码拆分成多个文件，即所谓的模块（module）**。**模块可以相互加载**，并可以使用特殊的**指令export和import来交换功能**，从另一个模块调用一个模块的函数。


**两个模块之间的关系是通过在文件级别上使用import和export建立的**。模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用export导出它们。类似地，我们必须**通过import导入其他模块导出的变量、函数、类**等

export class NewsData{
title: string;
content: string;

constructor(title: string,content: string){
 this.title = title;
 this.content = content;
}
}

import { NewsData } from ‘…/common/bean/NewsData’;

#### 2.6 迭代器


**当一个对象实现了Symbol.iterator属性时，我们认为他是可迭代的**。一些内置的类型如Array，Map，Set，String，Int32Array，Unit32Array等都具有可迭代性

for…of语句
let someArray = [1,‘string’,false];
​
for(let entry of someArray){
console.log(entry);//1,‘string’,false
}

for…in语句 vs for…of语句
let list = [4,5,6];
​
for(let i in list){
console.log(i);//‘0’,‘1’,‘2’
}
​
for(let i of list){
console.log(i);//‘4’,‘5’,‘6’
}

### 3.ArkUI开发框架（方舟开发框架）


**方舟开发框架（ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施**，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。


#### 3.1 基本概念


* **UI**：即**用户界面**。开发者可以将应用的用户界面设计为多个功能页面，**每个页面进行单独的文件管理**，并通过页面路由API完成页面间的调度管理如跳转、回退等操作，以**实现应用内的功能解耦**
* **组件**：**UI构建与显示的最小单位**，如列表、网络、按钮、单选框、进度条、文本等。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面


#### 3.2 两种开发范式


##### 3.2.1 基于ArkTS的声明式开发范式（声明式开发范式）（开发新应用推荐）


采用基于TypeScript声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供UI绘制能力


***为什么开发新应用推荐声明式开发范式***


* **开发效率**：声明式开发范式更**接近自然语义**的编程方式，开发者可直观地描述UI，无需关心如何实现UI绘制和渲染，开发高效简洁
* **应用性能**：两种开发范式地UI后端引擎和语言运行时是共用的，但相比类Web开发范式，声明式开发范式**无需JS框架进行页面DOM管理**，**渲染更新链路更为精简，占用内存更少，应用性能更佳**
* **发展趋势**：声明式开发范式后续会作为主推的开发范式持续演进，为开发者提供更丰富、更强大的能力


##### 3.2.2 兼容JS的类Web开发范式（类Web开发范式）


采用经典的HML、CSS、JavaScript三段式开发方式，即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合Web前端开发者的使用习惯，便于快速将已有的Web应用改造成方舟开发框架应用


##### 3.2.3 不同应用类型支持的开发范式




| 应用模型 | 页面形态 | 支持的UI开发范式 |
| --- | --- | --- |
| Stage模型（推荐） | 应用或服务的页面 | ***声明式开发范式（推荐）*** |
|  | 卡片 | ***声明式开发范式（推荐）*** 类Web开发范式 |
| FA模型 | 应用或服务的页面 | 声明式开发范式 类Web开发范式 |
|  | 卡片 | 类Web开发范式 |


### 4.UI开发——ArkTS声明式开发范式


#### 4.1 概述


基于ArkTS的声明式开发范式的方舟开发框架是一套**开发极简、高性能、支持跨设备**的UI开发框架，提供了构建HarmonyOS应用UI所必需的能力，主要包括：


* **ArkTS**

 **ArkTS 是UI开发语言**，基于TypeScript（TS）语言扩展而来，是TS的超集。扩展能力包括各种 **装饰器、自定义组件、UI描述机制**。**状态数据管理**作为基于ArkTS的声明式开发范式的特色，通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。**状态管理包括UI组件状态和应用程序状态**，两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染
* **布局**

 **布局是UI的必要元素，它定义了组件在界面中的位置**。ArkUI框架提供了多种布局方式，除了基础的线性布局、层叠布局、弹性布局、相对布局、栅格布局外，也提供了相对复杂的列表、宫格、轮播
* **组件**

 **组件是UI的必要元素，形成了在界面中的样子**，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。系统**内置组件包括按钮、单选框、进度条、文本等**。开发者可以通过链式调用的方式设置系统内置组件的渲染效果。开发者可以将**系统内置组件组合为自定义组件，通过这种方式将页面组件化为一个个独立的UI单元，实现页面不同单元的独立创建、开发和复用**，具有更强的工程性
* **页面路由和组件导航**

 **应用可能包含多个页面，可通过页面路由实现页面间的跳转**。一个页面内可能存在组件间的导航如典型的分栏，可通过导航组件实现组件间的导航
* **图形**

 **方舟开发框架提供了多种类型图片的显示能力和多种自定义绘制的能力**，以满足开发者的自定义绘图需求，支持绘制形状、填充颜色、绘制文本、变形与裁剪、嵌入图片等
* **动画**

 **动画是UI的重要元素之一**。优秀的动画设计能够极大地提升用户体验，框架提供了丰富的动画能力，除了**组件内置动画效果**外，还包括**属性动画、显示动画、自定义转场动画以及动画API等**，开发者可以**通过封装的物理模型或者调用动画能力API来实现自定义动画轨迹**
* **交互事件**

 **交互事件是UI和用户交互的必要元素**。方舟开发框架提供了多种交互事件，除了**触摸事件、鼠标事件、键盘按键事件、焦点事件**等通用事件外，还包括基于通用事件进行进一步识别的手势事件。**手势事件有单一手势事件、长按手势、拖动手势、捏合手势、旋转手势、滑动手势，以及通过单一手势事件进行组合的组合手势事件**


#### 4.2 特点


* **开发效率高，开发体验好**




![img](https://img-blog.csdnimg.cn/img_convert/5a109844c2c2760d4325f98f95709a65.png)
![img](https://img-blog.csdnimg.cn/img_convert/450d4a330d5708817d59beb65392498e.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

。方舟开发框架提供了多种交互事件，除了**触摸事件、鼠标事件、键盘按键事件、焦点事件**等通用事件外，还包括基于通用事件进行进一步识别的手势事件。**手势事件有单一手势事件、长按手势、拖动手势、捏合手势、旋转手势、滑动手势，以及通过单一手势事件进行组合的组合手势事件**


#### 4.2 特点


* **开发效率高，开发体验好**




[外链图片转存中...(img-nW6ab2Kf-1715633060476)]
[外链图片转存中...(img-GavdU0SF-1715633060476)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**