JavaScript语句

JavaScript 2

目录

6 JavaScript条件语句

在 JavaScript 中，我们可使用如下条件语句：

  • 使用 if 来规定要执行的代码块，如果指定条件为 true
  • 使用 else 来规定要执行的代码块，如果相同的条件为 false
  • 使用 else if 来规定要测试的新条件，如果第一个条件为 false
  • 使用 switch 来规定多个被执行的备选代码块
6.1 if 语句

如果条件真，demo新内容覆盖，如果假，{}内容不执行，显示内容还是原来标签中的文本内容

id="demo"：具有id属性为"demo"的段落元素。（id（Identifier）是用于给元素指定一个唯一的标识符）

image-20230814151241190

  • 在条件为真的情况下，document.getElementById("demo").innerHTML = "Good day!"这行代码会执行，它会将id为"demo"的元素的内容更改为"Good day!“，覆盖原来的"晚上好！”。
  • 如果条件为假（当前时间晚于下午6点或等于下午6点），则不会执行花括号内的代码，段落元素的内容仍然是原始的"晚上好！"。

拓展：

new Date()：创建一个新的Date对象的语法。

const 是JavaScript中用于声明常量的关键字。(var 是JavaScript中用于声明变量的关键字)

const year = new Date().getFullYear(); // 获取当前年份
const month = new Date().getMonth() + 1; // 获取当前月份（注意：月份从0开始，需要加1）
const day = new Date().getDate(); // 获取当前日期
const hours = new Date().getHours(); // 获取当前小时
const minutes = new Date().getMinutes(); // 获取当前分钟
const seconds = new Date().getSeconds(); // 获取当前秒数
const Day = new Date().getDay(); //获取当前周几

const currentDate = new Date(); // 创建一个Date对象，表示当前时间

const year = currentDate.getFullYear(); // 获取当前年份
const month = currentDate.getMonth() + 1; // 获取当前月份（注意：月份从0开始，需要加1）
const day = currentDate.getDate(); // 获取当前日期
const hours = currentDate.getHours(); // 获取当前小时
const minutes = currentDate.getMinutes(); // 获取当前分钟
const seconds = currentDate.getSeconds(); // 获取当前秒数
const Day = currentDate.getDay(); //获取当前周几
6.2 else 语句

else 语句用来规定假如条件为 false 时的代码块。

image-20230814152840408

6.3 else if 语句

使用 else if 来规定当首个条件为 false 时的新条件。

image-20230814153733168

7 JavaScript Switch 语句

7.1 JavaScript Switch 语句

switch 语句用于基于不同条件执行不同动作。

getDay() 方法返回 0 至 6 之间的周名数字

代码解释：

  • 计算一次 switch 表达式
  • 把表达式的值与每个 case 的值进行对比
  • 如果存在匹配，则执行关联代码
  • 如果不匹配，则执行默认代码

image-20230814155617998

image-20230814160445021
7.2 break 关键词
  • 如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。
  • 此举将停止代码块中更多代码的执行以及 case 测试。
  • 如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。
  • break 能够节省大量执行时间，因为它会"忽略" switch 代码块中的其他代码的执行。

image-20230814162129651

7.3 default 关键词

default 关键词规定不存在 case 匹配时所运行的代码：

如果 default 不是 switch 代码块中最后一个 case，请记得用 break 结束默认 case。

image-20230814161517224

重要注意事项:在switch代码块中如果default不是最后一个case，需要记得使用break语句来结束默认case，以防止不必要的代码执行。

switch语句的基本结构：switch语句用于根据表达式的值选择执行不同的代码块。它的语法如下：

switch(expression) {
  case value1:
    // 代码块 1
    break;
  case value2:
    // 代码块 2
    break;
  // more cases...
  default:
    // 默认代码块
    break;
}

在switch语句中，expression是需要进行比较的表达式，每个case后面的value是可选的比较值。当expression的值与某个case的值相等时，会执行相应的代码块。如果和所有case的值都不匹配，就会执行default代码块。default代码块是可选的，用于处理没有匹配的情况。

回到原始的句子，它提醒我们，如果default不是最后一个case，我们应该记得在代码块的最后使用break关键字来阻止执行后续代码块。如果忘记了使用break，程序会继续执行下一个case或default代码块，这可能会产生意外的行为。以下是代码示例来说明这个问题：

let fruit = "apple";
switch (fruit) {
  case "apple":
    console.log("Selected apple");
    break;
  case "banana":
    console.log("Selected banana");
    // 注意这里没有使用 break
  default:
    console.log("Selected fruit");
    break;
}

在这个示例中，fruit的值是"apple"。由于匹配到了第一个case，它会输出"Selected apple"，然后执行到case "banana"。由于这里没有使用break，代码会继续执行下一个代码块default，输出"Selected fruit"。这是因为没有使用break，导致控制流继续向下执行，而不是跳出switch语句。

因此，确保在default不是最后一个case的情况下，在每个代码块的最后都使用break语句，以避免意外执行其他代码块。

示例：

image-20230814162805360
7.4 常见的代码块

有时您会需要不同的 case 来使用相同的代码。

在本例中，case 4 和 5 分享相同的代码块，而 0 和 6 分享另一段代码块：

image-20230814163209343 image-20230814163310816
7.5 Switching 的细节
  • 如果多种 case 匹配一个 case 值，则选择第一个 case。

示例代码：

