switch 语法运用

2301_80107415

于 2024-08-01 21:08:10 发布

阅读量1.8k

点赞数 2

文章标签：前端 typescript html5

本文链接：https://blog.csdn.net/2301_80107415/article/details/140855976

版权

一.switch基本语法

 switch (key) {
    case 1:
        break;
    case 2:
        break;
    case 3:
        break;
    default:
        break
 }

switch的使用

switch跟if语句一样，都是分支语句，if语句上一篇文章介绍过了，有不了解的可以去看一下上一篇文章.

switch语句跟if语句的区别：switch只能写等值判断，区间判断是无法使用的，反观if语句就不适合做等值判断，不然会有代码冗余.

//中100万  买五菱宏光
//中50万  买雅迪电车
//中10万  买捷安特
//中10块  买个冰棍
//其他  买个锤子
let money: number = 10
switch (money) {
    case 1000000:
        console.log('买五菱宏光');
        break
    case 500000:
        console.log('买雅迪电车');
        break
    case 100000:
        console.log('买捷安特');
        break
    case 10:
        console.log('买个冰棍');
        break
    default:
        console.log('买个锤子');
        break

}

代码中有重复执行的代码但是执行的条件不一样，我们可以利用break的特性来进行简便代码

//原本写法
//1,3,5土豆丝 2,4,6麻辣烫 其他吃个锤子
let a: number = 3
switch (a) {
    case 1:
        console.log('土豆丝');
        break
    case 2:
        console.log('麻辣烫');
        break
    case 3:
        console.log('土豆丝');
        break
    case 4:
        console.log('麻辣烫');
        break
    case 5:
        console.log('土豆丝');
        break
    case 6:
        console.log('麻辣烫');
        break
    default:
        console.log('吃个锤子');

}
//简便写法
switch (a) {
    case 1:
    case 3:
    case 5:
        console.log('土豆丝')
        break
    case 2:
    case 4:
    case 6:
        console.log('麻辣烫');
        break
    default:
        console.log('吃个锤子');
}

二.利用switch来编写石头剪刀布的游戏

2.1页面布局

2.2的声明变量

2.3处理用户出招

 Row({ space: 10 }) {
        Radio({
          value: '剪刀',
          group: 'a'
        })
          .onChange((isChecked: boolean) => {
            promptAction.showToast({ message: `剪刀:${isChecked}` })
            this.userCz = '剪刀'
            // this.isC=isChecked
            this.isJ=isChecked
          })
          .checked(this.isJ)
        Text('剪刀').fontSize(30)
        Radio({
          value: '石头',
          group: 'a'
        })
          .onChange((isChecked: boolean) => {
            promptAction.showToast({ message: `石头：${isChecked}` })
            this.userCz = '石头'
            this.isS=isChecked
          })
          .checked(this.isS)

        Text('石头').fontSize(30)
        Radio({
          value: '布',
          group: 'a'
        })
          .onChange((isChecked: boolean) => {
            promptAction.showToast({ message: `布：${isChecked}` })
            this.userCz = '布'
            this.isB=isChecked
          })
          .checked(this.isB)
        Text('布').fontSize(30)

      }
      .width('100%')
      .height(50)
      .justifyContent(FlexAlign.Center)

2.4电脑出招

Button('电脑出招')
          .onClick(() => {

            //用户出招了
            if (this.userCz!=='') {
              // Math.random()  产生0~1之间的小数
              //0 剪刀 1石头 2布
              let num: number = parseInt(`${Math.random() * 3}`)
              switch (num) {
                case 0:
                  this.comCz = '剪刀'
                  break;
                case 1:
                  this.comCz = '石头'
                  break
                case 2:
                  this.comCz = '布'
                  break
              }
              //1.电脑赢
              if ((this.comCz == '剪刀' && this.userCz == '布') || (this.comCz == '石头' && this.userCz == '剪刀') ||
                (this.comCz == '布' && this.userCz == '石头')
              ) {
                this.res = '电脑'
                this.cY++
              } else if ((this.comCz == '剪刀' && this.userCz == '石头') ||
                (this.comCz == '石头' && this.userCz == '布') || (this.comCz == '布' && this.userCz == '剪刀')
              ) {
                //2.用户赢
                this.res = '用户'
                this.uY++
              } else {
                //3.平局
                this.res = '平局'
                this.pY++
              }

            } else {
              promptAction.showToast({ message: '请用户先出招' })
            }

          })

2.5数据统计

通过每局的输赢进行++通过变量渲染到页面中

 Text(`赢:${this.uY}`).fontSize(30).fontColor('red')
      Text(`败:${this.cY}`).fontSize(30).fontColor('red')
      Text(`平:${this.pY}`).fontSize(30).fontColor('red')
      Text(`总局数:${this.uY+this.cY+this.pY}`).fontSize(30).fontColor('red')
      Text(`胜率:${this.uY}/${this.uY+this.cY+this.pY}`).fontSize(30).fontColor('red')

2.6重新开始

重新开始：把变量和所有数据初始化

 Button('重新开始')
          .onClick(()=>{
            //清零 重新初始化
            this.userCz=''
            this.comCz=''
            this.res=''
            this.uY=0
            this.cY=0
            this.pY=0
            //初始化单选选项
            this.isJ=false
            this.isS=false
            this.isB=false
            promptAction.showToast({message:`zhizhizhi${this.userCz}`})
          })