HarmonyOS（ArkTS）学习条记第二天——ArkTS初体验

目录
1.ArkTS语言先容
2.根本语法
1.根本范例 
        1.存储数据或变量格式
        2.布尔范例
        3.数字
        4.字符串 
        5.数组
        6.元组
        7.联合
        8.枚举
        9.unknown
        10.unll和undefined
2.条件语句 
        1.if-else语句
         2.switch
         3.循环语句
        3.函数
        1.无返回值的函数
        2.有返回值的函数
         3.箭头函数
 4.类和接口

---

 
         本日是一起学习的第二天，在上一篇中已经下载好了DevEco studio，并且配置了环境。许多小伙伴大概有HTML，CSS，JS，vue学习履历，或者Android开发履历，那么在鸿蒙开发中，我们从ArkTS开始。
         在华为开发者学堂中，可以看到详细的关于ArkTS的背景，起源和演进，感爱好的小伙伴可以点开了解。
        附上官网链接：华为开发者学堂首页-华为开发者学堂 (huawei.com)
        我的老师（彭老师）在讲课的过程中时是从TypeScript的根本语法开始的，可以类比学习ArkTS，不了解TypeScript根本语法并且想仔细认识一下的小伙伴也可以先去搜刮一下，在这里的第二部分也会先容，也可以继续看下去。
        那么我们正式开始吧。
1.ArkTS语言先容

         ArkTS 是华为自研的开发语言，它在TS的根本上，匹配ArkUI框架，扩展了声明式UI、状态管理等相应的本领，让开发者以更简便、更自然的方式开发跨端应用。
        ArkTS是HarmonyOS优选的主力应用开发语言，方舟开发框架 ，为HarmonyOS应用的UI开发提供了完备的根本办法，包括简便的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及及时界面预览工具等，可以支持开发者进行可视化界面开发。
        ArkTS围绕应用开发在TS生态根本上做了进一步扩展，继承了TS的全部特性，是TS的超集。因此，在学习ArkTS语言之前，建议开发者具备TS语言开发本领。
        当前，ArkTS在TS的根本上主要扩展了如下本领：

• 基本语法：ArkTS定义了声明式UI形貌、自定义组件和动态扩展UI元素的本领，再共同ArkUI开发框架中的体系组件及其相干的事件方法、属性方法等共同构成了UI开发的主体。
  
• 状态管理：ArkTS提供了多维度的状态管理机制。在UI开发框架中，与UI相干联的数据可以在组件内使用，也可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些本领来实现数据和UI的联动。
  
• 控制渲染：ArkTS提供了渲染控制的本领。条件渲染可根据应用的不同状态，渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。
  

        将来，ArkTS会联合应用开发/运行的需求一连演进，逐步提供并行和并发本领增强、体系范例增强、分布式开发范式等更多特性。
        笔墨太多很难看懂？别急，这里我们借用一下官网的图，须要了解一下的（图1：ArkTS、TypeScript和JavaScript之间的关系 。以及图2：ArkUI开发框架）：
   

  ​
   

  ​
  
2.根本语法

1.根本范例 

        1.存储数据或变量格式

        存储数据时，用变量或常量（！！！定名只能包含数字、字母、下划线、$，不能以数字开头），变量可变。
        格式： let 变量名: 范例 = 值;
例如：

1. let title: string = '水果捞';
2. let price: number = 21.8;

复制代码

         常量不可变。例如：π（圆周率），huawei（名称）
        格式：const 常量名: 范例 = 值;
例如：

1. const PI: number = 3.141592653589793;

复制代码

        2.布尔范例

        布尔范例，赋值为true或者false;
        格式： let 变量名 : boolean = true;
例如：

1. let isselect : boolean = false;
2. let isbool: boolean = true;

复制代码

        3.数字

        全部的数字都是浮点数，范例是number，支持十进制、二进制、八进制、十六进制
        格式： let 变量名 : number = 2024;
例如：

1. let price: number = 21.8;
2. let binary : number = 0b11011;
3. let octal : number = 0o412;
4. let hex : number = 0x2e3;

