使用JavaScript逻辑语句使你的代码做出灵活反应

95 阅读4分钟

使用JavaScript逻辑语句在你的代码中做出决定

本文将探讨逻辑语句如何使你的代码在获得不同的输入时作出灵活的反应。

在本节选中,我们将处理逻辑语句。逻辑语句允许我们在代码中做出多条路径。根据 某个表达式的结果,我们将遵循一个或另一个代码路径。

在用一个项目测试你的学习成果之前,我们将看看if和if-else语句。

if和if-else语句

我们可以使用if和if-else语句在我们的代码中做出决定。它非常像这个模板。

如果*某个条件为真*,那么*某个动作将发生*,否则*另一个动作将发生*。

例如,如果下雨了,我就会打伞,否则我就把伞留在家里。这在代码中并没有多大的不同。

JavaScript

let rain = true;
if(rain){
	console.log("** Taking my umbrella when I need to go outside **");
} else {
	console.log("** I can leave my umbrella at home **");
}

在这种情况下,雨的值是真。因此,它将记录到控制台。

** Taking my umbrella when I need to go outside **

但让我们先退一步,看看语法。我们以 "如果 "这个词开始。在这之后,我们得到括号内的东西。这些圆括号之间的东西将被翻译成布尔值。如果这个布尔值为真,它将执行与if相关的代码块。你可以通过大括号来识别这个代码块。

下一个代码块是可选的;它是一个else块。它以 "else "开头,只在布尔值为false的情况下执行。如果没有else块,并且条件评估为false,程序将直接跳到if下面的代码。

这两个块中只有一个会被执行;当表达式为真时,if块;当表达式为假时,else块。

JavaScript

if(expression) {
	// code associated with the if block
	// will only be executed if the expression is true
} else {
	// code associated with the else block
	// we don't need an else block, it is optional
	// this code will only be executed if the expression is false
}

下面是另一个例子。如果年龄低于18岁,则向控制台记录拒绝进入;否则,向控制台记录允许此人进来。

JavaScript

if(age < 18) {
	console.log("We're very sorry, but you can't get in under 18");
} else {
	console.log("Welcome!");
}

有一个常见的与if语句有关的编码错误,在下面的代码片段中已经出现了。你能看到这段代码的作用吗?

脚本

let hobby = "dancing";
if(hobby == "coding"){
	console.log("** I love coding too! **");
} else {
	console.log("** Can you teach me that? **");
}

它将记录以下内容。

** I love coding too! **

这可能会让你吃惊。这里的问题是if语句中的单一等号。它不是在评估条件,而是在给一个爱好分配编码。然后,它正在将 "编码 "转换为布尔值,由于它不是一个空字符串,它将成为真,所以if块将被执行。所以,在这种情况下,一定要记得使用双等号。

else-if 语句

if语句的一个变种是带有多个else-if块的if语句。这在某些情况下会更有效率,因为你总是只执行一个或零个块。如果你有许多if-else语句在彼此下面,它们将被评估并可能被执行,即使上面的其中一个已经有一个条件被评估为真并继续执行相关的代码块。

以下是书面模板。

如果*某个值属于某个类别*,那么*某个动作就会发生*,否则如果*该值属于与前述语句不同的类别*,那么*某个动作就会发生*,否则如果*该值属于与前述括号中任何一个不同的类别*,那么*某个动作就会发生*。

例如,拿这个语句来确定票价应该是多少。如果一个人小于3岁,那么访问是免费的;否则如果一个人大于3岁,小于12岁,那么访问是5美元,否则如果一个人大于12岁,小于65岁,那么访问是10美元,否则如果一个人是65岁或以上,那么访问是7美元。

JavaScript

let age = 10;
let cost = 0;
let message;

if (age < 3) {
	cost = 0;
	message = "Access is free under three.";
} else if (age >= 3 && age < 12) {
	cost = 5;
	message ="With the child discount, the fee is 5 dollars";
} else if (age >= 12 && age < 65) {
	cost = 10;
	message ="A regular ticket costs 10 dollars.";
} else {
	cost = 7;
	message ="A ticket is 7 dollars.";
}

console.log(message);
console.log("Your Total cost "+cost);

有可能你会认为代码比书面模板更容易阅读。在这种情况下,做得很好!你真的已经开始像一个 JavaScript开发者那样思考了。

代码从上到下被执行,而且只有其中一个块会被执行。只要遇到一个真表达式,其他的就会被忽略。这就是为什么我们也可以这样写我们的例子。

JavaScript

if(age < 3){
	console.log("Access is free under three.");
} else if(age < 12) {
	console.log("With the child discount, the fee is 5 dollars");
} else if(age < 65) {
	console.log("A regular ticket costs 10 dollars.");
} else if(age >= 65) {
	console.log("A ticket is 7 dollars.");
}

石头、布、剪子游戏

这是一个玩家和电脑之间的游戏,双方将随机选择石头、布或剪刀(你可以使用真实的玩家输入创建一个更复杂的版本,但我们的目的只是为了测试逻辑语句的使用)。岩石会打败剪刀,纸张会打败岩石,而剪刀会打败纸张。你可以使用JavaScript来创建你自己版本的这个游戏,用if语句来应用逻辑。由于这个项目有点难度,这里有一些建议的步骤。

  1. 创建一个数组,其中包含变量 "石头、纸和剪刀"。
  2. 设置一个变量,为玩家生成一个随机数字0-2,然后为计算机的选择做同样的事情。这个数字代表这3个项目在数组中的索引值。
  3. 创建一个变量来保存对用户的响应信息。这可以显示玩家的随机结果,然后也可以显示计算机从数组中匹配项目的结果。
  4. 创建一个条件来处理玩家和电脑的选择。如果两者相同,这将导致平局。
  5. 使用条件来应用游戏逻辑并返回正确的结果。使用条件语句有几种方法,但你可以检查哪个玩家的索引值大,并相应地分配胜利,石头打剪刀的情况除外。
  6. 添加一个新的输出信息,显示玩家的选择与计算机的选择以及游戏的结果。

答案

下面是完成前面任务的代码--你可以把它复制到你的 开发环境中,或者直接复制到你的浏览器的控制台窗口中

JavaScript

const myArr = ["Rock", "Paper", "Scissors"];
let computer = Math.floor(Math.random() * 3);
let player = Math.floor(Math.random() * 3);
let message = "player " + myArr[player] + " vs computer " + myArr[computer] + " ";

if (player === computer) {
	message += "it's a tie";
} else if (player > computer) {
	if (computer == 0 && player == 2) {
		message += "Computer Wins";
	} else {
		message += "Player Wins";
	}
} else {
	if (computer == 2 && player == 0) {
		message += "Player Wins";
	} else {
		message += "Computer Wins";
	}
}

console.log(message);

现在,让我们把事情做个总结。在本节选中,我们已经涵盖了条件语句。我们重点讨论了if和else语句。每当与if相关的条件为真,if块就会被执行。如果条件是假的,并且有一个else块存在,那就会被执行。然后,我们看了一个实际的练习,对这个逻辑进行了测试。

计算机 JavaScript 块

经Laurence Svekis许可发表于DZone。点击这里查看原文。

DZone贡献者所表达的观点属于他们自己。

在DZone上很受欢迎


评论

网络开发 合作伙伴资源