在JavaScript中，控制流（Control Flow）是指程序执行的顺序是如何被控制的。通过使用不同的控制结构，我们可以根据条件来决定程序的执行路径。下面将详细介绍JavaScript中的条件语句、循环语句以及break和continue语句，并通过具体的代码示例来说明它们的用法。
条件语句
if/else
if/else语句是JavaScript中最常用的条件语句之一，它允许根据一个或多个条件来决定是否执行一段代码。基本语法如下：
if (condition) {
// 如果条件为真，则执行这段代码
} else {
// 如果条件为假，则执行这段代码
}
示例：
let age = 20;
if (age >= 18) {
console.log("成年人");
} else {
console.log("未成年人");
}
三元运算符（Ternary Operator）
三元运算符提供了一种简洁的方式来根据条件返回不同的值。其语法如下：
(condition) ? value_if_true : value_if_false
示例：
let age = 20;
let status = (age >= 18) ? "成年人" : "未成年人";
console.log(status); // 输出：成年人
switch/case
switch/case语句用于基于不同的条件执行不同的代码块，特别适用于多条件选择的情况。基本语法如下：
switch (expression) {
case value1:
// 当expression等于value1时执行的代码
break;
case value2:
// 当expression等于value2时执行的代码
break;
default:
// 如果没有匹配到任何case，则执行这里的代码
}
示例：
let dayOfWeek = "Tuesday";
switch (dayOfWeek) {
case "Monday":
console.log("今天是星期一");
break;
case "Tuesday":
console.log("今天是星期二");
break;
default:
console.log("今天不是星期一也不是星期二");
}
循环语句
for
for循环非常适合已知循环次数的情况。基本语法如下：
for (initialization; condition; increment/decrement) {
// 循环体内的代码
}
示例：
for (let i = 0; i < 5; i++) {
console.log(i);
}
while
while循环在条件为真时持续执行。语法如下：
while (condition) {
// 循环体内的代码
}
示例：
let count = 0;
while (count < 5) {
console.log(count);
count++;
}
do…while
do...while循环至少会执行一次，即使条件一开始就是假的。语法如下：
do {
// 循环体内的代码
} while (condition);
示例：
let count = 0;
do {
console.log(count);
count++;
} while (count < 5);
break 和 continue
break用于立即退出循环或switch语句。continue用于跳过当前循环中的剩余部分，并直接开始下一次迭代。
示例：
// 使用break退出循环
let i = 0;
while (i < 10) {
if (i === 5) {
break;
}
console.log(i);
i++;
}
// 使用continue跳过某些迭代
let j = 0;
while (j < 10) {
j++;
if (j % 2 === 0) {
continue;
}
console.log(j);
}
实战案例：简单的计算器
接下来，我们通过一个简单的计算器示例来展示如何使用JavaScript中的控制流语句。这个计算器将接收用户输入的两个数字和一个运算符，并执行相应的运算。
function simpleCalculator() {
let num1 = parseFloat(prompt("请输入第一个数字:"));
let operator = prompt("请输入运算符 (+, -, *, /):");
let num2 = parseFloat(prompt("请输入第二个数字:"));
let result;
switch (operator) {
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
if (num2 === 0) {
alert("除数不能为零!");
return;
}
result = num1 / num2;
break;
default:
alert("无效的运算符!");
return;
}
alert(`${num1} ${operator} ${num2} = ${result}`);
}
simpleCalculator();
在这个例子中，我们使用了prompt函数来获取用户的输入，并使用了alert函数来显示结果。通过switch语句，我们根据用户输入的运算符来执行不同的运算。如果输入的运算符无效或者尝试除以零，我们会显示错误信息并结束函数。
我们继续扩展这个简单的计算器程序，并添加更多功能，使其更具实用性。我们将增加一个简单的用户界面来与用户交互，并添加历史记录功能以便用户可以查看之前的计算结果。
JavaScript 计算器示例
我们将使用HTML来创建一个简单的用户界面，并使用JavaScript来处理计算逻辑。此外，我们将存储计算的历史记录，并允许用户查看这些记录。
HTML 文件
首先，创建一个HTML文件来构建用户界面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单计算器</title>
</head>
<body>
<h1>简单计算器</h1>
<input type="number" id="num1" placeholder="输入第一个数字">
<input type="text" id="operator" placeholder="输入运算符 (+, -, *, /)">
<input type="number" id="num2" placeholder="输入第二个数字">
<button onclick="calculate()">计算</button>
<button onclick="showHistory()">查看历史记录</button>
<div id="result"></div>
<div id="history"></div>
<script src="calculator.js"></script>
</body>
</html>
JavaScript 文件 (calculator.js)
接下来，创建一个JavaScript文件来处理计算逻辑和存储历史记录：
let history = [];
function calculate() {
const num1 = parseFloat(document.getElementById('num1').value);
const operator = document.getElementById('operator').value;
const num2 = parseFloat(document.getElementById('num2').value);
let result;
switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
if (num2 === 0) {
alert("除数不能为零!");
return;
}
result = num1 / num2;
break;
default:
alert("无效的运算符!");
return;
}
history.push(`${num1} ${operator} ${num2} = ${result}`);
document.getElementById('result').innerText = `${num1} ${operator} ${num2} = ${result}`;
}
function showHistory() {
if (history.length === 0) {
alert("没有历史记录。");
return;
}
let historyText = "<ul>";
for (const entry of history) {
historyText += `<li>${entry}</li>`;
}
historyText += "</ul>";
document.getElementById('history').innerHTML = historyText;
}
解析代码
-
HTML 文件：
- 创建了三个输入框分别用于输入数字和运算符。
- 创建了两个按钮，一个用于触发计算，另一个用于显示历史记录。
-
JavaScript 文件：
calculate函数负责读取用户输入的数据，并根据运算符执行相应的计算。- 计算完成后，将结果保存在
history数组中，并更新页面上的结果显示区域。 showHistory函数用于显示所有保存的历史记录。如果历史记录为空，则提示用户没有历史记录。
运行示例
要运行这个示例，你需要将HTML和JavaScript代码分别保存为.html和.js文件，并在同一目录下打开HTML文件。你可以在浏览器中看到一个简单的计算器界面，并可以进行基本的数学运算，同时还能查看你的计算历史记录。
这个示例展示了如何在Web应用中使用JavaScript来处理控制流，并且通过简单的用户界面来增强用户体验。你可以根据需要进一步扩展这个程序，例如增加更多的数学功能，或者改善用户界面设计。
我们继续扩展这个计算器程序，并进一步增加一些实用的功能，如支持复数运算、增加错误处理机制、以及优化用户界面等。下面我们将逐步实现这些功能。
扩展功能：支持复数运算
为了让计算器支持复数运算，我们需要定义一个Complex对象来表示复数，并实现相应的运算方法。然后，在用户界面中增加对复数的支持。
定义复数对象
首先，在JavaScript中定义一个Complex类来表示复数，并实现基本的复数运算方法：
class Complex {
constructor(real, imaginary) {
this.real = real;
this.imaginary = imaginary;
}
add(other) {
return new Complex(this.real + other.real, this.imaginary + other.imaginary);
}
subtract(other) {
return new Complex(this.real - other.real, this.imaginary - other.imaginary);
}
multiply(other) {
const realPart = this.real * other.real - this.imaginary * other.imaginary;
const imaginaryPart = this.real * other.imaginary + this.imaginary * other.real;
return new Complex(realPart, imaginaryPart);
}
divide(other) {
const denominator = other.real * other.real + other.imaginary * other.imaginary;
const realPart = (this.real * other.real + this.imaginary * other.imaginary) / denominator;
const imaginaryPart = (this.imaginary * other.real - this.real * other.imaginary) / denominator;
return new Complex(realPart, imaginaryPart);
}
toString() {
return `${this.real}${this.imaginary >= 0 ? '+' : ''}${this.imaginary}i`;
}
}
更新用户界面和支持复数输入
接下来，我们需要在用户界面中支持复数输入，并更新calculate函数以处理复数运算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单计算器</title>
</head>
<body>
<h1>简单计算器</h1>
<input type="text" id="num1" placeholder="输入第一个数字或复数（实部,虚部）">
<input type="text" id="operator" placeholder="输入运算符 (+, -, *, /)">
<input type="text" id="num2" placeholder="输入第二个数字或复数（实部,虚部）">
<button onclick="calculate()">计算</button>
<button onclick="showHistory()">查看历史记录</button>
<div id="result"></div>
<div id="history"></div>
<script>
let history = [];
class Complex {
constructor(real, imaginary) {
this.real = real;
this.imaginary = imaginary;
}
add(other) {
return new Complex(this.real + other.real, this.imaginary + other.imaginary);
}
subtract(other) {
return new Complex(this.real - other.real, this.imaginary - other.imaginary);
}
multiply(other) {
const realPart = this.real * other.real - this.imaginary * other.imaginary;
const imaginaryPart = this.real * other.imaginary + this.imaginary * other.real;
return new Complex(realPart, imaginaryPart);
}
divide(other) {
const denominator = other.real * other.real + other.imaginary * other.imaginary;
const realPart = (this.real * other.real + this.imaginary * other.imaginary) / denominator;
const imaginaryPart = (this.imaginary * other.real - this.real * other.imaginary) / denominator;
return new Complex(realPart, imaginaryPart);
}
toString() {
return `${this.real}${this.imaginary >= 0 ? '+' : ''}${this.imaginary}i`;
}
}
function parseComplex(input) {
const parts = input.split(',');
if (parts.length !== 2) {
throw new Error("Invalid complex number format.");
}
const real = parseFloat(parts[0]);
const imaginary = parseFloat(parts[1]);
return new Complex(real, imaginary);
}
function calculate() {
try {
const num1 = document.getElementById('num1').value.includes(',') ? parseComplex(document.getElementById('num1').value) : parseFloat(document.getElementById('num1').value);
const operator = document.getElementById('operator').value;
const num2 = document.getElementById('num2').value.includes(',') ? parseComplex(document.getElementById('num2').value) : parseFloat(document.getElementById('num2').value);
let result;
switch (operator) {
case '+':
result = num1 instanceof Complex ? num1.add(num2) : num1 + num2;
break;
case '-':
result = num1 instanceof Complex ? num1.subtract(num2) : num1 - num2;
break;
case '*':
result = num1 instanceof Complex ? num1.multiply(num2) : num1 * num2;
break;
case '/':
if (num2 instanceof Complex && (num2.real === 0 && num2.imaginary === 0)) {
alert("除数不能为零!");
return;
}
result = num1 instanceof Complex ? num1.divide(num2) : num1 / num2;
break;
default:
alert("无效的运算符!");
return;
}
history.push(`${num1.toString()} ${operator} ${num2.toString()} = ${result.toString()}`);
document.getElementById('result').innerText = `${num1.toString()} ${operator} ${num2.toString()} = ${result.toString()}`;
} catch (error) {
alert(error.message);
}
}
function showHistory() {
if (history.length === 0) {
alert("没有历史记录。");
return;
}
let historyText = "<ul>";
for (const entry of history) {
historyText += `<li>${entry}</li>`;
}
historyText += "</ul>";
document.getElementById('history').innerHTML = historyText;
}
</script>
</body>
</html>
新增功能总结
在这个版本中，我们实现了以下功能：
- 支持复数运算：用户现在可以输入形如
实部,虚部的复数，并执行基本的数学运算。 - 增强错误处理：对于无效的输入或运算，程序会捕获错误并给出相应的提示。
- 优化用户界面：输入框支持输入复数，并且显示结果时会正确地显示复数格式。
这个版本的计算器不仅可以处理实数运算，还能处理复数运算，并且具备一定的错误处理能力，使程序更加健壮。用户可以方便地查看他们的计算历史记录，并且界面更加友好。
我们继续扩展和完善这个计算器程序。接下来，我们将进一步提升用户体验，包括添加清除输入的功能、优化历史记录的显示方式，并引入更详细的错误提示。此外，我们还将改进代码组织结构，使其更易于维护和扩展。
改进用户界面
我们将添加一个清除输入的按钮，并优化历史记录的显示方式，使其更易于阅读。
HTML 文件
在HTML文件中添加一个清除输入的按钮，并调整历史记录的显示样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单计算器</title>
<style>
#result, #history {
margin-top: 10px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
#history ul {
list-style-type: none;
padding-left: 0;
}
#history li {
margin-bottom: 5px;
}
</style>
</head>
<body>
<h1>简单计算器</h1>
<input type="text" id="num1" placeholder="输入第一个数字或复数（实部,虚部）">
<input type="text" id="operator" placeholder="输入运算符 (+, -, *, /)">
<input type="text" id="num2" placeholder="输入第二个数字或复数（实部,虚部）">
<button onclick="calculate()">计算</button>
<button onclick="clearInputs()">清除输入</button>
<button onclick="showHistory()">查看历史记录</button>
<div id="result"></div>
<div id="history"></div>
<script src="calculator.js"></script>
</body>
</html>
JavaScript 文件 (calculator.js)
接下来，我们在JavaScript文件中实现清除输入的功能，并改进错误提示信息。
let history = [];
class Complex {
constructor(real, imaginary) {
this.real = real;
this.imaginary = imaginary;
}
add(other) {
return new Complex(this.real + other.real, this.imaginary + other.imaginary);
}
subtract(other) {
return new Complex(this.real - other.real, this.imaginary - other.imaginary);
}
multiply(other) {
const realPart = this.real * other.real - this.imaginary * other.imaginary;
const imaginaryPart = this.real * other.imaginary + this.imaginary * other.real;
return new Complex(realPart, imaginaryPart);
}
divide(other) {
const denominator = other.real * other.real + other.imaginary * other.imaginary;
const realPart = (this.real * other.real + this.imaginary * other.imaginary) / denominator;
const imaginaryPart = (this.imaginary * other.real - this.real * other.imaginary) / denominator;
return new Complex(realPart, imaginaryPart);
}
toString() {
return `${this.real}${this.imaginary >= 0 ? '+' : ''}${this.imaginary}i`;
}
}
function parseComplex(input) {
const parts = input.split(',');
if (parts.length !== 2) {
throw new Error("无效的复数格式，请输入形如 实部,虚部 的复数。");
}
const real = parseFloat(parts[0]);
const imaginary = parseFloat(parts[1]);
return new Complex(real, imaginary);
}
function calculate() {
try {
const num1 = document.getElementById('num1').value.includes(',') ? parseComplex(document.getElementById('num1').value) : parseFloat(document.getElementById('num1').value);
const operator = document.getElementById('operator').value;
const num2 = document.getElementById('num2').value.includes(',') ? parseComplex(document.getElementById('num2').value) : parseFloat(document.getElementById('num2').value);
let result;
switch (operator) {
case '+':
result = num1 instanceof Complex ? num1.add(num2) : num1 + num2;
break;
case '-':
result = num1 instanceof Complex ? num1.subtract(num2) : num1 - num2;
break;
case '*':
result = num1 instanceof Complex ? num1.multiply(num2) : num1 * num2;
break;
case '/':
if (num2 instanceof Complex && (num2.real === 0 && num2.imaginary === 0)) {
throw new Error("除数不能为零！");
}
result = num1 instanceof Complex ? num1.divide(num2) : num1 / num2;
break;
default:
throw new Error("无效的运算符！");
}
history.push(`${num1.toString()} ${operator} ${num2.toString()} = ${result.toString()}`);
document.getElementById('result').innerText = `${num1.toString()} ${operator} ${num2.toString()} = ${result.toString()}`;
} catch (error) {
alert(error.message);
}
}
function clearInputs() {
document.getElementById('num1').value = '';
document.getElementById('operator').value = '';
document.getElementById('num2').value = '';
document.getElementById('result').innerText = '';
}
function showHistory() {
if (history.length === 0) {
alert("没有历史记录。");
return;
}
let historyText = "<ul>";
for (const entry of history) {
historyText += `<li>${entry}</li>`;
}
historyText += "</ul>";
document.getElementById('history').innerHTML = historyText;
}
新增功能总结
在这个版本中，我们实现了以下功能：
- 清除输入：用户可以点击“清除输入”按钮来清空输入框和结果区域。
- 更详细的错误提示：对于无效的输入或运算，程序会给出具体的错误提示信息。
- 优化历史记录显示：历史记录将以列表的形式显示，并且每条记录之间有适当的间距，便于阅读。
通过这些改进，我们的计算器变得更加用户友好，并且具有更好的错误处理机制。用户可以方便地使用这个计算器来进行数学运算，并查看他们的计算历史记录。
总结
这个计算器程序现在已经具备了基本的数学运算能力，支持实数和复数运算，并且拥有一定的错误处理能力和用户友好的界面。未来还可以继续扩展功能，如增加更多的数学函数、支持科学记数法、图形化界面等等。希望这个示例对你有所帮助！
扫一扫
995
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