复制代码

        4.字符串 

        格式： let 变量名 : string = "这里的字符串单引号和双引号都行"; 
例如：

1. let title: string = '水果捞';

复制代码

        5.数组

        第一种：在元素范例反面加上[]，第二种使用数组泛型。
        格式：let 数组名: 范例[] = [数据1，数据2，数据3......];
        数组泛型 ：let 数组名 : Array<元素范例> = [数据1，数据2，数据3......];
例如：（！！数据必须同前面的范例同等）

1. let names: string[] = ['小红','小明','大强'];
2. let list: Array<number> = [1,2,3];

复制代码

        6.元组

        允许表示一个已知元素范例和数量的数组，各元素的范例可以不同。
        格式：let 变量名 : [范例1,范例2];     也要注意范例对应，不然会报错。

1. let x:[string,number];
2. x = ["hello",12];

复制代码

        7.联合

        联合范例时一种灵活的数据范例，它修饰的变量可以存储不同的数据范例
        格式：let 变量：范例1 | 范例2 |范例3 = 值
例如：

1. let judge: number| string = 100;
2. judge = 'A';                // 合法

复制代码

        联合范例还可以将变量值约定在一组数据范围内进行选择
例如：

1. let gender : 'man' | 'woman' | 'secret' = 'man';    //实际运用时只能选这三个写，可以降低错误率

复制代码

        8.枚举

        约定变量只能在一组数据范围内选择值（与联合的区别：不但有值，还有值的名称）
        枚举（常量列表）
        1.定义枚举范例（常量列表）
        2.使用枚举范例，约束变量格式：
        enum 枚举名{                 //定义枚举范例
            常量1 = 值，              //注意逗号
            常量2 = 值，
            ..........
        }
例如：

1. enum ThemeColor{    
2.     Red = '#ff0f29',          //最好首字母大写
3.     Orange = '#ff7100',
4.     Green = '#30b30e'
5. }
7. let color: ThemeColor = ThemeColor.Red   //使用枚举类型

复制代码

        9.unknown

        如果想要给在编程阶段还不清楚范例的变量指定一个范例。可以使用unknown来标记这些变量。

1. let notsure : unknown = 4;
2. notsure = "maybe string";
3. notsure = false;

复制代码

        10.unll和undefined

1. let u : null = null;
2. let un: undefined = undefined;

复制代码

        ！小建议：在不认识的地方可以在DevEco studio中打一遍 ，然后使用console.log来看结果。代码写在最上面的部分，然后通过调用console.log(),在下面的日记中检察。
例如：

2.条件语句 

        1.if-else语句

        if-else语句，包括嵌套的if语句，和大多数开发语言雷同，相信大多数小伙伴都知道怎么用，这里以一个简朴的判断奇偶为例。

1. //定义数字
2. let num: number = 17;
4. if(num > 0)
5.   console.log(num+" 是正数");
6. else if(num < 0)
7.   console.log(num+" 是负数");
8. else
9.   console.log(num+" 不是正数也不是负数");
11. //判断是否是偶数
12. if(num % 2 === 0)
13.   console.log(num + '是偶数');
14. else
15.   console.log(num + '是奇数');

复制代码

         2.switch

         那么switch也是同样的，这里以一个输入成绩的等级来评价成绩的例子来演示。注意：在TypeScript 中，空字符串、数字0、null、undefined都会被以为是false，其他值则为true。

1. let grade: string = "A";
2. switch(grade) {
3.     case "A": {
4.         console.log("优");
5.         break;
6.     }
7.     case "B": {
8.         console.log("良");
9.         break;
10.     }
11.     case "C": {
12.         console.log("及格");
13.         break;   
14.     }
15.     case "D": {
16.         console.log("不及格");
17.         break;
18.     }  
19.     default: {
20.         console.log("非法输入");
21.         break;              
22.     }
23. }

复制代码

         3.循环语句

         支持for和while循环，和大多数语言雷同，并且为一些内置范例，如Array等提供了快捷迭代语法。简朴的举例如下。
