HarmonyOS学习--TypeScript语言学习(三)

2023-12-13 22:31:44

注意:这只是我学习的笔记!!!

注意:这只是我学习的笔记!!!

注意:这只是我学习的笔记!!!

本章目录如下

一、条件语句

二、迭代器

三、循环

四、函数

五、类

一、条件语句

条件语句用于基于不同的条件来执行不同的动作。TypeScript 条件语句是通过一条或多条语句的执行结果(True 或 False)来决定执行的代码块。

在 TypeScript 中,我们可使用以下条件语句:

  • if 语句?- 只有当指定条件为 true 时,使用该语句来执行代码
  • if...else 语句?- 当条件为 true 时执行代码,当条件为 false 时执行其他代码
  • if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
  • switch 语句?- 使用该语句来选择多个代码块之一来执行

1.if 语句

TypeScript if 语句由一个布尔表达式后跟一个或多个语句组成。

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

2.if...else 语句

一个 if 语句后可跟一个可选的 else 语句,else 语句在布尔表达式为 false 时执行。

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

3.if...else if....else 语句

if...else if....else 语句在执行多个判断条件的时候很有用。

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

4.switch…case 语句

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

let 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;              
    } 
}

二、迭代器

当一个对象实现了Symbol.iterator属性时,我们认为它是可迭代的。 一些内置的类型如?Array,Map,Set,String,Int32Array,Uint32Array等都已经实现了各自的Symbol.iterator。 对象上的?Symbol.iterator函数负责返回供迭代的值。

for..of会遍历可迭代的对象,调用对象上的Symbol.iterator方法。 下面是在数组上使用for..of的简单例子

let someArray = [1, "string", false];

for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}

for..of vs. for..in 语句

for..of和for..in均可迭代一个列表,但是用于迭代的值却不同:

for..in迭代的是对象的键,

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"
}

三、循环

1.for 循环

TypeScript for 循环用于多次执行一个语句序列,简化管理循环变量的代码。

语法格式如下所示:

for ( init; condition; increment ){
    statement(s);
}

以下实例计算 5 的阶乘, for 循环生成从 5 到 1 的数字,并计算每次循环数字的乘积。

let num:number = 5; 
let i:number; 
let factorial = 1; 
 
for(i = num;i>=1;i--) {
   factorial *= i;
}
console.log(factorial)

打印结果:

120

2.for...in 循环

for...in 语句用于一组值的集合或列表进行迭代输出。

语法格式如下所示:

for (var val in list) { 
    //语句 
}

代码如下:?

let j:any; 
let n:any = "a b c" 
 
for(j in n) {
    console.log(n[j])  
}

打印结果:

a
b
c

3.for...of 循环

let someArray = [1, "string", false];
 
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}

4.forEach 循环

let list = [4, 5, 6];
list.forEach((val, idx, array) => {
    // val: 当前值
    // idx:当前index
    // array: Array
});

5.while 循环

while 语句在给定条件为 true 时,重复执行语句或语句组。循环主体执行之前会先测试条件。

语法格式如下所示:

while(condition)
{
   statement(s);
}

代码如下:

let num:number = 5; 
let factorial:number = 1; 
 
while(num >=1) { 
    factorial = factorial * num; 
    num--; 
} 
console.log("5 的阶乘为:"+factorial);

输出结果为:

5 的阶乘为:120

6.do...while 循环

不像?for?和?while?循环,它们是在循环头部测试循环条件。do...while?循环是在循环的尾部检查它的条件。

语法格式如下所示:

do
{
   statement(s);
}while( condition );

代码如下:

var n:number = 10;
do { 
    console.log(n); 
    n--; 
} while(n>=0);

输出结果为:

10
9
8
7
6
5
4
3
2
1
0

7.break 语句

break?语句有以下两种用法:

  1. 当?break?语句出现在一个循环内时,循环会立即终止,且程序流将继续执行紧接着循环的下一条语句。
  2. 它可用于终止?switch?语句中的一个 case。

如果您使用的是嵌套循环(即一个循环内嵌套另一个循环),break 语句会停止执行最内层的循环,然后开始执行该块之后的下一行代码。

let i:number = 1 
while(i<=10) { 
    if (i % 5 == 0) {   
        console.log ("在 1~10 之间第一个被 5 整除的数为 : "+i) 
        break     // 找到一个后退出循环
    } 
    i++ 
}  // 输出 5 然后程序执行结束

输出结果为:

在 1~10 之间第一个被 5 整除的数为 : 5

8.continue 语句

continue?语句有点像?break?语句。但它不是强制终止,continue 会跳过当前循环中的代码,强迫开始下一次循环。

对于?for?循环,continue?语句执行后自增语句仍然会执行。对于?while?和?do...while?循环,continue?语句重新执行条件判断语句。

let num:number = 0
let count:number = 0;
 
for(num=0;num<=20;num++) {
    if (num % 2==0) {
        continue
    }
    count++
}
console.log ("0 ~20 之间的奇数个数为: "+count)    //输出10个偶数

输出结果为:

0 ~20 之间的奇数个数为: 10

四、函数

函数就是包裹在花括号中的代码块,前面使用了关键词 function:

语法格式如下所示:

function function_name()
{
    // 执行代码
}

函数是一组一起执行一个任务的语句,函数声明要告诉编译器函数的名称、返回类型和参数。

