JavaWeb(3)——HTML、CSS、JS 快速入门

一、JavaScript 运算符

• 赋值运算符( = )

复制代码
= 赋值运算符执行过程? 将等号右边的值赋予给左边, 要求左边必须是一个容器
复制代码
+= 出现是为了简化代码, 比如让 let age = 18 ,age 加 2 怎么写呢
javascript 复制代码
    let age = 18
    age += 2
    console.log(age)
    age *= 2
    console.log(age)
    age /= 2
    console.log(age)
    age %= 2
    console.log(age)
    age -= 2
    console.log(age)

• 一元运算符 (自增和自减,并明白区别)

众多的 JavaScript 的运算符可以根据所需表达式的个数,分为一元运算符、二元运算符、三元运算符。而一元、二元和三元运算符是根据操作数(表达式)的个数来进行分类的。

一元运算符只需要一个操作数。它对操作数进行单一的操作或转换。例如,一元运算符可以用于递增或递减变量的值,取负数、求反等操作。常见的一元运算符有:++(递增)、--(递减)、+(正数)、-(负数)、!(逻辑非)等。

二元运算符需要两个操作数。例如,加法运算符(+)、减法运算符(-)、乘法运算符(*)、除法运算符(/)、赋值运算符(=)等。二元运算符在两个操作数之间进行某种计算或比较操作。

三元运算符即条件运算符,也是 JavaScript 中唯一的三元运算符。它需要三个操作数,形式为 条件表达式 ? 表达式1 : 表达式2。根据条件表达式的结果,选择返回表达式1或表达式2的值。它类似于 if-else 语句的简写形式。

举例说明:

javascript 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1. 用户输入
    let num = prompt('请您输入一个数字:')
    // 2. 判断输出- 小于10才补0
    // num = num < 10 ? 0 + num : num
    num = num >= 10 ? num : 0 + num
    alert(num)
  </script>
</body>

</html>

还举例:(用户输入两个数字,判断二者最大值)

javascript 复制代码
    // 1. 用户输入
    let num1 = +prompt('请您输入第一个数:')
    let num2 = +prompt('请您输入第二个数:')
    // 2. 判断输出-三元运算符
    // if (num1 > num2) {
    //   alert(num1)
    // } else {
    //   alert(num2)
    // }
    num1 > num2 ? alert(`最大值是: ${num1}`) : alert(`最大值是: ${num2}`)

自增运算符的用法: 1. 前置自增和后置自增独立使用时二者并没有差别! 2. 一般开发中我们都是独立使用 3. 后面 i++ 后置自增会使用相对较多,并且都是单独使用

javascript 复制代码
    let i = 1
    console.log(i++ + ++i + i)

