Random canvas circles
创作时间:
作者:
@小白创作中心
Random canvas circles
引用
1
来源
1.
https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting/Loops
循环是编程中处理重复性任务的重要工具。从简单的计数到复杂的数组遍历，掌握循环结构是每个程序员的必备技能。本文将详细介绍JavaScript中的循环概念、不同类型及其应用场景，通过丰富的示例代码帮助你快速掌握这一核心编程技术。
循环的基本概念
编程语言可以很迅速方便地帮我们完成一些重复性的任务，从多个基本计算到几乎完成了很多类似工作的其他情况。现在我们来看看处理这种需求的 JavaScript 中可用的循环结构。
循环的三个要素
循环通常需要三个关键要素：
- 开始条件：初始化为一个特定值，这是循环的起点。
- 结束条件：循环停止的标准，通常是一个计数器达到一定值。
- 迭代器：在每个连续循环上递增或递减计数器，直到达到退出条件。
让我们通过一个简单的例子来理解这些概念：
在这个例子中：
- 开始条件是农民的食物数量为0。
- 结束条件是农民需要的食物量达到10份。
- 迭代器是农民每小时收集2份食物。
在伪代码中，这个过程可以表示为：
loop(food = 0; foodNeeded = 10) {
if (food = foodNeeded) {
exit loop;
// 我们有足够的食物了，回家吧。
} else {
food += 2; // 花一个小时多收集两个食物。
// 循环将会继续执行。
}
}
循环的实际应用
循环在编程中非常有用，特别是在需要重复执行相同或类似任务的情况下。例如，绘制多个随机圆：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Random canvas circles</title>
<style>
html {
width: 100%;
height: inherit;
background: #ddd;
}
canvas {
display: block;
}
body {
margin: 0;
}
button {
position: absolute;
top: 5px;
left: 5px;
}
</style>
</head>
<body>
<button>Update</button>
<canvas></canvas>
<script>
var btn = document.querySelector("button");
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var WIDTH = document.documentElement.clientWidth;
var HEIGHT = document.documentElement.clientHeight;
canvas.width = WIDTH;
canvas.height = HEIGHT;
function random(number) {
return Math.floor(Math.random() * number);
}
function draw() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
for (var i = 0; i < 100; i++) {
ctx.beginPath();
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
ctx.fill();
}
}
btn.addEventListener("click", draw);
</script>
</body>
</html>
在这个例子中，我们使用了一个循环来绘制100个随机圆。如果没有循环，我们需要重复100次相同的代码，这将非常繁琐且难以维护。
标准循环结构
JavaScript提供了多种循环结构，其中最常用的是for循环。
for循环
for循环的语法如下：
for (initializer; condition; final-expression) {
// 要运行的代码
}
- 初始化器：通常是一个设置为数字的变量，用于计算循环运行次数。
- 退出条件：定义循环何时停止。
- 最终表达式：每次循环迭代后执行，通常用于更新计数器。
实例：遍历数组
var cats = ["Bill", "Jeff", "Pete", "Biggles", "Jasmin"];
var info = "My cats are called ";
var para = document.querySelector("p");
for (var i = 0; i < cats.length; i++) {
info += cats[i] + ", ";
}
para.textContent = info;
输出结果：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Basic for loop example</title>
<style></style>
</head>
<body>
<p></p>
<script>
var cats = ["Bill", "Jeff", "Pete", "Biggles", "Jasmin"];
var info = "My cats are called ";
var para = document.querySelector("p");
for (var i = 0; i < cats.length; i++) {
info += cats[i] + ", ";
}
para.textContent = info;
</script>
</body>
</html>
使用break退出循环
break语句可以在满足特定条件时提前退出循环。例如，搜索联系人列表：
<label for="search">Search by contact name: </label>
<input id="search" type="text" />
<button>Search</button>
<p></p>
<script>
var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
var para = document.querySelector('p');
var input = document.querySelector('input');
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
var searchName = input.value.toLowerCase();
input.value = '';
input.focus();
for (var i = 0; i < contacts.length; i++) {
var splitContact = contacts[i].split(':');
if (splitContact[0].toLowerCase() === searchName) {
para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
break;
} else if (i === contacts.length-1)
para.textContent = 'Contact not found.';
}
}
});
</script>
使用continue跳过迭代
continue语句可以跳过当前循环迭代，直接进入下一次迭代。例如，查找平方根为整数的数字：
var num = input.value;
for (var i = 1; i <= num; i++) {
var sqRoot = Math.sqrt(i);
if (Math.floor(sqRoot) !== sqRoot) {
continue;
}
para.textContent += i + " ";
}
其他循环类型
除了for循环，JavaScript还提供了while和do...while循环。
while循环
while循环的语法如下：
initializer
while (condition) {
// 要运行的代码
final-expression
}
do...while循环
do...while循环的语法如下：
initializer
do {
// 要运行的代码
final-expression
} while (condition)
实例：使用do...while循环遍历数组
var i = 0;
do {
if (i === cats.length - 1) {
info += "and " + cats[i] + ".";
} else {
info += cats[i] + ", ";
}
i++;
} while (i < cats.length);
主动学习：启动倒计时
尝试编写一个从10倒计时到0的循环：
<div class="output" style="height: 410px;overflow: auto;"></div>
<textarea id="code" class="playable-code" style="height: 300px;">
var output = document.querySelector('.output');
output.innerHTML = '';
// var i = 10;
// var para = document.createElement('p');
// para.textContent = ;
// output.appendChild(para);
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
<input id="solution" type="button" value="Show solution" />
</div>
<script>
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var solution = document.getElementById("solution");
var code = textarea.value;
function updateCode() {
eval(textarea.value);
}
reset.addEventListener("click", function () {
textarea.value = code;
updateCode();
});
solution.addEventListener("click", function () {
textarea.value = jsSolution;
updateCode();
});
var jsSolution =
"var output = document.querySelector('.output');\noutput.innerHTML = '';\n\nvar i = 10;\n\nwhile(i >= 0) {\n var para = document.createElement('p');\n if(i === 10) {\n para.textContent = 'Countdown ' + i;\n } else if(i === 0) {\n para.textContent = 'Blast off!';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}";
textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);
</script>
主动学习：填写来宾列表
尝试过滤掉特定名字的来宾：
<div class="output" style="height: 100px;overflow: auto;">
<p class="admitted">Admit:</p>
<p class="refused">Refuse:</p>
</div>
<textarea id="code" class="playable-code" style="height: 400px;">
var people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];
var admitted = document.querySelector('.admitted');
var refused = document.querySelector('.refused');
admitted.textContent = 'Admit: ';
refused.textContent = 'Refuse: '
// var i = 0;
// refused.textContent += ;
// admitted.textContent += ;
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
<input id="solution" type="button" value="Show solution" />
</div>
<script>
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var solution = document.getElementById("solution");
var code = textarea.value;
function updateCode() {
eval(textarea.value);
}
reset.addEventListener("click", function () {
textarea.value = code;
updateCode();
});
solution.addEventListener("click", function () {
textarea.value = jsSolution;
updateCode();
});
var jsSolution =
"var people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];\n\nvar admitted = document.querySelector('.admitted');\nvar refused = document.querySelector('.refused');\n\nvar i = 0;\n\ndo {\n if(people[i] === 'Phil' || people[i] === 'Lola') {\n refused.textContent += people[i] + ', ';\n } else {\n admitted.textContent += people[i] + ', ';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + '.';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + '.';";
textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);
</script>
选择合适的循环类型
对于基本用途，for、while和do...while循环大部分可互换。但是，for循环可能更容易记住和使用，因为它将初始化器、退出条件和最终表达式都放在括号中。
for循环
for (initializer; exit-condition; final-expression) {
// code to run
}
while循环
initializer
while (exit-condition) {
// 要运行的代码
final-expression
}
do...while循环
initializer
do {
// 要运行的代码
final-expression
} while (exit-condition)
总结
本文详细介绍了JavaScript中的循环结构，包括基本概念、不同类型及其应用场景。通过丰富的示例代码和练习，帮助读者掌握循环的使用方法。循环是编程中处理重复性任务的重要工具，掌握它将使你的编程能力更上一层楼。
本文原文来自Mozilla开发者网络
热门推荐
西藏的丧葬文化，西藏各地丧葬文化
家庭茶叶存放指南：这些细节你做对了吗？
花卉修剪后为什么长得更好
带观赏鱼？小心鱼儿“旅行”不适！
养老保险办理指南：各类人群所需材料全解析
《猫三国》游戏核心玩法攻略：最强阵容及角色解析
美林虽好，但别买错了！
中医针灸：传统医学的神秘艺术
银河奥特曼：值得培养的宇宙英雄角色深度解析
白头发多吃维生素b有用吗为什么
法律对经营范围规定有哪些？如何认定经营范围？
春天吃香椿的科学指南：营养价值与食用禁忌全解析
高校阅卷的评分标准与教学质量
痛风发作：降尿酸药物何时用，何时停？
卡罗拉后排放倒教程是什么
首次看清！阿尔茨海默病关键病理蛋白在人脑里的高清图像
2025 AI时代健康睡眠白皮书：数据解析国人睡眠现状与未来趋势
初创公司如何构建高效协作的团队
英超前瞻：切尔西迎伤病回归，热刺深陷保级泥潭
花青素是什麼？解說4大功效+12種高含量食物！
管理项目的更换原则有哪些
18个工位要多大面积的办公室？
桂林这3处小众景点，全部去过的人并不多！
餐饮行业动态：魏家凉皮回应预制菜质疑，达美乐Q3营收10.8亿美元
Nature Genetics：解析杂合基因变异的渐进效应：破解复杂疾病的关键
广州中山纪念堂第四届木棉文化节启动：非遗、科技与文化创新交融
对方砸车打人应有什么赔偿
什么决定了子孙的“成功”？美教授揭开社会地位流动的两个秘密因素
早期宇宙中的超大质量黑洞的形成得到了解释
木棉花的春天