临沂网站建设培训,域名如何做网站,网站文字规范,wordpress固定链接设置以后404引言 大家好#xff0c;我是GISer Liu#x1f601;#xff0c;一名热爱AI技术的GIS开发者。本系列文章是我跟随DataWhale 2024年9月学习赛的TypeScript学习总结文档。本文主要讲解TypeScript中控制语句的部分#xff1b;希望通过我的知识点总结#xff0c;能够帮助你更好地…
引言 大家好我是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);
}这里等待i5时才会停止循环 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); // 输出: truelet hasEven list.some((val) {return val % 2 0;
});
console.log(hasEven); // 输出: trueevery是当列表中的所有元素都满足某个条件时返回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 World2. 函数返回值
函数可以通过 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)); // 输出: 34. 可选参数
在 TypeScript 函数里我们可以将参数设置为可选可选参数使用问号标识 ?。
语法
function func_name(param1: type, param2?: type) {// 函数体
}代码案例
function buildName(firstName: string, lastName?: string) {if (lastName)return firstName lastName;elsereturn 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); // 计算结果: 3006. 剩余参数
剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。
语法
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 worldvar res function(a: number, b: number) {return a * b;
};
console.log(res(12, 2)); // 248. 匿名函数自调用
匿名函数自调用在函数后使用 () 即可。
代码案例
(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); // 1210. 递归函数
递归函数即在函数内调用函数本身。递归函数在处理需要重复执行相同操作的问题时非常有用例如计算阶乘、斐波那契数列等。
代码案例
function factorial(number: number): number {if (number 0) { // 停止执行return 1;} else {return (number * factorial(number - 1)); // 调用自身}
}
console.log(factorial(6)); // 输出 72011. 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博客 如果觉得我的文章对您有帮助三连关注便是对我创作的最大鼓励或者一个star也可以.
