小白学前端之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) { 
   // 语句
}


目录
相关文章
|
5月前
|
JavaScript 前端开发 安全
在众多的测试工具中,Cypress以其强大的端到端测试能力和与TypeScript的完美结合,成为了前端开发者的首选
【6月更文挑战第11天】Cypress结合TypeScript,打造前端测试新体验。TypeScript增强代码可读性和稳定性,Cypress提供强大端到端测试,二者结合提升测试准确性和可靠性。通过类型定义、自定义命令和断言,优化测试代码;Cypress模拟真实用户操作、时间旅行功能及内置调试工具,确保应用功能性能。推荐前端开发者使用TypeScript+Cypress进行端到端测试。
71 2
|
3月前
|
JavaScript 前端开发 编译器
TypeScript:一场震撼前端开发的效率风暴!颠覆想象,带你领略前所未有的编码传奇!
【8月更文挑战第22天】TypeScript 凭借其强大的静态类型系统和丰富的工具支持,已成为前端开发的优选语言。它通过类型检查帮助开发者早期发现错误,显著提升了代码质量和维护性。例如,定义函数时明确参数类型,能在编译阶段捕获类型不匹配的问题。TypeScript 还提供自动补全功能,加快编码速度。与 Angular、React 和 Vue 等框架的无缝集成进一步提高了开发效率,使 TypeScript 成为现代前端开发中不可或缺的一部分。
40 1
|
3月前
|
JavaScript 前端开发 安全
【技术革新】Vue.js + TypeScript:如何让前端开发既高效又安心?
【8月更文挑战第30天】在使用Vue.js构建前端应用时,结合TypeScript能显著提升代码质量和开发效率。TypeScript作为JavaScript的超集,通过添加静态类型检查帮助早期发现错误,减少运行时问题。本文通过具体案例展示如何在Vue.js项目中集成TypeScript,并利用其类型系统提升代码质量。首先,使用Vue CLI创建支持TypeScript的新项目,然后构建一个简单的待办事项应用,通过定义接口描述数据结构并在组件中使用类型注解,确保代码符合预期并提供更好的编辑器支持。
84 0
|
3月前
|
资源调度 JavaScript 前端开发
Vue3+TypeScript前端项目新纪元:揭秘高效事件总线Mitt,轻松驾驭组件间通信的艺术!
【8月更文挑战第3天】Vue3结合TypeScript强化了类型安全与组件化开发。面对大型应用中复杂的组件通信挑战,可通过引入轻量级事件发射器Mitt实现事件总线模式。Mitt易于集成,通过简单几步即可完成安装与配置:安装Mitt、创建事件总线实例、并在组件中使用`emit`与`on`方法发送及监听事件。此外,利用TypeScript的强大类型系统确保事件处理器正确无误。这种方式有助于保持代码整洁、解耦组件,同时提高应用的可维护性和扩展性。不过,在大规模项目中需谨慎使用,以防事件流过于复杂难以管理。
109 1
|
3月前
|
开发框架 JSON 缓存
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
|
3月前
|
开发框架 前端开发 JavaScript
基于SqlSugar的开发框架循序渐进介绍(18)-- 基于代码生成工具Database2Sharp,快速生成Vue3+TypeScript的前端界面和Winform端界面
基于SqlSugar的开发框架循序渐进介绍(18)-- 基于代码生成工具Database2Sharp,快速生成Vue3+TypeScript的前端界面和Winform端界面
|
3月前
|
开发框架 前端开发 JavaScript
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
|
3月前
|
开发框架 前端开发 JavaScript
在Vue3+TypeScript 前端项目中使用事件总线Mitt
在Vue3+TypeScript 前端项目中使用事件总线Mitt
|
3月前
|
JavaScript 前端开发 安全
解锁Vue3与TypeScript的完美搭档:getCurrentInstance带你高效打造未来前端
【8月更文挑战第21天】Vue3的getCurrentInstance方法作为Composition API的一部分,让开发者能在组件内访问实例。结合TypeScript,可通过定义组件实例类型实现更好的代码提示与类型检查,提升开发效率与代码质量。例如,定义一个带有特定属性(如myData)的组件实例类型,可以在setup中获取并安全地修改这些属性。这种方式确保了一致性和减少了运行时错误,使开发更加高效和安全。
132 0
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中