for循环格式：
        for ( init; condition; increment ){
            statement(s);
        }
例如：

1. for(let i=1; i <= 5; i++){
2.   console.log('第 ' + i + ' 个数')
3. }

复制代码

 while循环格式：
        while(condition)
        {
           statement(s);
        }

1. let i=1;
2. while(i <= 5){
3.   console.log('while循环第 ' + i + '次');
4.   i++;
5. }

复制代码

 for in迭代器：

1. //定义数组
2. let names: string[] = ['阿粥','不喝','稀饭'];
3. //for in 迭代器，遍历得到数组下标
4. for(let i in names){
5.     console.log(i + ':' + names[i])
6. }

复制代码

 for of迭代器：

1. //定义数组
2. let names: string[] = ['张三','李四','王五'];
3. //for of 迭代器，直接得到元素
4. for(let name of names){
5.     console.log(name)
6. }

复制代码

        3.函数

         使用函数的目的是为了可以重复调用代码块，在这里通常利用function关键字声明函数，并且支持可选参数、默认参数、箭头函数等特殊语法。
        1.无返回值的函数

        格式：  function 函数名() {
                      //函数体
                    }
例如：

1. function star(){                       //定义
2.   console.log('五角星','*')
3.   console.log('五角星','**')
4.   console.log('五角星','***')
5.   console.log('五角星','****')
6.   console.log('五角星','*****')
7. }
8. star();                               //调用
9. star();

复制代码

        2.有返回值的函数

        传入不同的数据，进行处理，返回处理后的结果。
        格式：
        function 函数名（形参1: 范例,形参2:范例......） //定义
        {
            //函数体
            return 返回值
        }
        let 变量名: 范例 = 函数名（实参1,实参2,.....） //调用
例如：

1. function buy(price:number, num:number)
2. {
3.   let ans:number = price * num;
4.   return ans;
5. }
6. let money : number = buy(12,20);
7. console.log(money);

复制代码

         3.箭头函数

         在某些环境下，箭头函数会很方便。形式为：() =>{ //函数体 }
        格式：
        let 函数名 = （形参1:范例，形参2:范例.......）=>{ //函数体 }
        函数名(实参1，实参2......)
那么，就以上一个打印星星的函数为例：

1. let star = () =>{
2.         console.log('五角星','*')
3.           console.log('五角星','**')
4.           console.log('五角星','***')
5.           console.log('五角星','****')
6.           console.log('五角星','*****')
7. }
8. star();

复制代码

相似地，以上一个由单价数量来计算代价的函数为例：

1. let buy2 = (price2:number,num2:number) =>{
2.   let ans2:number = price2*num2;
3.   return ans2;
4. }
5. let banana:number = buy2(11,30);

复制代码

 4.类和接口

         什么是对象呢，是用于形貌一个物体的特性和行为，可以存储多个数据，由属性名和属性值对应。
        格式：let 对象名称: 对象布局范例 = 值
        1.通过Interface接口来约定对象布局范例
        interface 接口名{
             属性1：范例1
             属性2：范例2
             属性3：范例3
        }
        访问对象属性：   对象名.属性名
例如：

1. interface Person{         //定义接口
2.      name: string
3.      age : number
4.      weight: number
5. }
6. let person: Person = {    //基于接口定义对象
7.      name : 'ZZZ'，       //注意一定要有逗号
8.      age : 20,            //注意一定要有逗号
9.      weight : 116
10. }

复制代码

         对象的方法：1.约定方法范例，2.添加方法
        格式：
        interface 接口名称{                        //约定方法范例
             方法名：（参数：范例）=>返回值范例
        }
例如：

1. interface Person{   
2.      dance:() => void
3.      sing:(song: string) => void
4. }
6. let zzz: Person = {                   // 添加方法
7.   dance: () => {
8.     console.log('阿粥说', '学会习')
9.   },
10.   sing: (song:string) =>{
11.     console.log('阿粥说','背会单词',song)
12.   }
13. }
15. zzz.dance();
16. zzz.sing('abandon')

复制代码

 本日就先到这里了 ^ v ^

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。