(1+2)+1\] +3 =7 i 是 3 ```javascript let i = 1 let mu = i++ + ++i + i console.log(i) ``` ![](https://file.jishuzhan.net/article/1682597645316526082/d1a7c87b71de4855a7d814214cd7cd51.png) 当然要是还是不是很清楚这个过程中变量的赋值情况,则可以进行断点调试。 ![](https://file.jishuzhan.net/article/1682597645316526082/ce851e36117f4daebf6c3f3e122c7334.png) • 比较运算符 = 是赋值 == 是判断 只要求值相等,不要求数据类型一样即可返回true === 是全等 要求值和数据类型都一样返回的才是true 开发中,请使用 == ![](https://file.jishuzhan.net/article/1682597645316526082/d722e310c1ce47a4a639e60a21c11bbe.png) ![](https://file.jishuzhan.net/article/1682597645316526082/abb5a771f2b64217aa5f001f155defc4.png) • 逻辑运算符 ![](https://file.jishuzhan.net/article/1682597645316526082/b43ba3e16a854ee590b7b82f9aca5bef.png) • 运算符优先级 一元运算符里面的逻辑非优先级很高 逻辑与比逻辑或优先级高 ![](https://file.jishuzhan.net/article/1682597645316526082/27c1d8dec4744140966ad46d24da86b9.png) ```javascript let a = 3 > 5 && 2 < 7 && 3 == 4 console.log(a);//false let b = 3 <= 4 || 3 > 1 || 3 != 2 console.log(b);//true let c = 2 === "2" console.log(c);//false let d = !c || b && a//true ||true && false console.log(d); ``` ![](https://file.jishuzhan.net/article/1682597645316526082/62384bf0ee3c4adb945c787ed339cf52.png) 关于变量d为什么是true, 进行如下分析。 首先,根据逻辑运算符的优先级,\&\& 运算符的优先级高于 \|\| 运算符。 对于 `a = 3 > 5 && 2 < 7 && 3 == 4`,分步执行: 1. `3 > 5` 为 false。 2. 因为前面的结果是 false,所以整个表达式的结果已经确定为 false,后面的操作数不再进行求值。因此,`a` 的值为 false。 对于 `b = 3 <= 4 || 3 > 1 || 3 != 2`,分步执行: 1. `3 <= 4` 为 true。 2. 因为前面的结果是 true,所以整个表达式的结果已经确定为 true,后面的操作数不再进行求值。因此,`b` 的值为 true。 对于 `c = 2 === "2"`,分步执行: 1. `2 === "2"` 比较严格相等,即比较值和类型是否都相等。但是数字 2 和字符串 "2" 的类型不同,因此结果为 false,即 `c` 的值为 false。 最后,对于 `d = !c || b && a`,分步执行: 1. `!c` 取 `c` 的逻辑非,即取反,因为 `c` 的值为 false,所以 `!c` 的值为 true。 2. `b && a` 中的 `&&` 运算符,根据短路原则,如果第一个操作数 `b` 为 true,则直接返回第二个操作数 `a` 的值。因为 `b` 的值为 true,所以继续求值 `a`。 3. `a` 的值为 false。 4. 将以上求得的结果进行逻辑运算,`true || (false && false)`。 5. 根据 `||` 运算符的规则,只要有一个操作数为 true,整个表达式即为 true。所以 `d` 的值为 true。 因此,根据给定的代码,变量 `d` 的值为 true。 再例如: ```javascript console.log(11 && 22) console.log(false && 'hello') console.log(33 || 44) console.log(0|| 55) ``` ![](https://file.jishuzhan.net/article/1682597645316526082/1bdf7ac657ca403da25759d59a20c17b.png) 根据给出的代码: 1. `console.log(11 && 22)`:使用 `&&` 运算符进行逻辑与运算。在这种情况下,左侧操作数为 11,右侧操作数为 22。由于两个操作数都为真值(非零数字),所以返回右侧操作数 22。因此,打印结果为 22。 2. `console.log(false && 'hello')`:同样使用 `&&` 运算符进行逻辑与运算。但是在这种情况下,左侧操作数为 false,右侧操作数为 'hello'。根据短路原则,由于左侧操作数为 false,整个表达式已经确定为 false,所以不再求解右侧操作数。因此,打印结果为 false。 3. `console.log(33 || 44)`:使用 `||` 运算符进行逻辑或运算。在这种情况下,左侧操作数为 33,右侧操作数为 44。由于左侧操作数为真值(非零数字),所以返回左侧操作数 33。因此,打印结果为 33。 4. `console.log(0 || 55)`:同样使用 `||` 运算符进行逻辑或运算。但是在这种情况下,左侧操作数为 0,右侧操作数为 55。根据短路原则,由于左侧操作数为假值(0),整个表达式已经确定为假值,所以不再求解右侧操作数。因此,打印结果为 55。 总结: * 在逻辑与运算中,如果左侧操作数为真值,则返回右侧操作数;如果左侧操作数为假值,则返回左侧操作数。 * 在逻辑或运算中,如果左侧操作数为真值,则返回左侧操作数;如果左侧操作数为假值,则返回右侧操作数。 # 二、JavaScript 流程控制 ![](https://file.jishuzhan.net/article/1682597645316526082/a4e62cef24f94ebba46cddc2ffc1bda6.png) 如:下面这段代码中,一次循环也不会执行。 ```javascript Title练习 ``` 因为,循环条件 `i === 1` 的初始值为 `0`,而 `0` 不等于 `1`。循环条件要求循环只在条件为真时执行,但是在初始时刻条件就是假的,所以循环体内的代码不会执行。 具体来说,下面是循环的执行过程: 1. 首先,创建变量 `i` 并初始化为 `0`。 2. 接着,检查循环条件 `i === 1` 是否为真。由于 `0` 不等于 `1`,所以条件为假。 3. 因为循环条件为假,循环体内的代码不会执行。 4. 循环结束,进入后续的代码逻辑。 因此,该循环一次也不会进入,直接跳过循环体。如果希望循环执行,应该将循环条件改为 `i !== 1`,即当 `i` 不等于 `1` 时循环执行。 再举例:(判断闰年) ```javascript // 1. 用户输入 let year = +prompt('请输入年份') // 2. 判断输出 if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) { alert(`${year}年是闰年`) } else { alert(`${year}年是平年`) } ``` ![](https://file.jishuzhan.net/article/1682597645316526082/b13a57327d2a4da99934eeec23b4cc7f.png) ![](https://file.jishuzhan.net/article/1682597645316526082/414f20ed79d647ea8f48047957f5058b.png) ![](https://file.jishuzhan.net/article/1682597645316526082/4eaf8033592741af94585ada7cabfa53.png) 例如: ```javascript switch (2) { case 1: console.log(1) break case 2: console.log(2) break default: console.log(3) break } ``` 这个结果一定是2 , 在 `switch` 语句中,当表达式的值与某个 `case` 的值匹配时,会执行该 `case` 下的代码块,并且在代码块的最后使用 `break` 关键字来结束 `switch` 语句。如果没有匹配的 `case`,则会执行 `default` 下的代码块。 根据代码中的 `switch (2)`,表达式的值为 `2`。因此,程序会跳过 `case 1` 中的代码块,进入 `case 2`。在 `case 2` 下,会执行 `console.log(2)`,打印输出 `2`。然后遇到 `break` 关键字,结束 `switch` 语句。 没有其他的 `case` 匹配 `2`,所以不会执行 `default` 下的代码块。因此,输出结果只有 `2`。 但是如果代码变成 ```javascript switch (2) { case 1: console.log(1) break case 2: console.log(2) default: console.log(3) break } ``` 那么结果就会变成 2 3 取款机案例: ```javascript Document ``` ![](https://file.jishuzhan.net/article/1682597645316526082/31f2d0fc2a75412f97662a442841cd63.png) 关于for 循环: (九九乘法表) ```javascript Document ``` ![](https://file.jishuzhan.net/article/1682597645316526082/e95c4328545149d4bbfa68126145c9e2.png) (打印五角星) ```javascript Document ``` (打印直角三角形) ```javascript // 1. 外层循环控制行数 for (let i = 1; i <= 5; i++) { // 2. 里层循环控制列数(几个星星) for (let j = 1; j <= i; j++) { document.write('◆') } // 换行 document.write('
') } ``` ![](https://file.jishuzhan.net/article/1682597645316526082/00b6da7deb124f25ae8808d79fc0d0b1.png)

相关推荐
小众AI2 分钟前
fastmcp: 更好用的 MCP Python 框架
开发语言·人工智能·python
Tiger Z9 分钟前
R 语言科研绘图 --- 桑基图-汇总
开发语言·r语言·贴图
yaoshengvalve22 分钟前
V型球阀材质性能深度解析:专攻颗粒、料浆与高腐蚀介质的工业利器-耀圣
开发语言·网络·数据结构·c++·安全·材质
Leo.yuan24 分钟前
热力图是什么?三分钟学会热力图数据分析怎么做!
大数据·数据库·数据挖掘·数据分析·html
元亓亓亓1 小时前
Java后端开发day46--多线程(二)
java·开发语言
Kay_Liang1 小时前
深入解析JavaScript变量作用域:var、let、const全攻略
开发语言·javascript·const·var
未脱发程序员1 小时前
【前端】每日一道面试题3:如何实现一个基于CSS Grid的12列自适应布局?
前端·css
三天不学习1 小时前
Visual Studio Code 前端项目开发规范合集【推荐插件】
前端·ide·vscode
jiunian_cn1 小时前
【c++】多态详解
java·开发语言·数据结构·c++·visual studio
萧鼎1 小时前
深入探索 Python 的 QuTiP 5 库:量子计算与开放量子系统模拟的利器
开发语言·python·量子计算