首页 前端知识 【TypeScript】 ts控制语句

【TypeScript】 ts控制语句

2024-09-27 09:09:59 前端知识 前端哥 334 456 我要收藏

文章目录

  • ts控制语句
    • 1. 条件语句
      • 1.1 if 语句
      • 1.2 if...else 语句
      • 1.3 if...else if...else 语句
      • 1.4 switch...case 语句
    • 2. 循环
      • 2.1 for 循环
      • 2.2 for...in 循环
      • 2.3 for...of、forEach、every 和 some 循环
      • 2.4 while 循环
      • 2.5 do...while 循环
      • 2.6 break 语句
      • 2.7 continue 语句
    • 3. 函数
      • 3.1 函数定义
      • 3.2 函数返回值
      • 3.3 带参数函数
      • 3.4 可选参数
      • 3.5 默认参数
      • 3.6 剩余参数
      • 3.7 匿名函数
      • 3.8 匿名函数自调用
      • 3.9 构造函数
      • 3.10 递归函数
      • 3.11 Lambda函数
      • 3.12 函数重载
    • 4. 学习总结

好的,以下是没有反引号的补充内容:

ts控制语句

1. 条件语句

1.1 if 语句

if 语句用于根据条件执行代码。

let age: number = 18;

if (age >= 18) {
    console.log("You are an adult.");
}

1.2 if…else 语句

if...else 语句在条件为 false 时执行另一段代码。

let age: number = 16;

if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

1.3 if…else if…else 语句

if...else if...else 用于处理多个条件。

let score: number = 85;

if (score >= 90) {
    console.log("Grade: A");
} else if (score >= 80) {
    console.log("Grade: B");
} else {
    console.log("Grade: C");
}

1.4 switch…case 语句

switch 语句用于基于不同的值执行不同的代码。

let day: number = 3;

switch (day) {
    case 1:
        console.log("Monday");
        break;
    case 2:
        console.log("Tuesday");
        break;
    case 3:
        console.log("Wednesday");
        break;
    default:
        console.log("Other day");
}

2. 循环

2.1 for 循环

for 循环用于执行固定次数的循环。

for (let i = 0; i < 5; i++) {
    console.log(i);
}

2.2 for…in 循环

for...in 循环用于迭代对象的可枚举属性。

let obj = {name: "Alice", age: 25};

for (let key in obj) {
    console.log(key + ": " + obj[key]);
}

2.3 for…of、forEach、every 和 some 循环

  • for…of 用于迭代数组或其他可迭代对象。
  • forEach 是数组的一个方法,用于对数组中的每个元素执行一次函数。
  • every 测试数组中的所有元素是否通过测试。
  • some 测试数组中的至少一个元素是否通过测试。
let arr = [1, 2, 3, 4, 5];

// for...of
for (let num of arr) {
    console.log(num);
}

// forEach
arr.forEach((num) => console.log(num));

// every
let allPositive = arr.every((num) => num > 0);
console.log(allPositive);  // true

// some
let hasEven = arr.some((num) => num % 2 === 0);
console.log(hasEven);  // true

2.4 while 循环

while 循环在条件为 true 时执行代码。

let i: number = 0;

while (i < 5) {
    console.log(i);
    i++;
}

2.5 do…while 循环

do...while 语句首先执行代码,然后判断条件是否为 true

let i: number = 0;

do {
    console.log(i);
    i++;
} while (i < 5);

2.6 break 语句

break 语句用于退出循环或 switch 语句。

for (let i = 0; i < 5; i++) {
    if (i === 3) {
        break;
    }
    console.log(i);  // 0, 1, 2
}

2.7 continue 语句

continue 语句用于跳过当前的迭代并继续下一个。

for (let i = 0; i < 5; i++) {
    if (i === 3) {
        continue;
    }
    console.log(i);  // 0, 1, 2, 4
}

3. 函数

3.1 函数定义

TypeScript 中,函数的定义可以包含参数类型和返回类型。

function greet(name: string): string {
    return `Hello, ${name}`;
}
console.log(greet("Alice"));

3.2 函数返回值

可以为函数指定返回类型。

function add(a: number, b: number): number {
    return a + b;
}
console.log(add(5, 10));  // 15

3.3 带参数函数

函数可以带有参数,且参数可以有类型。

function multiply(a: number, b: number): number {
    return a * b;
}
console.log(multiply(3, 4));  // 12

3.4 可选参数

可选参数在函数中用 ? 标记,表示参数可以省略。

function showDetails(name: string, age?: number): void {
    console.log(name);
    if (age !== undefined) {
        console.log(age);
    }
}
showDetails("Alice");
showDetails("Bob", 30);

3.5 默认参数

可以为函数参数指定默认值。

function greetUser(name: string = "Guest"): void {
    console.log(`Hello, ${name}`);
}
greetUser();  // "Hello, Guest"
greetUser("Alice");  // "Hello, Alice"

3.6 剩余参数

通过剩余参数可以接收不确定数量的参数。

function sum(...numbers: number[]): number {
    return numbers.reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3, 4));  // 10

3.7 匿名函数

匿名函数没有函数名,通常用于回调。

let add = function(a: number, b: number): number {
    return a + b;
};
console.log(add(5, 10));

3.8 匿名函数自调用

匿名函数可以自调用,通常用括号包裹。

(function() {
    console.log("This is an IIFE (Immediately Invoked Function Expression)");
})();

3.9 构造函数

构造函数用于创建类的实例。

class Person {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    greet(): void {
        console.log(`Hello, ${this.name}`);
    }
}

let person = new Person("Alice");
person.greet();  // "Hello, Alice"

3.10 递归函数

递归函数是指调用自身的函数。

function factorial(n: number): number {
    if (n <= 1) return 1;
    return n * factorial(n - 1);
}
console.log(factorial(5));  // 120

3.11 Lambda函数

Lambda 函数(箭头函数)是一种简化的函数表达式语法。

let square = (x: number): number => x * x;
console.log(square(5));  // 25

3.12 函数重载

函数重载允许根据不同的参数数量或类型来定义多个函数。

function combine(a: string, b: string): string;
function combine(a: number, b: number): number;
function combine(a: any, b: any): any {
    if (typeof a === "string" && typeof b === "string") {
        return a + b;
    } else if (typeof a === "number" && typeof b === "number") {
        return a + b;
    }
}

console.log(combine(1, 2));  // 3
console.log(combine("Hello", " World"));  // "Hello World"

4. 学习总结

本章节学习了ts的控制语句,主要分为条件语、循环和函数。看了示例,感觉TypeScrip就是前端的java语言,哈哈哈哈,方法重载和Lambda都有。
在此需要着重记录常用到的语法:
switch…case语句:switch中的 expression 是一个要被比较的表达式,可以是任何类型,包括基本数据类型(如 number、string、boolean)、对象类型(如 object、Array、Map)以及自定义类型(如 class、interface、enum)等。
for…of循环:在 ES6 中引入的 for…of 循环,以替代 for…in 和 forEach() ,并支持新的迭代协议。for…of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构
可选参数函数 :普通参数的参数名后、`带即为可选参数。eg:function buildName(firstName: string, lastName?: string) 这里的lasrName即为可选参数。需要注意的是:可选参数必须跟在必需参数后面!!!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18583.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!