TypeScript入门 (二)控制语句

news2024/9/20 18:27:10

head-bar

引言

大家好，我是GISer Liu😁，一名热爱AI技术的GIS开发者。本系列文章是我跟随DataWhale 2024年9月学习赛的TypeScript学习总结文档。本文主要讲解TypeScript中控制语句的部分；希望通过我的知识点总结，能够帮助你更好地学习TypeScript。💕💕😊

一、介绍

在编程开发中，控制语句是实现程序逻辑的关键部分。TypeScript 提供了丰富的控制语句，包括条件语句、循环语句和函数。通过这些控制语句，用户可以编写更加复杂和功能强大的程序。接下来，作者将详细探讨这些控制语句的语法、使用方法以及代码案例。

二、条件语句

条件语句用于根据不同的条件执行不同的代码块。TypeScript 提供了多种条件语句，包括 if、else、else if 和 switch。

1. if 语句

if 语句用于在条件为 true 时执行代码块。

语法：

if (boolean_expression) {
    // 在布尔表达式 boolean_expression 为 true 时执行
}

思路分析：

  • boolean_expression 是一个布尔表达式，如果其值为 true，则执行 if 语句块中的代码。
  • 如果 boolean_expression 为 false，则跳过 if 语句块，继续执行后续代码。

代码案例：

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

这里的num > 0是逻辑运算符，这里结果为true；

2. else 语句

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

语法：

if (boolean_expression) {
    // 在布尔表达式 boolean_expression 为 true 时执行
} else {
    // 在布尔表达式 boolean_expression 为 false 时执行
}

代码案例：

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

3. else if 语句

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

语法：

if (boolean_expression_1) {
    // 在布尔表达式 boolean_expression_1 为 true 时执行
} else if (boolean_expression_2) {
    // 在布尔表达式 boolean_expression_2 为 true 时执行
} else if (boolean_expression_3) {
    // 在布尔表达式 boolean_expression_3 为 true 时执行
} else {
    // 布尔表达式的条件都为 false 时执行
}

代码案例：

var num: number = 2;
if (num > 0) {
    console.log(num + " 是正数");
} else if (num < 0) {
    console.log(num + " 是负数");
} else {
    console.log(num + " 不是正数也不是负数");
}

4. switch 语句

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

语法：

switch (expression) {
    case constant-expression:
        statement(s);
        break; // 可选的
    case constant-expression:
        statement(s);
        break; // 可选的
    // 您可以有任意数量的 case 语句
    default: // 可选的
        statement(s);
}

代码案例：

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

这里则会执行打印 “优”

三、循环语句

循环语句用于重复执行某段代码，直到满足特定条件为止。TypeScript 提供了多种循环语句，包括 for、while 和 do...while。

1. for 循环

for 循环用于重复执行一段代码，直到满足特定条件为止。

语法：

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

代码案例：

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

这里等待i>=5时才会停止循环

2. for...in 循环

for…in 语句用于迭代对象的属性。它遍历对象的可枚举属性，包括从原型链继承的属性。

语法：

for (var key in object) {
    // 语句
}

代码案例：

var obj = {a: 1, b: 2, c: 3};

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

3. for...of 循环

for…of 语句创建一个循环来迭代可迭代的对象，如数组、字符串、映射、集合等。它遍历对象的值，而不是属性。

语法：

for (let val of iterable) {
    // 语句
}

代码案例：

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

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

4. forEach、every 和 some 循环

forEach、every 和 some 是 JavaScript 的循环语法，TypeScript 作为 JavaScript 的语法超集，当然默认也是支持的。

代码案例：

let list = [4, 5, 6];
list.forEach((val, idx, array) => {
    console.log(`元素: ${val}, 索引: ${idx}, 数组: ${array}`);
});

let allPositive = list.every((val, idx, array) => {
    return val > 0;
});
console.log(allPositive); // 输出: true

let hasEven = list.some((val) => {
    return val % 2 === 0;
});
console.log(hasEven); // 输出: true
  • every是当列表中的所有元素都满足某个条件时返回every，否则返回false;
  • some是只要列表中存在一个元素满足条件，即可返回true；

5. while 循环

while 语句在给定条件为 true 时，重复执行语句或语句组。

语法：

while (condition) {
    statement(s);
}

代码案例：

var num: number = 5;
var factorial: number = 1;

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

只有判断条件为false或者使用break关键字时能跳出循环；

6. do...while 循环

do...while 循环是在循环的尾部检查它的条件。

语法：

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

代码案例：

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

7. break 语句

break 语句用于终止循环或 switch 语句。

代码案例：

var i: number = 1;
while (i <= 10) {
    if (i % 5 == 0) {
        console.log("在 1~10 之间第一个被 5 整除的数为 : " + i);
        break; // 找到一个后退出循环
    }
    i++;
}

