JavaScript 코딩 마스터하기: 2부, 조건

王林
풀어 주다: 2023-08-31 20:37:08
원래의
1101명이 탐색했습니다.

掌握 JavaScript 编码:第 2 部分,条件

이 시리즈의 첫 번째 부분에서는 JavaScript로 코딩의 기본을 배우고 코드의 일부로 간단한 문장을 주로 작성했습니다. 이 구조는 우리가 할 수 있는 일을 심각하게 제한합니다. 사용자가 로그인해야 하는 프로그램을 설계한다고 가정해 보겠습니다. 사용자가 올바른 자격 증명을 제공한 경우 한 페이지로 이동하고, 등록되지 않은 경우 다른 페이지로 이동하도록 할 수 있습니다.

이를 위해서는 if 문과 같은 의사결정 구조를 사용해야 합니다. 이는 특정 조건에서만 작업을 수행합니다. 조건이 존재하지 않으면 아무 작업도 수행되지 않습니다. 이 튜토리얼에서는 조건에 대한 모든 것을 배웁니다.

  • If문
  • 관계 연산자
  • If-Else 문
  • 여러 If-Else 문
  • 스위치 설명
  • 논리 연산자

If문

단일 if 문은 조건이 true인 경우 작업을 수행합니다. 조건이 거짓이면 프로그램은 if 블록 외부에서 다음 명령문을 실행합니다. 다음 예에서 isRaining 为 true,则我们将 putOnCoat()putOnRainboots() 然后 goOutside().如果 isRaining 为 false,则程序将仅执行 goOutside().

으아악

if 문을 작성하는 일반적인 형식은 다음과 같습니다.

으아악

조건은 참 또는 거짓으로 평가되거나 참 또는 거짓으로 평가되는 표현식입니다. 참 또는 거짓인 표현식을 부울 표현식이라고 합니다. 부울 표현식은 관계 연산자로 구성됩니다.

관계 연산자

관계 연산자는 두 값을 비교하여 두 값 사이의 관계가 참인지 거짓인지 판단합니다. 조건에 대한 부울 표현식을 만드는 데 사용할 수 있습니다. 다음은 관계 연산자의 목록과 예입니다.

보다 큼
운영자 의미 의미
== 평등 x == y x는 y와 같나요?
=== 엄격한 평등 x === y x의 값과 유형이 y와 같나요?
!= 불평등 x!=y x는 y와 같지 않나요?
! == 엄격히 불평등 x !== y x의 값과 유형이 y와 같지 않나요?
> x > y x가 y보다 큽니까?
미만 x x가 y보다 작나요?
>= 보다 크거나 같음 x >= y x는 y보다 크거나 같나요?
작거나 같음 x x는 y보다 작거나 같나요?

请务必注意相等运算符 == 和严格相等运算符 === 之间的区别。例如,表达式 2 == "2" 为 true。但表达式 2 === "2" 是错误的。在第二个示例中,两个值是不同的数据类型,这就是表达式为 false 的原因。最佳实践是使用 ===!==

以下示例将显示消息“您获得 A”。

let grade = 93;

if (grade >= 90) {
    console.log("You get an A");
}
로그인 후 복사

If-Else 语句

如果条件为 true,if-else 语句将执行一个语句块;如果条件为 false,则执行另一个语句块。以下示例将显示消息“valid username”,因为条件为 true。

let username = "alberta";

if (username === "alberta") {
    console.log("Valid Username");
} else {
    console.log("Incorrect username. Try again.");
}
로그인 후 복사

这是 if-else 语句的一般形式:

if (condition) {
    statement;
    statement;
    etc.
} else {
    statement;
    statement;
    etc.
}
로그인 후 복사

测验

 这个程序的输出是什么?

let isLoggedIn = false;

if (isLoggedIn) {
    console.log("Welcome");
} else {
    console.log("You are not logged in");
}
로그인 후 복사

三元运算符

if-else 语句在编程中非常常见,因此有一个专用的三元运算符,它允许您在一行中编写简单的 if-else 语句。三元运算符是 JavaScript 中唯一接受三个操作数的运算符。

运算符接受开头的条件,后跟问号。问号后面跟着一个表达式,如果条件计算结果为真值,则执行该表达式。该表达式后跟一个冒号。冒号后面还有另一个表达式,如果条件计算结果为假值,则执行该表达式。

让我们看一个例子来清楚地说明这一点。我们从 sale_price 开始,它等于 max_price 变量。现在,如果 big_discount 的值计算为 true,我们将 sale_price 更改为 900。否则,sale_price 值设置为 950。由于我们已将 big_discount 设置为 true,所以 sale_price 值最终设置为 900。

let big_discount = true;
let max_price = 1000;
let sale_price = max_price;

if(big_discount) {
    sale_price = 900;
} else {
    sale_price = 950;
}
로그인 후 복사

这是最后一行中使用三元运算符编写的等效代码。基本上,如果 big_discount 计算结果为 true,则 sale_price 将设置为 900;如果 big_discount 计算结果为 falsephpcnendc,则 <code>sale_price 将设置为 950 phpcn.phpcn.就像前面的示例一样,big_discount 的值设置为 true,因此 sale_price 设置为 900。

let big_discount = true;
let max_price = 1000;
let sale_price = max_price;

sale_price = big_discount ? 900 : 950;
로그인 후 복사