let num = 2;
switch (num) {
  case 1:
    console.log("Case 1");
    break;
  case 2:
    console.log("Case 2");
    break;
  case 3:
    console.log("Case 3");
    break;
  default:
    console.log("Default case");
}

解释：在这个示例中，num的值是2。由于case 2匹配num的值，它会执行Case 2的代码块。case 1和case 3也都匹配，但由于是选择第一个匹配的case，所以它们不会被执行。

  • 如果未找到匹配的 case，程序将继续使用默认 label。

示例代码：

let fruit = "watermelon";
switch (fruit) {
  case "apple":
    console.log("Selected apple");
    break;
  case "banana":
    console.log("Selected banana");
    break;
  default:
    console.log("Selected default");
}

解释：在这个示例中，fruit的值是"watermelon"。由于没有case匹配到fruit的值，程序会执行default标签下的代码块，输出"Selected default"。

  • 如果未找到默认 label，程序将继续 switch 后的语句。

示例代码：

let num = 4;
switch (num) {
  case 1:
    console.log("Case 1");
    break;
  case 2:
    console.log("Case 2");
    break;
}
console.log("Switch complete.");

解释：在这个示例中，num的值是4。由于没有与任何case匹配的情况，并且没有默认标签，switch语句将不执行任何代码块。之后的语句console.log("Switch complete.")将会继续执行输出"Switch complete."。

注：console.log()是JavaScript中常用的一个函数，用于将消息或变量输出到浏览器的控制台上。

7.6 严格的比较

Switch case 使用严格比较（===）。

值必须与要匹配的类型相同。

只有操作数属于同一类型时，严格比较才能为 true。

例：

image-20230814163755894

image-20230814163943393

8 JavaScript For 循环

JavaScript 支持不同类型的循环：

  • for - 多次遍历代码块
  • for/in - 遍历对象属性
  • for/of - 循环遍历 iterable 对象的值
  • while - 当指定条件为 true 时循环一段代码块
  • do/while - 当指定条件为 true 时循环一段代码块
8.1 For 循环

for 循环是创建循环时经常使用的工具。

for 循环的语法如下：

for (statement 1; statement 2; statement 3) {
// 要执行的代码块
}

语句 1 在循环（代码块）开始之前执行。

语句 2 定义运行循环（代码块）的条件。

语句 3 会在循环（代码块）每次被执行后执行。语句3是在每次循环结束后进行计算的。

image-20230814165358696

image-20230814165834201

语句 1

通常，您会使用语句 1 来初始化循环中所使用的的变量（i = 0）。

但情况并不总是这样，JavaScript 不会在意。语句 1 是可选的。

您可以在语句 1 中初始化多个值（由逗号分隔）：

image-20230814170230780

而且您还可以省略语句 1（比如在循环开始前设置好值）：

image-20230814170503829

语句 2

通常语句 2 用于计算初始变量的条件。

但情况并不总是这样，JavaScript 不会在意。语句 2 也是可选的。

如果语句 2 返回 true，那么循环会重新开始，如果返回 false，则循环将结束。

注：如果省略语句 2，那么必须在循环中提供一个 break。否则循环永远不会结束。

image-20230814171551491

语句 3

通常语句 3 会递增初始变量的值。

但情况并不总是这样，JavaScript 不会在意。语句 3 也是可选的。

语句 3 可做任何事情，比如负递增（i--），正递增（i = i + 15），或者任何其他事情。

语句 3 也可被省略（比如当您在循环内递增值时）：（x = x + 1、x += 1或者x++）

image-20230814173632153

document（暂时记在此处）

document 是 JavaScript 中的一个内置对象，表示当前的网页文档。它提供了访问和操作网页内容的方法和属性。

通过document对象，我们可以执行以下操作：

  1. 访问和操作 HTML 元素：
    • 例如，使用document.getElementById('elementId')可以获取具有指定 id 的 HTML 元素。
    • 使用document.querySelector('selector')可以使用选择器选择并获取第一个匹配的 HTML 元素。
    • 使用document.querySelectorAll('selector')可以使用选择器选择并获取所有匹配的 HTML 元素。
    • 通过这些方法获取的 HTML 元素可以进一步操作，比如更改其属性、内容或样式。
  2. 创建和修改 HTML 内容：
    • 使用document.createElement('tagName')可以创建一个指定标签名的新 HTML 元素。
    • 使用element.innerHTML可以获取或设置某个 HTML 元素的内部 HTML 内容。
    • 使用element.textContent可以获取或设置某个 HTML 元素的纯文本内容。
  3. 监听和响应事件：
    • 使用element.addEventListener('eventName', eventHandler)可以为指定的 HTML 元素添加事件监听器，当事件发生时执行相应的处理函数。
    • 通过document对象，也可以对整个文档的事件进行监听和响应，例如document.addEventListener('DOMContentLoaded', handler)用于在文档加载完成后执行相应的处理函数。
  4. 修改 CSS 样式：
    • 使用element.style可以获取或设置某个 HTML 元素的 CSS 样式属性。
    • 通过修改样式属性，可以动态改变页面元素的外观。
posted @   凯璇  阅读(28)  评论(0)  编辑  收藏  举报
相关博文：
· JavaScript学习笔记
· 8.16代码经验
· JavaScript条件语句
· 第5章 语句(1)
· 第02章-前端核心技术-JavaScript条件和循环结构
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示