8. continue 语句

continue 语句用于跳过当前循环中的代码，强迫开始下一次循环。

代码案例：

var num: number = 0;
var count: number = 0;

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

四、函数

函数是一组一起执行一个任务的语句。TypeScript 中的函数可以有参数和返回值，并且支持函数重载和箭头函数。

1. 函数声明

函数声明定义了一个函数及其参数和返回类型。

语法：

function function_name(param1: type, param2: type): return_type {
    // 函数体
    return value;
}

代码案例：

function greet(): string { // 返回一个字符串
    return "Hello World";
}

function caller() {
    var msg = greet(); // 调用 greet() 函数
    console.log(msg);
}

caller(); // 输出: Hello World

2. 函数返回值

函数可以通过 return 语句返回值。

语法：

function function_name(): return_type {
    // 语句
    return value;
}

代码案例：

function add(a: number, b: number): number {
    return a + b;
}

console.log(add(1, 2)); // 输出: 3

如果语句是return 后面不带有返回值，说明是暂停当前函数下一步执行；

3. 带参数函数

函数可以接受参数，并在函数体内使用这些参数。

语法：

function func_name(param1: datatype, param2: datatype) {
    // 函数体
}

代码案例：

function add(x: number, y: number): number {
    return x + y;
}

console.log(add(1, 2)); // 输出: 3

4. 可选参数

在 TypeScript 函数里，我们可以将参数设置为可选，可选参数使用问号标识 ?。

语法：

function func_name(param1: type, param2?: type) {
    // 函数体
}

代码案例：

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

let result1 = buildName("Bob"); // 正确
let result2 = buildName("Bob", "Adams"); // 正确

5. 默认参数

我们可以设置参数的默认值，这样在调用函数的时候，如果不传入该参数的值，则使用默认参数。

语法：

function func_name(param1: type, param2: type = default_value) {
    // 函数体
}

这里可以看作是变量定义和有参函数的结合

代码案例：

function calculate_discount(price: number, rate: number = 0.50) {
    var discount = price * rate;
    console.log("计算结果: ", discount);
}

calculate_discount(1000); // 计算结果: 500
calculate_discount(1000, 0.30); // 计算结果: 300

6. 剩余参数

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

语法：

function func_name(param1: type, ...restOfName: type[]) {
    // 函数体
}

代码案例：

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); // 和为： 6
addNumbers(10, 10, 10, 10, 10); // 和为： 50

这里的… 表示展开符号，其会将这个列表中所有的元素都展开；

7. 匿名函数

匿名函数是一个没有函数名的函数。匿名函数在程序运行时动态声明，除了没有函数名外，其他的与标准函数一样。

语法：

var res = function([arguments]) {
    // 函数体
};

代码案例：

var msg = function() {
    return "hello world";
};
console.log(msg()); // hello world

var res = function(a: number, b: number) {
    return a * b;
};
console.log(res(12, 2)); // 24

8. 匿名函数自调用

匿名函数自调用在函数后使用 () 即可。

代码案例：

(function() {
    var x = "Hello!!";
    console.log(x);
})(); // Hello!!

9. 构造函数

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

语法：

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

代码案例：

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
console.log(x); // 12

10. 递归函数

递归函数即在函数内调用函数本身。递归函数在处理需要重复执行相同操作的问题时非常有用，例如计算阶乘、斐波那契数列等。

代码案例：

function factorial(number: number): number {
    if (number <= 0) {         // 停止执行
        return 1;
    } else {
        return (number * factorial(number - 1));     // 调用自身
    }
}
console.log(factorial(6));      // 输出 720

11. Lambda 函数

Lambda 函数也称之为箭头函数。箭头函数表达式的语法比函数表达式更短。

语法：

( [param1, param2,…param n] )=>statement;

代码案例：

var foo = (x: number) => 10 + x;
console.log(foo(100));      // 输出结果为 110

箭头函数也可以是一个语句块：

语法：

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

代码案例：

var foo = (x: number) => {
    x = 10 + x;
    console.log(x);
};
foo(100); // 输出 110

在vue等前端框架中，箭头函数很常用！

12. 函数重载

函数重载允许函数根据不同的参数类型和数量执行不同的操作。TypeScript 中的函数重载通过定义多个同名函数来实现，每个函数的参数类型和返回类型可以不同。

语法：

function function_name(param1: type1): return_type1;
function function_name(param2: type2): return_type2;
function function_name(param: type1 | type2): return_type1 | return_type2 {
    // 函数体
}

代码案例：

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

function disp(x: any, y?: any): void {
    console.log(x);
    console.log(y);
}

disp("abc"); // 输出: abc, undefined
disp(1, "xyz"); // 输出: 1, xyz

总结

