JavaScript:条件语句

条件语句与代码流程

当编写代码时主要目的是解决问题,用代码解决问题的步骤称为算法,最终所写的所有代码都要将问题分解为由计算机执行的算法。

举个例子比如现在要做一个买卖功能,在确定用户购买的操作时,需要检测用户是否有足够资金进行购买,如果资金足够则执行购买,如果资金不够则执行提示告之用户资金不足。

结合之前所学可以想象出要进行这个比价操作就需要用到比较表达式和布尔值,所以到底如何应用在代码中?

简单条件语句

if…else – MDN

单次检查

假设我们钱包里有 10 元钱,物品价格是 5元,那么可以使用 if 语句进行操作

let money = 10;
let price = 5;

if (money != 0) { // 当判断结果为 true 时执行表达式内的语句
    console.log("我的钱包有钱");
}

if (money >= price) { // 当判断结果为 true 时执行花括号内的语句
    console.log("资金足够,可以购买");
} else { // 当判断结果为 false 时执行花括号内的语句
    console.log("资金不足,放弃购买");
}

if 语句中的值始终转换为 true 或 false。根据该值,if 语句中的代码会运行,或 else 语句中的代码会运行。if 和 else 语句中的代码位于花括号 {…} 里,以便区分条件,并表明要运行哪段代码。

另外,你可以只使用 if 但是不能只使用 else(否则会看到「SyntaxError: expected expression, got keyword ‘else’详细了解

多次检查

除了基本的 if…else 还有 if…if else

let number = 5;
if ( number > 5 ){
    ...
} if else (number == 5 ){
    ...
} else {
    ...
}

也就是说你可以有两个甚至更多的检查条件,且本质上 else 语句充当的是默认条件,以防所有其他 if 语句都为 false(当然如第一个例子为例没有 else 也是可以的)。

逻辑运算符

以上的判断都是仅判定一个 true 条件,但有时候业务更加复杂可能需要更多的判断

let status = "悠闲";
let weather = "晴天";

if ( status == "悠闲" && weather == "晴天") { // 当两个条件都为 true 时
    console.log("出门玩吧");
}

将两个逻辑运算符组合起来可以成为一个更强大的逻辑表达式

运算符 含义 示例
&& 逻辑 AND value1 && value2
|| 逻辑 OR value1 || value2
! 逻辑 NOT !value1
// && 逻辑 AND,当左右两边条件都为 true 时才执行花括号内语句
// 例子:假设 天气好 && 我有时间这两条件都达成,那么我就做些什么{出去玩}
if ( true && true) {
    console.log('test');
}
// || 逻辑 OR,当左右两边条件其中之一为 true 时就执行花括号内语句
// 例子:假设 我带了钱包 || 朋友带了钱包这两条件都达成了之一,那么我就做些什么{买买买}
if ( true && false)  {
    console.log('test');
}
// ! 逻辑 NOT,将条件返回相反结果
let num = 0; // 0 是 false,使用 console.log(Boolean(0)); 可知
if ( !num ) { // 使用!会传入相反的值,所以本来为 false 但是这里变成了 true
    console.log('test'); // 所以执行了
}

这时候可能会有点迷糊,但是不管怎样先记住一点 if() 就是为了判断最终结果是 true 还是 flase 并且为 ture 时才执行紧接着的花括号内的语句。而逻辑运算符是为了方便达到复杂的判断需求。

高级条件语句

真值和假值

JavaScript 中的每个值都有固有的布尔值,在布尔表达式中评估该值时,该值就会转换为固有的布尔值。

这些固有的值称为真值或假值。

结果为 false 的值称为假值。例如,空字符串 “” 为假值,因为在布尔表达式中,”” 等于 false。

以下是所有假值的列表:

  • false
  • null
  • undefined
  • 0
  • NaN
  • “”

如果结果为 true,则为真值。例如,1 是真值,因为在布尔环境下,1 等于 true。

以下是真值的一些其他示例:

  • true
  • 42
  • “pizza”
  • {}
  • []

本质上,如果不是假值,则为真值!所以记住假值有哪些即可。

三元运算符

三元运算符可以帮助避免写出冗长的 if…else 语句。

「[判断条件] ? [真,执行一些语句] : [假,执行一些语句]」

let money = 10;
// 问好前写入判断语句,如果为真执行后面冒号前的语句,如果为假执行冒号后的语句。
let status = money !== 0 ? "我还有钱" : "我没钱了";
console.log(status);

switch – MDN

switch 语句是另一种将多个基于相同值的 else if 语句放到一起,并且不用使用条件语句的方式,只是根据某个值切换每段代码。

例如

let num = 3;
if (num === 1) {
  console.log("num 是 1");
} else if (num === 2) {
  console.log("num 是 2");
} else if (num === 3) {
  console.log("num 是 3");
} else if (num === 4) {
  console.log("num 是 4");
} else if (num === 5) {
  console.log("num 是 5");
} else if (num === 6) {
  console.log("num 是 6");
}

在 switch 语句中是这样

let num = 3;
switch (num) {
  case 1:
    console.log("num 是 1");
  case 2:
    console.log("num 是 2");
  case 3:
    console.log("num 是 3");
  case 4:
    console.log("num 是 4");
  case 5:
    console.log("num 是 5);
  case 6:
    console.log("num 是 6");
}

break

但当执行上述代码时会发现不仅输出了结果「num 是 3」且把后续结果也输出出来了,这是因为还缺少 break 中断语句,中断语句可以用来终结一个 switch 语句并将控制权转给被终结语句后面的代码。向每个 case 条件添加 break 后,就解决了 switch 语句不断往下跳转到其他 case 条件的问题。

let num = 3;
switch (num) {
  case 1:
    console.log("num 是 1");
    break;
  case 2:
    console.log("num 是 2");
    break;
  case 3:
    console.log("num 是 3");
    break;
  case 4:
    console.log("num 是 4");
    break;
  case 5:
    console.log("num 是 5");
    break;
  case 6:
    console.log("num 是 6");
    break;
}

传递

var man = "九头蛇";
var talk = "我是"

switch (man) {
  case "普通人":
    talk += "一个普通人 ";
  case "神盾局特工":
    talk += "一个神盾局特工";
  case "九头蛇":
    talk += "一个九头蛇坏人";
  default:
    talk += ",这个世界太疯狂。";
}

console.log(talk);

在此示例中,每个后继层级通过添加更多的输出在下个层级上继续扩建。代码中没有任何中断语句的话,switch 语句跳到 “九头蛇” 后,继续向下传递,直到到达 switch 语句的结尾。

并且此处加上了「default」当没有任何与 switch 表达式相符的值时,将执行该语句。试着将第 9 行的判断条件改成其他再运行看看?这里和 if…esle 中的 esle 作用挺像。

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注