1.有名函数和匿名函数

TypeScript可以创建有名字的函数和匿名函数,其创建方法如下:

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

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

2.为函数定义类型

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

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

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

3.可选参数

在 TypeScript 函数里,如果我们定义了参数,则我们必须传入这些参数,除非将这些参数设置为可选,可选参数使用问号标识 ?。在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。 比如,我们想让lastName是可选的:

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}
 
let result1 = buildName("Bob");                  // 错误,缺少参数
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误,参数太多了
let result3 = buildName("Bob", "Adams");         // 正确

以下实例,我们将 lastName 设置为可选参数:

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
 
let result1 = buildName("Bob");  // 正确
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误,参数太多了
let result3 = buildName("Bob", "Adams");  // 正确

可选参数意思是可以不传值或者有几个参数传几个值

可选参数必须跟在必需参数后面。 如果上例我们想让 firstName 是可选的,lastName 必选,那么就要调整它们的位置,把 firstName 放在后面。

如果都是可选参数就没关系。

4.剩余参数

有一种情况,我们不知道要向函数传入多少个参数,这时候我们就可以使用剩余参数来定义。

剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
  
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

函数的最后一个命名参数 restOfName 以 ... 为前缀,它将成为一个由剩余参数组成的数组,索引值从0(包括)到 restOfName.length(不包括)

function addNumbers(...nums:number[]) {  
    var i;   
    var sum:number = 0; 
    
    for(i = 0;i<nums.length;i++) { 
       sum = sum + nums[i]; 
    } 
    console.log("和为:",sum) 
 } 
 addNumbers(1,2,3) 
 addNumbers(10,10,10,10,10)

输出结果为:

和为: 6
和为: 50

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")
  })

6.构造函数

TypeScript 也支持使用 JavaScript 内置的构造函数 Function() 来定义函数:

语法格式如下:

var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)

参数说明:

  • arg1, arg2, ... argN:参数列表。
  • functionBody:一个含有包括函数定义的 JavaScript 语句的字符串。
var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

输出结果为:

12

7.函数重载

重载是方法名字相同,而参数不同,返回类型可以相同也可以不同。

每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表。

参数类型不同:

function disp(string):void; 
function disp(number):void;

参数数量不同:

function disp(n1:number):void; 
function disp(x:number,y:number):void;

参数类型顺序不同:

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

如果参数类型不同,则参数类型应设置为?any。

参数数量不同你可以将不同的参数设置为可选。

?五、类

TypeScript 是面向对象的 JavaScript。

类描述了所创建的对象共同的属性和方法。

TypeScript 支持面向对象的所有特性,比如 类、接口等。

1.类的定义

TypeScript 类定义方式如下:

class class_name { 
    // 类作用域
}

定义类的关键字为 class,后面紧跟类名,类可以包含以下几个模块(类的数据成员):

  • 字段?? 字段是类里面声明的变量。字段表示对象的有关数据。
  • 构造函数?? 类实例化时调用,可以为类的对象分配内存。
  • 方法?? 方法为对象要执行的操作。

例如,我们可以声明一个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}`;
  }
}

通过上面的Person类,我们可以定义一个人物Jacky并获取他的基本信息,其定义如下:

let person1 = new Person('Jacky', 18);
person1.getPersonInfo();

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}`;
  }
}

通过上面的Employee类,我们可以定义一个人物Tom,这里可以获取他的基本信息,也可以获取他的雇主信息,其定义如下:

let person2 = new Employee('Tom', 28, 'HuaWei');
person2.getPersonInfo();
person2.getEmployeeInfo();

3.继承类的方法重写

类继承后,子类可以对父类的方法重新定义,这个过程称之为方法的重写。

其中 super 关键字是对父类的直接引用,该关键字可以引用父类的属性和方法。

class PrinterClass { 
   doPrint():void {
      console.log("父类的 doPrint() 方法。") 
   } 
} 
 
class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() // 调用父类的函数
      console.log("子类的 doPrint()方法。")
   } 
}

输出结果为:

父类的 doPrint() 方法。

子类的 doPrint()方法。

4.static 关键字

static 关键字用于定义类的数据成员(属性和方法)为静态的,静态成员可以直接通过类名调用。

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("num 值为 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法

输出结果为:

num 值为 12

5.instanceof 运算符

instanceof 运算符用于判断对象是否是指定的类型,如果是返回 true,否则返回 false。

class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log("obj 对象是 Person 类实例化来的吗? " + isPerson);

输出结果为:

obj 对象是 Person 类实例化来的吗? true

6.访问控制修饰符

TypeScript 中,可以使用访问控制符来保护对类、变量、方法和构造方法的访问。

TypeScript 支持 3 种不同的访问权限。

  • public(默认)?: 公有,可以在任何地方被访问。
  • protected?: 受保护,可以被其自身以及其子类访问。
  • private?: 私有,只能被其定义所在的类访问。

以下实例定义了两个变量 str1 和 str2,str1 为 public,str2 为 private,实例化后可以访问 str1,如果要访问 str2 则会编译错误。

class Encapsulate { 
   str1:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str1)     // 可访问 
console.log(obj.str2)   // 编译错误, str2 是私有的

学习文章:

鸿蒙开发者官方文档

菜鸟教程

TypeScript中文网

文章来源:https://blog.csdn.net/qq_21249787/article/details/134816322
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。