在本文中，我们深入学习了 TypeScript 的控制语句基本知识，包括条件语句、循环语句和函数。这些知识点是编程的基础，尤其是条件语句和循环语句，需要通过不断的练习来牢记。函数部分则可以根据实际应用场景来逐步完善和加深记忆。

在下一篇文章中，我们将继续探讨 TypeScript 的高级特性，包括类、接口、泛型等，敬请期待！🚀

相关链接

  • 项目地址：TypeScript-CookBook
  • 相关文档：专栏地址
  • 作者主页：GISer Liu-CSDN博客

thank_watch

如果觉得我的文章对您有帮助，三连+关注便是对我创作的最大鼓励！或者一个star🌟也可以😂.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2145046.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

OpenCV基础入门30讲（Python）——第一讲 环境配置

OpenCV基础入门30讲（Python）——第一讲 环境配置

学习基础要求&#xff1a; 1、会Python。 版本要求&#xff1a; 1、电脑系统&#xff1a;Windows10&#xff08;理论上Ubuntu或者Windows10和Windows11都可以&#xff09; 2、Python版本&#xff1a;Python 3.8&#xff08;理论上Python 3.6-3.9都可以&#xff09; 3、OpenCV版…
阅读更多...
微博计算架构实战

微博计算架构实战

课前回顾-性能估算方法 用户量预估 用户行为建模和性能估算 高性能计算架构设计 发微博 发微博是写操作&#xff0c;可以用与写缓冲(Buffer)么&#xff1f;最好是不要加&#xff0c;写缓冲会使得写入速度变慢&#xff0c;比如发送了微博10分钟后&#xff0c;别人还看不到&…
阅读更多...
Ansible——Playbook基本功能

Ansible——Playbook基本功能

文章目录 一、Ansible Playbook介绍1、Playbook的简单组成1&#xff09;“play”2&#xff09;“task”3&#xff09;“playbook” 2、Playbook与ad-hoc简单对比区别联系 3、YAML文件语法&#xff1a;1. 基本结构2. 数据类型3. 列表4. 字典&#xff08;映射&#xff09;5. 注释…
阅读更多...
CSS概览

CSS概览