多个 If-Else 语句

也可以检查多个条件。假设您正在跟踪商店中特定产品的库存,并根据其库存数量采取某些操作。代码看起来像这样:

let stock_count = 50;

if(stock_count > 80) {
    console.log("Large stock");
} else if (stock_count > 20) {
    console.log("Be Ready to Restock");
} else if (stock_count > 0) {
    console.log("Please Restock");
} else {
    console.log("Stop Selling");
}

// Outputs: Be Ready to Restock
로그인 후 복사

您应该注意到我如何使用 else if 而不仅仅是 if 来编写多个条件。如果您只想执行一个块,则可以采用这种方法。仅使用 if 编写条件可能会导致执行多个块,如下所示:

let stock_count = 50;

if(stock_count > 80) {
    console.log("Large stock");
} if (stock_count > 20) {
    console.log("Be Ready to Restock");
} if (stock_count > 0) {
    console.log("Please Restock");
} else {
    console.log("Stop Selling");
}

/* Outputs:
Be Ready to Restock
Please Restock */
로그인 후 복사

这是编写多个 if-else-if 语句的一般形式:

if (condition1) {
    statement;
    statement;
    etc.
} else if (condition2) {
    statement;
    statement;
    etc.
} else {
    statement;
    statement;
    etc.
}
로그인 후 복사

链式三元运算符

我们已经讨论了三元运算符如何通过替换简单的 if-else 语句来帮助我们编写更紧凑的代码。您可以以类似的方式使用链式三元运算符来复制多个 if-else 语句。这是一个例子:

let stock_count = 50;

console.log((stock_count > 80) ? "Large stock" : (stock_count > 20) ? "Be Ready to Restock" : (stock_count > 0) ? "Please Restock" : "Stop Selling");

// Outputs: Be Ready to Restock
로그인 후 복사

就像常规的 if-else 语句一样,我们首先检查 stock_count 是否超过 80。既然不是,我们进入下一个条件,检查 stock_count 是否超过 20。其计算结果为 true,因此我们得到字符串“Be Ready to Restock”。

Switch 语句

switch 语句还用于有条件地执行程序的某些部分。以下示例将我们的罗马数字转换器实现为 switch 语句:

let num = 3;

switch (num) {
    case 1:
        console.log("I");
        break;
    case 2:
        console.log("II");
        break;
    case 3:
        console.log("III");
        break;
    case 4:
       console.log("IV");
        break;
    case 5:
       console.log("V");
       break;
    default:
        console.log("Invalid input");
}
로그인 후 복사

这是 switch 语句的一般形式:

switch (expression) {
    case value1:
        statement;
        statement;
        etc.
        break;
    case value2:
        statement;
        statement;
        etc.
        break;
    default:
        statement;
        statement;
        etc.
}
로그인 후 복사

每种情况代表我们的表达式可以采用的值。只有情况正确的代码块才会执行。我们在代码块末尾包含一个break语句,以便程序退出switch语句并且不执行任何其他情况。当其他情况都不成立时,将执行默认情况。

任务

编写一个 switch 语句,根据给定的数字显示星期几。例如,1 = 星期日,2 = 星期一等。

逻辑运算符

and 运算符 && 和 or 运算符 || 允许我们连接两个布尔表达式。 not 运算符 ! 对表达式求反。为了说明逻辑运算符的工作原理,我们将查看真值表。真值表包含与运算符一起使用的所有值组合。我使用 P 表示左侧表达式,使用 Q 表示右侧表达式。

&& 真值表:

P P && Q
正确 正确 正确
正确
正确

我们阅读了表格中的每一行。第一行告诉我们,当P为真且Q为真时,P && Q为真。以下示例测试 x 是否在 60 到 100 之间(含 60 和 100)。

if (x >= 60 && x <= 100)
    console.log("Between 60 and 100.");
로그인 후 복사

|| 真值表:

P P ||问
正确 正确 正确
正确 正确
正确 正确

此示例测试 82 是否超出 60–100 范围:

if (x < 60 || x > 100) 
    console.log("Less than 60 or more than 100.");
로그인 후 복사

! 真值表:

P !P
正确
正确

示例:

if (! x)
    console.log("x iS false.");
로그인 후 복사

任务

用缺失值填写表格。

P !P !Q !P && !Q !P || !Q
正确 正确        
正确        
正确        
       

关于逻辑运算符,需要了解的一点是,如果 && 运算符左侧的表达式为 false,则不会检查右侧的表达式,因为整个语句都是 false。如果 || 运算符左侧的表达式为 true,则不会检查右侧的表达式,因为整个语句都为 true。

评论

程序可以使用布尔表达式有条件地执行代码块。布尔表达式是使用关系运算符编写的。逻辑运算符允许我们组合布尔表达式。

单个 if 语句为程序提供了满足条件时要采取的替代路径。如果条件为假,则 if-else 语句提供第二个操作方案。 if-else-if 语句允许我们测试多个条件。当您有多个条件需要测试时,Switch 语句可以用作 if-else-if 语句的替代方法。

在本系列的下一部分中,您将了解循环。

本文已根据 Monty Shokeen 的贡献进行了更新。 Monty 是一位全栈开发人员,他也喜欢编写教程并了解新的 JavaScript 库。

위 내용은 JavaScript 코딩 마스터하기: 2부, 조건의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!