小白学前端之TypeScript的逻辑判断

简介: 小白学前端之TypeScript的逻辑判断

网络异常,图片无法展示
|


条件判断语句


if 语句

这个和 Java 差不多,分为:

  • if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
if ( flag ) {
    // 当 flag 为 true 时执行
}
  • if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
if ( flag ){
  // 当 flag 为 true 时执行
}else {
  // 当 flag 为 false 时执行
}
  • if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
if ( flag ){
  // 当 flag 为 true 时执行
}else if ( flag2 ){
  // 当 flag2 为 false 时执行
}else {
  // 当上面两个条件都为 false 时执行
}

switch 语句

  • switch 语句 - 使用该语句来选择多个代码块之一来执行

不是每一个 case 都需要包含 break。如果 case 语句不包含 break,控制流将会 继续 后续的 case,直到遇到 break 为止。

switch(flag){
  case f1:
    // 当 flag=f1 时执行
    break;
  case f2:
    // 当 flag=f2 时执行
    break;
  default:
    // 当 flag 在上面的 case 中没有匹配项时执行
       }
复制代码

循环语句


for 循环

  • 经典 for 循环
for ( init; condition; increment ){
    statement(s);
}
// 示例
var i:number =0;
for (i ; i<10; i++){
    console.log('你好!')
}
  • 它分为三部分组成,init、condition、increment
    Init 会最先被执行,并且只执行一次
    然后判断 condition 语句是否为 true,是的话就执行循环,不是就结束循环,每次执行循环前都会判断 condition 语句
    执行完循环体内的代码后就会执行 increment 语句,这个可以为空,只要保留最后的分号即可
  • for...in 循环
    for...in 语句用于一组值的集合或列表进行迭代输出。
// 列表输出
var arr:number[] =[2,5,6,7]
for (var index in arr){
    // index 索引从0开始
    console.log(arr[index])
}
  • for...of 循环
    for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环,以替代 for...in 和 forEach() ,并支持新的迭代协议。for...of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等。
// 遍历 map
var map = new Map([
    ['name','greycode'],
    ['desc','打工人']
]);
for (var key of map.keys()){
    console.log(map.get(key))
}
// 遍历数组
var arr:number[] =[2,5,6,7]
for (var value of arr){
    console.log(value)
}
// 遍历字符串
var n:string = 'greycode'
for (var c of n){
    console.log(c)
}
  • forEach 循环

不支持循环体内跳出循环

var arr:number[] =[2,5,6,7]
arr.forEach((val,index,array)=>{
    console.log(val)
    console.log(index)
    console.log(array)
    }
)
  • 上面的三个参数 val,index,array 代表着 值、数组索引值、数组本身,你可以你可以省略 index 和 array 参数从而单独查询值,比如:
var arr:number[] =[2,5,6,7]
arr.forEach((val)=>{
    console.log(val)
    }
)
  • every 循环

支持循环体内跳出循环,并切必须设置返回布尔值

var arr:number[] =[2,5,6,7]
 arr.every((val)=>{
     console.log(val)
    // 返回 true 时继续执行循环,相当于 continue
    // 返回 false 时结束循环,相当于 break
    // 不返回布尔值时结束循环
     return true
     }
 )
  • some 循环

支持循环体内跳出循环,但是和 every 不同,布尔返回值时可选的,布尔值的含义和 every 循环相反

  • 返回 true 相当于 break,会结束循环
  • 返回 false 相当于 continue,会进入下一次循环
var arr:number[] =[2,5,6,7]
arr.some((val)=>{
    console.log(val)
    }
)

while 循环

基本语法如下:

while(flag)
{
   // 当 flag 为 true 时执行
}

do...while 循环

和 while 不同的是它是在尾部判断循环条件,所以会先执行 do 代码块

do
{
   // 执行代码块
}while( flag );
// 当 flag 为 true 时会再次执行 do 的代码块

无限循环

// for 无限循环写法
for(;;) { 
   // 语句
}
// while 无限循环写法
while(true) { 
   // 语句
}


相关文章
|
19天前
|
JavaScript 前端开发 安全
Apollo与TypeScript:强大类型检查在前端开发中的应用
Apollo与TypeScript:强大类型检查在前端开发中的应用
|
8月前
|
前端开发 芯片
【芯片前端】关于门控电路和逻辑做在D端还是EN端的思考
【芯片前端】关于门控电路和逻辑做在D端还是EN端的思考
|
8月前
|
前端开发 芯片
【芯片前端】基于DC综合的逻辑深度与cell count汇总:乘法器
【芯片前端】基于DC综合的逻辑深度与cell count汇总:乘法器
|
11天前
|
JavaScript 前端开发
TypeScript 学习笔记(六):TypeScript 与前端框架的结合应用
笔记,进一步提升 TypeScript 编程技能。
15 1
|
16天前
|
JavaScript 前端开发 IDE
TypeScript在前端项目的渐进式采用策略
该文介绍了渐进式采用TypeScript在前端项目中的策略。首先,通过将JS文件扩展名改为TS并添加类型注解,如在`utils.js`中添加类型。接着,配置`tsconfig.json`,包括目标版本、模块系统、输出目录等。高级配置涉及路径别名、JSON导入、库文件等。然后,集成TypeScript到构建流程,如Webpack,安装`ts-loader`并调整配置。利用类型定义,包括安装第三方库的类型定义包,自定义类型定义或使用社区定义。最后,逐步迁移其他模块至TypeScript,强化类型检查,并确保IDE支持。
11 0
|
17天前
|
JavaScript 前端开发 IDE
TypeScript:前端世界的“甜蜜烦恼”——究竟该不该用?
TypeScript:前端世界的“甜蜜烦恼”——究竟该不该用?
|
19天前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 中的接口是什么?
【5月更文挑战第1天】【Web 前端】TypeScript 中的接口是什么?
|
19天前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 的内置数据类型有哪些?
【5月更文挑战第1天】【Web 前端】TypeScript 的内置数据类型有哪些?
|
19天前
|
JavaScript 前端开发 安全
【Web 前端】使用 TypeScript 有什么好处?
【5月更文挑战第1天】【Web 前端】使用 TypeScript 有什么好处?
|
19天前
|
JavaScript 前端开发 安全
【Web 前端】TypeScript 的特点是什么?
【5月更文挑战第1天】【Web 前端】TypeScript 的特点是什么?