概述 是什么 cascading style css 层叠样式表 由W3C制定的网页元素定义规则 为什么 美化 怎么办 设置样式 布局 css 引入 内部样式表 在head标签内部使用style标签 <html><head><style>.id{width: 400px;height: 400px;border: 1px solid black;ma…
阅读更多...
2-98 基于matlab的苹果特征检测

2-98 基于matlab的苹果特征检测

基于matlab的苹果特征检测&#xff0c;苹果面积&#xff1a;利用函数bwarea计算白色区域的像素点的个数total。利用total与整幅图片的像素值&#xff08;x*y&#xff09;之比,再与图片的面积相乘,得出苹果面积&#xff1b;缺陷检测&#xff1a;提取出坏损部位的轮廓&#xff0c…
阅读更多...
[Golang] Context

[Golang] Context

[Golang] Context 文章目录 [Golang] Context什么是context创建context创建根context创建context context的作用并发控制context.WithCancelcontext.WithDeadlinecontext.WithTimeoutcontext.WithValue 什么是context Golang在1.7版本中引入了一个标准库的接口context&#xf…
阅读更多...
新手学习Python第十一天，准备今天全部学完系列

新手学习Python第十一天，准备今天全部学完系列

——早上07&#xff1a;30到达实验室&#xff0c;开始学习&#xff0c;中秋小长假已过&#xff0c;心已收—— 一、__new__与__init__创建对象的过程 class Person(object):def __new__(cls,*args,**kwargs): *表示位置参数&#xff0c;**表示关键字参数print(__new__被调用…
阅读更多...
管道缺陷检测系统源码分享

管道缺陷检测系统源码分享

管道缺陷检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vis…
阅读更多...
【鸿蒙 HarmonyOS NEXT】组件嵌套滚动：nestedScroll

【鸿蒙 HarmonyOS NEXT】组件嵌套滚动：nestedScroll

✨本人自己开发的开源项目&#xff1a;土拨鼠充电系统 ✨踩坑不易&#xff0c;还希望各位大佬支持一下&#xff0c;在GitHub给我点个 Start ⭐⭐&#x1f44d;&#x1f44d; ✍GitHub开源项目地址&#x1f449;&#xff1a;https://github.com/cheinlu/groundhog-charging-syst…
阅读更多...
Java SE基础知识详解：源于技术书籍的深度解读

Java SE基础知识详解：源于技术书籍的深度解读

写在前面 ⭐️在无数次的复习巩固中&#xff0c;我逐渐意识到一个问题&#xff1a;面对同样的面试题目&#xff0c;不同的资料来源往往给出了五花八门的解释&#xff0c;这不仅增加了学习的难度&#xff0c;还容易导致概念上的混淆。特别是当这些信息来自不同博主的文章或是视…
阅读更多...
Day02Day03

Day02Day03

1. 为什么拦截器不会去拦截/admin/login上&#xff0c;是因为在SpringMvc中清除了这种可能。 2.使用自己定义注解&#xff0c;实现AOP&#xff08;insert ,update&#xff09; 3.使用update最好使用动态语句&#xff0c;可以使用多次 4.使用阿里云的OSS存储。用common类 5.在写…
阅读更多...
Python 课程16-Pygame

Python 课程16-Pygame

前言 Pygame 是一个基于 Python 的游戏开发库&#xff0c;专门用于多媒体应用程序开发&#xff0c;特别是 2D 游戏。它提供了处理图像、声音、键盘、鼠标等交互功能的 API&#xff0c;并且能够与 OpenGL 集成&#xff0c;用于更复杂的图形操作。Pygame 是初学者和业余开发者学…
阅读更多...
erlang学习:mnesia数据库与ets表1

erlang学习:mnesia数据库与ets表1

Mnesia 和 ETS 都是 Erlang 提供的表管理工具&#xff0c;用于存储和检索数据&#xff0c;但它们之间有一些重要的区别和共同点。 共同点 都是Erlang提供的表存储机制&#xff1a;ETS 和 Mnesia 都允许你在内存中创建表&#xff0c;并且可以用来存储键值对或者更复杂的数据结…
阅读更多...
实战16-RVP定义完成适配

实战16-RVP定义完成适配

新增文件 //设计搞总宽度 const DRAFT_WIDTH 360//将元素的设计搞大小转化为真机中的大小 export default function rvp(val: number) {/*计算元素真正的大小&#xff1b;* 元素在设计稿的大小 / 设计搞总宽度 x / 真机宽度 (保证元素在不同设备占比相同)x 元素在设计稿的大…
阅读更多...
论文不会写？分享6款AI论文写作免费一键生成网站！

论文不会写？分享6款AI论文写作免费一键生成网站！

在当今学术研究和写作领域&#xff0c;AI论文写作工具的出现极大地提高了写作效率和质量。这些工具不仅能够帮助研究人员快速生成论文草稿&#xff0c;还能进行内容优化、查重和排版等操作。本文将分享6款免费一键生成AI论文写作网站&#xff0c;并重点推荐千笔-AIPassPaper。 …
阅读更多...
uniapp富文本editor输入二次扩展兼容微信小程序

uniapp富文本editor输入二次扩展兼容微信小程序

在uni-app中开发富文本输入功能&#xff0c;并使其兼容微信小程序&#xff0c;需要注意一些特定的限制和解决方案。由于微信小程序本身对HTML的支持有限&#xff0c;直接在小程序中实现像Web那样完整的富文本编辑功能&#xff08;如使用CKEditor、Quill等&#xff09;是不可能的…
阅读更多...
算法笔记/USACO Guide GOLD金组DP 3. Paths on Grids

算法笔记/USACO Guide GOLD金组DP 3. Paths on Grids

今天学习背包DP&#xff08;Knapsack DP) 是USACO Guide的DP章节中第三点 What is grid DP? -Summary DP problems often involve a 2D grid where paths are analyzed. Movement is restricted to one direction on the x-axis and y-axis, typically starting from one c…
阅读更多...
AI修手有救了？在comfyui中使用Flux模型实现局部重绘案例

AI修手有救了？在comfyui中使用Flux模型实现局部重绘案例

&#x1f431;‍&#x1f409;背景 局部重绘相关的话题我们已经讨论和测试过很多次了&#xff0c;比如说inpaint模型、brushnet模型、powerpaint模型等等&#xff0c;最近对于flux模型重绘画面的案例也越来越多了&#xff0c;那我们就结合flux模型的重绘来试试看效果。 &…
阅读更多...
体验几款AI论文写作工具后，我认为这个最值得尝试！

体验几款AI论文写作工具后，我认为这个最值得尝试！

开学随之而来的论文写作肯定又让你头疼了吧&#xff0c;而现如今随着AI技术的飞快发展&#xff0c;许多人巧妙地借助AI论文辅助工具&#xff0c;迅速搭建起论文的基本框架&#xff0c;然后一键生成万字正文内容&#xff0c;准确获得大量文献引用&#xff0c;使得整个论文创作过…
阅读更多...
[深度学习]Pytorch框架

[深度学习]Pytorch框架

1 深度学习简介 应用领域&#xff1a;语音交互、文本处理、计算机视觉、深度学习、人机交互、知识图谱、分析处理、问题求解 2 发展历史 1956年人工智能元年2016年国内开始关注深度学习2017年出现Transformer框架2018年Bert和GPT出现2022年&#xff0c;chatGPT出现&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023