jquery中if双条件判断 js中if的三个条件如何写

转载

mob64ca1414098d 2023-10-27 10:23:55

文章标签 jquery中if双条件判断 javascript 执行顺序数据使用细节 文章分类 jQuery 前端开发

文章目录

前言

1.if 语句
2.switch 语句
3.三元表达式

总结

前言

上一章,我们抛出了什么是JavaScript 提供了3种条件控制的语法支持,本人会在这一张仔细的进行讲解!

1.if 语句

通过关键 if、else、else if 控制程序的执行顺序，具体分成3种情形：

1.单分支情形，当某个条件为 true 时，才执行某段程序代码

<script>
	// 语法格式为
  // if(条件) { 要执行的代码 }
  // 举例：国家规定年龄必须在16岁以上去网吧，否则为是教唆未成年人上网属违法行为。
  let age = 14;
  if(age >= 16) {
    document.write(`<p>你的年龄为${age}周岁，可以上网吧上网了。</p>`);
  }
</script>

2.双分支情形，当某个条件为 true 时，执行其中一段代码，为 false 时，则执行别一段代码

<script>
  // 语法格式为：
  // if(条件) {
  //   条件为 true 时要执行的代码
  // } else {
  //   条件为 false 时要执行的代码
  // }
  if(age >= 16) {
    document.write(`<p>你的年龄为${age}周岁，已达到法定上网年龄，可以上网。</p>`);
  } else {
    document.write(`<p>你的年龄为${age}周岁，未达到法定上午年龄，好好学习、天天向上!</p>`);
  }
</script>

3.多分支情形，依次检测多个条件，其中任一条件为 true 时，则执行其对应的代码，如果所有条件均为 false 时，则执行 else 对应的代码。

<script>
  // 语法格式为：
  // if(条件) {
  //   条件为 true 时要执行的代码
  // } else if(另一个条件) {
  //   条件为 true 时要执行的代码
  // } else if(更多的条件) {
  //   条件为 true 时要执行的代码
  // } else {
  //   以上均条件为 false 时要执行的代码
  // }

  // 举例：期末考试成绩规定 80分以上为优秀，70分以上为良好，60分以上为及格。
  let score = 85;
  if(score >= 80) {
    document.write(`<p>你的期末成绩为${score}分，成绩评定为【优秀】。</p>`);
  } else if(score >= 70) {
    document.write(`<p>你的期末成绩为${score}分，成绩评定为【良好】。<p>`);
  } else if(score >= 60) {
    document.write(`<p>你的期末成绩为${score}分，成绩评定为【及格】。<p>`);
  } else {
    document.write(`<p>你的期末成绩为${score}分，成绩评定为【不及格】。<p>`);
  }
</script>

总结：

if 或 else if 的条件可以使用多个组件条件
if 或 else if 的条件存在数据隐式类型的转换
else 只能跟在 if 或 else if，之后，从语法角度看 else 可以省略
支持嵌套

注：介绍 if 的简写形式，即 if(true) // code...

2.switch 语句

通过 switch、case、break、default 控制程序的执行顺序，switch 一般多用来处理多分支，其语法相较 if 略显复杂，我们拆解成多个步骤来认识他。

<script>
  // 1. 极简用法
  // 语法格式
  // switch(数据变量) {
  //   case 条件:
  //     要执行的代码
  // }
  // 举例：根据省份名称，说出该省份所对应的省会城市。
  let province = '河北省';
  switch(province) {
    case '河北省':
      document.write(`<p>${province}的省会城市是【石家庄】。</p>`)
  } 
</script>

仔细分析上述代码，并无实际价值，只是语法正确而已，我们继续完善：

<script>
  // 语法格式：
  // switch(数据变量) {
  //   case 条件:
  //     要执行的代码;
  //     break;
  //   case 条件:
  //     要执行的代码;
  //     break;
  //   case 更多条件:
  //     要执行的代码;
  // }

  province = '山东省';
  switch (province) {
    case '河北省':
      document.write(`<p>${province}的省会城市是【石家庄】。</p>`);
      break;
      // 多个条件之间必须添加 break
    case '河南省':
      document.write(`<p>${province}的省会城市是【郑州】。</p>`);
      break;
    case '山东省':
      document.write(`<p>${province}的省会城市是【济南】。</p>`);
      break;
    case '山西省':
      document.write(`<p>${province}的省会城市是【太原】。</p>`);
  }
</script>

上述代码才是 switch 的标准用法，可以根据不同的条件，执行不同的代码，不仅如此我们还可以通过 default 锦上添花。

<script>
    province = '德州';
    switch (province) {
      case '河北省':
        document.write(`<p>${province}的省会城市是【石家庄】。</p>`);
        break;
      // 多个条件之间必须添加 break
      case '河南省':
        document.write(`<p>${province}的省会城市是【郑州】。</p>`);
        break;
      case '山东省':
        document.write(`<p>${province}的省会城市是【济南】。</p>`);
        break;
      case '山西省':
        document.write(`<p>${province}的省会城市是【太原】。</p>`);
        break;
      default:
        document.write(`<p>${province}可能不是中国的省份。</p>`)
    } 
</script>

default 写在最后，上述所有条件均不满足时才执行 default。

归纳使用细节：

switch 检测某个变量是否全等于（===）某个值做为条件
条件与条件之间必须要有 break
可连续并列多个 case
凡是可使用 switch 的逻辑，均可以使用 if 实现

3.三元表达式

三元表达式控制程序的执行顺序，有点类似于 if、else 配对使用。

<script>
  // 语法格式
  // 条件 ? 为true时执行代码 : 为false时执行代码
  // 举例：如果大于18岁输出成年，否则输出未成年
  let age = 17;
  age >= 18 ? document.write('成年人') : document.write('未成年人');
  
  /** 三元运算的两种应用场景 **/
  // 1. 控制运算的逻辑
  let name = prompt('请输入你的名字?');
  name === '小明' ? console.log('主人你好！') : console.log('请登录！');

  // 2. 进行赋值操作
  let num = +prompt('请输放年龄?');
  let age = num ? num : 18;
  console.log(age);
</script>

归纳使用细节：