JavaScript-------循环

最新推荐文章于 2024-08-11 13:28:48 发布

原创最新推荐文章于 2024-08-11 13:28:48 发布 · 443 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #java

文章详细介绍了在JavaScript中使用for、break、continue以及while和do...while循环处理数组和字符串的操作，包括在HTML中创建<p>标签，并展示了如何在循环中正确控制流程以达到预期结果。

1.for循环：

在html中创建一个<p>标签

在js文件中编写：

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;

结果展示：

可以看出句子最后是逗号结尾，我们需要改变最后循环迭代中的连接，让句子末尾没有逗号。

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++){
  if(i===cats.length-1){
    info += "and"+cats[i]+".";
  }else{
    info += cats[i] + ",";
  }
}
para.textContent = info;

结果展示：

2.break退出循环：

在html文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      <label for="search">输入名字查询号码：</label>
      <input id="search" type="text" />
      <button>开始查找</button>
      <p></p>
      <script src="scripts/main1.js" defer></script> 
</body>
</html>

在js文件中：

const contacts =[
  "nell:111111",
  "bob:222222",
  "mary:3333333",
];
const para = document.querySelector("p");
const input = document.querySelector("input");
const btn = document.querySelector("button");
btn.addEventListener("click",function(){
  let searchName = input.value.toLocaleLowerCase();
  input.value = "";
  input.focus();
  for (let i = 0; i < contacts.length; i++) {
    let 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.";
    }
  }
});

首先我们有一些变量定义 - 我们有一个联系信息数组，每个项目是一个字符串，包含一个以冒号分隔的名称和电话号码。
将一个事件监听器附加到按钮（btn）上，这样当按下它时，运行代码来执行搜索并返回结果。
将输入的值输入到一个名为searchName的变量中，然后清空文本输入并重新对准它，准备进行下一个搜索。
现在有趣的部分，for 循环：
1. 我们的计数器开始时为在 0，直到计数器不再小于contacts.length，并在循环的每次迭代之后将i递增 1。
2. 在循环中，我们首先将当前联系人（contacts [i]）拆分为冒号字符，并将生成的两个值存储在名为splitContact的数组中。
3. 然后，我们使用条件语句来测试splitContact [0]（联系人姓名）是否等于输入的searchName。如果是，我们在段落中输入一个字符串来报告联系人的号码，并使用 break 来结束循环。
在(contacts.length-1) 迭代后，如果联系人姓名与输入的搜索不符，则段落文本设置为“未找到联系人”，循环继续迭代。

结果展示：

3.continue

continue 语句：不是完全跳出循环，而是跳过当前循环而执行下一个循环。

把一个数字作为一个输入，并且只返回开平方之后为整数的数字

在html文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <label for="search">输入数字：</label>
      <input id="search" type="number" />
      <button>开始计算</button>
      <p>输出：</p>
      <script src="scripts/main1.js" defer></script> 
</body>
</html>

在js文件中：

var para = document.querySelector("p");
var input = document.querySelector("input");
var btn = document.querySelector("button");

btn.addEventListener("click", function () {
  para.textContent = "输出： ";
  var num = input.value;
  input.value = "";
  input.focus();
  for (var i = 1; i <= num; i++) {
    var sqRoot = Math.sqrt(i);
    if (Math.floor(sqRoot) !== sqRoot) {
      continue;
    }

    para.textContent += i + " ";
  }
});

for 循环给定一个从 1 开始的计数器，一个退出条件，当计数器大于输入num时循环将停止，并且迭代器的计数器将每次增加 1。
在循环中，我们使用Math.sqrt(i)找到每个数字的平方根，然后测试平方根是否是一个整数，通过判断当它被向下取整时，它是否与自身相同（这是Math.floor(...)对传递的数字的作用）。
如果平方根和四舍五入的平方根不相等（!==），则表示平方根不是整数，因此我们对此不感兴趣。在这种情况下，我们使用 continue 语句跳过当前循环而执行下一个循环迭代，而不在任何地方记录该数字。
如果平方根是一个整数，我们完全跳过 if 块，所以 continue 语句不被执行; 相反，我们将当前 i 值加上一个空格连接到段落内容的末尾。

结果展示：

4.while语句和do...while语句

在html中创建一个<p>标签

在js文件中编写：

var cats = ["Bill", "Jeff", "Pete", "Biggles", "Jasmin"];
var info = "My cats are called ";
var para = document.querySelector("p");
var i = 0;
do {
  if (i === cats.length - 1) {
    info += "and " + cats[i] + ".";
  } else {
    info += cats[i] + ", ";
  }

  i++;
} while (i < cats.length);
para.textContent = info;

结果展示：