一、运算符
• 赋值运算符
• 一元运算符
• 比较运算符
• 逻辑运算符
• 运算符优先级
1.算术运算符
数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。
算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等
注意：在计算失败时，显示的结果是 NaN （not a number）
// 算术运算符
console.log(1 + 2 * 3 / 2) // 4
let num = 10
console.log(num + 10) // 20
console.log(num + num) // 20// 1. 取模(取余数) 使用场景： 用来判断某个数是否能够被整除
console.log(4 % 2) // 0
console.log(6 % 3) // 0
console.log(5 % 3) // 2
console.log(3 % 5) // 3// 2. 注意事项 : 如果我们计算失败，则返回的结果是 NaN (not a number)
console.log('pink老师' - 2)
console.log('pink老师' * 2)
console.log('pink老师' + 2) // pink老师22. 赋值运算符
赋值运算符：对变量进行赋值的运算符
= 将等号右边的值赋予给左边, 要求左边必须是一个容器
<script>
let num = 1
// num = num + 1
// 采取赋值运算符
// num += 1
num += 3
console.log(num)
</script>3.一元运算符
目标： 能够使用一元运算符做自增运算 众多的 JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符
二元运算符：
例：
一元运算符：
例： 正负号
问题： 我们以前让一个变量每次+1 ，以前我们做的呢？
我们可以有更简便的写法了~~~
自增：
符号：++
作用：让变量的值 +1
自减：
符号：--
作用：让变量的值 -1
使用场景：经常用于计数来使用。 比如进行10次操作，用它来计算进行了多少次了
⑴自增运算符的用法：
注意：
1. 前置自增和后置自增独立使用时二者并没有差别！
2. 一般开发中我们都是独立使用
3. 后面 i++ 后置自增会使用相对较多,并且都是单独使用
4.比较运算符
⑴.比较运算符列表
| 运算符 | 名称 | 作用 |
|---|---|---|
> | 大于 | 判断左边是否大于右边 |
< | 小于 | 判断左边是否小于右边 |
>= | 大于等于 | 判断左边是否大于或等于右边 |
<= | 小于等于 | 判断左边是否小于或等于右边 |
== | 相等 | 判断左右两边的值是否相等（忽略类型） |
=== | 全等 | 判断左右两边的值和类型是否都相等 |
!== | 不全等 | 判断左右两边是否不全等 |
⑵关键区别
= vs == vs ===
=：赋值运算符，将右侧的值赋给左侧变量。
==：值相等比较，忽略数据类型（例如 5 == '5' 返回 true）。
===：严格相等比较，要求值和类型都相同（例如 5 === '5' 返回 false）。
开发建议：优先使用 === 和 !==，避免隐式类型转换带来的问题。
⑶注意事项
①字符串比较
基于字符的 ASCII 码逐位比较（如 '2' > '15' 返回 true，因为 '2' 的 ASCII 码大于 '1'）。
从左到右依次比较，若第一位相同则比较第二位，依此类推。
②NaN 的特殊性
NaN 不等于任何值，包括自身（NaN == NaN 或 NaN === NaN 均返回 false）。
③小数精度问题
避免直接比较小数（如 0.1 + 0.2 === 0.3 返回 false），因浮点数精度误差可能导致意外结果。
④隐式类型转换
不同类型比较时，JavaScript 会尝试将值转换为 number 类型后再比较（如 '5' > 4 转换为 5 > 4，返回 true）。
<!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>console.log(3 > 5)console.log(3 >= 3)console.log(2 == 2)// 比较运算符有隐式转换 把'2' 转换为 2 双等号 只判断值console.log(2 == '2') // true// console.log(undefined === null)// === 全等 判断 值 和 数据类型都一样才行// 以后判断是否相等 请用 === console.log(2 === '2')console.log(NaN === NaN) // NaN 不等于任何人，包括他自己console.log(2 !== '2') // true console.log(2 != '2') // false console.log('-------------------------')console.log('a' < 'b') // trueconsole.log('aa' < 'ab') // trueconsole.log('aa' < 'aac') // trueconsole.log('-------------------------')</script>
</body></html>
5.逻辑运算符
| 符号 | 名称 | 日常读法 | 特点 | 口诀 |
|---|---|---|---|---|
&& | 逻辑与 | 并且 | 两边都为 true 时结果为 true | 一假则假 |
|| | 逻辑或 | 或者 | 至少一边为 true 时结果为 true | 一真则真 |
! | 逻辑非 | 取反 | 将 true 转为 false，false 转为 true | 真变假，假变真 |
二、分支语句
1.if 语句
单分支语法：
if (条件) { // 条件为 true 时执行的代码
} 双分支语法：
if (条件) { // 条件为 true 时执行
} else { // 条件为 false 时执行
} 案例：用户登录验证：
let username = prompt("请输入用户名");
let password = prompt("请输入密码");
if (username === "pink" && password === "123456") { alert("登录成功！");
} else { alert("登录失败！");
} 多分支语法：
if (条件1) { // 代码1
} else if (条件2) { // 代码2
} else { // 默认代码
} 案例：成绩等级划分：
let score = prompt("请输入成绩");
if (score >= 90) { alert("优秀");
} else if (score >= 70) { alert("良好");
} else if (score >= 60) { alert("及格");
} else { alert("不及格");
} 2.三元运算符
语法：条件 ? 满足时执行 : 不满足时执行
特点：简化双分支逻辑，常用于赋值。
案例：判断最大值：
let a = prompt("请输入第一个数");
let b = prompt("请输入第二个数");
let max = a > b ? a : b;
console.log("最大值是：" + max); 3.switch 语句
语法：
switch (表达式) { case 值1: 代码1; break; case 值2: 代码2; break; default: 默认代码;
} -
特点：
-
适用于等值比较，不适用于区间判断。
-
必须配合
break防止“case穿透”（未加break会继续执行下一个case）。
-
-
案例：简单计算器：
<!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><script>let num1 = +prompt("请输入第一个数字");let num2 = +prompt("请输入第二个数字");let operator = prompt("请输入运算符（+ - * /）");switch (operator) {case "+":alert(num1 + num2);break;case "-":alert(num1 - num2);break;case "*":alert(num1 * num2);break;case "/":alert(num1 / num2);break;default:alert("运算符输入错误！");} </script>
</body></html>
三、循环语句
1.while 循环
语法：
while (循环条件) { // 循环体
} 循环控制
-
break：立即退出整个循环。
while (true) { let input = prompt("你爱我吗？"); if (input === "爱") break; // 输入“爱”时退出循环
} continue：跳过本次循环，进入下一次循环。
let i = 1;
while (i <= 10) { if (i % 2 === 0) { i++; continue; // 跳过偶数 } console.log(i); i++;
} 四、调试技巧
断点调试
步骤：
按 F12 打开浏览器开发者工具。
切换到 Sources 标签页。
选择代码文件并设置断点（点击行号）。
作用：
观察代码执行流程，排查逻辑错误。
1.切换到 Sources 标签页。
<!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>let num = 10num = num + 1console.log(num)</script>
</body></html>
五、综合案例
1.闰年案例
<!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 year = +prompt('请输入年份')// 2. 判断输出if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {alert(`${year}年是闰年`)} else {alert(`${year}年是平年`)}</script>
</body></html>
2.数字补0案例
需求：用户输入1个数，如果数字小于10，则前面进行补0， 比如 09 03 等
分析： ①：为后期页面显示时间做铺垫 ②：利用三元运算符 补 0 计算
<!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 : numnum = num >= 10 ? num : 0 + numalert(num)</script>
</body></html>
3.简易ATM取款机
<!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><script>let balance = 1000; // 初始余额 while (true) {let choice = prompt(`请选择操作：
1. 取款
2. 存款
3. 查看余额
4. 退出`);switch (choice) {case "1":let withdraw = +prompt("请输入取款金额");balance -= withdraw;alert(`剩余余额：${balance}`);break;case "2":let deposit = +prompt("请输入存款金额");balance += deposit;alert(`剩余余额：${balance}`);break;case "3":alert(`当前余额：${balance}`);break;case "4":alert("感谢使用！");break;default:alert("输入错误！");}if (choice === "4") break; // 退出循环 } </script>
</body></html>
六、for循环
1. for循环基本语法
作用：重复执行代码块。
语法结构：
for (变量起始值; 终止条件; 变量变化量) {// 循环体
}2. 退出循环控制
continue：跳过本次循环，继续下一次循环。
for (let i = 1; i <= 5; i++) {if (i === 3) continue; // 跳过i=3时的循环体console.log(i); // 输出1,2,4,5
}break：终止整个循环。
for (let i = 1; i <= 5; i++) {if (i === 3) break; // 循环终止console.log(i); // 输出1,2
}无限循环（需配合break使用）：
for (;;) {// 循环体if (条件) break;
}3.练习
⑴打印5行5列的星星
需求： 页面中打印出5行5列的星星
分析：
①：利用双重for循环来做
②：外层循环控制打印行，内层循环控制每行打印几个（列）
<!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><script>// 外层循环打印行数for (let i = 1; i <= 5; i++) {// 里层循环打印几个星星for (let j = 1; j <= 5; j++) {document.write('☆')}// 进行换行显示document.write('<br>')}</script></body></html>
升级版本： 用户输入行数和列数，打印对应的星星！
<!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>// // 外层循环打印行数// for (let i = 1; i <= 5; i++) {// // 里层循环打印几个星星// for (let j = 1; j <= 5; j++) {// document.write('☆')// }// // 进行换行显示// document.write('<br>')// }let row = +prompt('请输入行数:')let col = +prompt('请输入列数:')// 外层循环打印行数for (let i = 1; i <= row; i++) {// 里层循环打印几个星星for (let j = 1; j <= col; j++) {document.write('☆')}// 进行换行显示document.write('<br>')}</script>
</body></html>
⑵打印直角三角形
<!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. 外层循环控制行数for (let i = 1; i <= 5; i++) {// 2. 里层循环控制列数（几个星星）for (let j = 1; j <= i; j++) {document.write('◆')}// 换行document.write('<br>')}</script>
</body></html>
⑶.九九乘法表
<!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><style>span {display: inline-block;width: 60px;/* 若还想更紧凑，可继续调小宽度 */padding: 5px 10px;border: 1px solid pink;margin: 2px;border-radius: 5px;box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);background-color: rgba(255, 192, 203, .1);text-align: center;color: hotpink;font-size: 12px;/* 新增：设置字体大小，可按需调整数值 */}</style>
</head><body><script>for (let i = 1; i <= 9; i++) {for (let j = 1; j <= i; j++) {document.write(`<span>${j} X ${i} = ${i * j}</span>`)}document.write('<br>')}</script>
</body></html>
七、数组
1.数组的声明与初始化
-
字面量声明：
let arr1 = [1, "apple", true]; // 混合类型
let arr2 = new Array("a", "b", "c"); // 使用构造函数空数组：
let emptyArr = [];
let emptyArr2 = new Array();2.数组的访问与遍历
-
访问元素：
let names = ["Alice", "Bob", "Charlie"];
console.log(names[0]); // "Alice"
console.log(names[names.length - 1]); // "Charlie"（最后一个元素）遍历数组（使用for循环）：
for (let i = 0; i < names.length; i++) {console.log(names[i]);
}3. 数组的常用操作
JavaScript 的数组长度是可变的。主要体现在以下几个方面：
通过修改 length 属性：可以直接设置数组名.length来改变数组长度。若设置的值大于原长度，数组会新增空元素来填充多出的索引位置；若设置的值小于原长度，索引大于或等于新长度的元素将被舍弃 。例如：
let arr = [1, 2, 3];
arr.length = 5;
console.log(arr);
// 输出: [1, 2, 3, undefined, undefined]arr.length = 2;
console.log(arr);
// 输出: [1, 2]⑴.新增元素
末尾添加：push()
let fruits = ["apple"];
fruits.push("banana"); // ["apple", "banana"]开头添加：unshift()
fruits.unshift("orange"); // ["orange", "apple", "banana"]⑵.删除元素
末尾删除：pop()
let last = fruits.pop(); // "banana", 数组变为["orange", "apple"]开头删除：shift()
let first = fruits.shift(); // "orange", 数组变为["apple"]指定删除：splice()
let arr = [10, 20, 30, 40];
arr.splice(1, 2); // 从索引1开始删除2个元素 → [10, 40]⑶.修改元素
let colors = ["red", "green"];
colors[1] = "blue"; // ["red", "blue"]4.数组的常见应用案例
⑴. 数组求和与平均值
let nums = [2, 6, 1, 7, 4];
let sum = 0;
for (let i = 0; i < nums.length; i++) {sum += nums[i];
}
let average = sum / nums.length; // 4⑵.求最大值与最小值
let arr = [2, 6, 1, 77, 25];
let max = arr[0];
let min = arr[0];
for (let i = 1; i < arr.length; i++) {if (arr[i] > max) max = arr[i];if (arr[i] < min) min = arr[i];
}
console.log(max, min); // 77, 1⑶.筛选数据
// 筛选大于10的元素
let oldArr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
let newArr = [];
for (let i = 0; i < oldArr.length; i++) {if (oldArr[i] > 10) {newArr.push(oldArr[i]);}
}
console.log(newArr); // [77, 52, 25]5.根据数据生成柱形图
<!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><style>/* 通用样式：将所有元素的外边距和内边距都设置为0，避免浏览器默认样式的影响 */* {margin: 0;padding: 0;}/* 定义类名为box的元素样式 */.box {/* 使用flex布局，让子元素可以灵活排列 */display: flex;/* 设置盒子的宽度为700px */width: 700px;/* 设置盒子的高度为300px */height: 300px;/* 给盒子的左边添加一条1px宽的粉色边框 */border-left: 1px solid pink;/* 给盒子的底部添加一条1px宽的粉色边框 */border-bottom: 1px solid pink;/* 让盒子在水平方向上居中显示，上下外边距为50px */margin: 50px auto;/* 子元素在主轴上均匀分布 */justify-content: space-around;/* 子元素在交叉轴上靠底部对齐 */align-items: flex-end;/* 文本居中对齐 */text-align: center;}/* 选择box类下的直接子元素div */.box>div {/* 使用flex布局，让子元素可以灵活排列 */display: flex;/* 设置子元素的宽度为50px */width: 50px;/* 设置子元素的背景颜色为粉色 */background-color: pink;/* 子元素在垂直方向上排列 */flex-direction: column;/* 子元素在主轴上均匀分布 */justify-content: space-between;}/* 选择box类下的div元素内的span元素 */.box div span {/* 让span元素向上偏移20px */margin-top: -20px;}/* 选择box类下的div元素内的h4元素 */.box div h4 {/* 让h4元素向下偏移35px */margin-bottom: -35px;/* 设置h4元素的宽度为70px */width: 70px;/* 让h4元素向左偏移10px */margin-left: -10px;}</style>
</head><body><script>// 1. 四次弹框效果// 声明一个新的空数组，用于存储用户输入的数据let arr = [];// 使用for循环四次，实现四次弹框让用户输入数据for (let i = 1; i <= 4; i++) {// 弹出提示框，让用户输入第i季度的数据，并将输入的数据添加到数组arr中// 这里可以写成下面两行代码的形式，也可以写成一行代码，推荐使用一行代码的形式// let num = prompt(`请输入第${i}季度的数据:`);// arr.push(num);arr.push(prompt(`请输入第${i}季度的数据:`));// 注意：push是数组的方法，需要加小括号，不是等号赋值的形式}// 打印数组arr，方便调试查看用户输入的数据，例如：['123','135','345','234']// console.log(arr);// 向文档中写入一个类名为box的div元素的开头标签，用于后续动态生成柱状图document.write(` <div class="box">`);// 利用循环遍历数组arr，根据数组中的数据动态生成柱状图的柱子for (let i = 0; i < arr.length; i++) {// 向文档中写入一个div元素，作为柱状图的柱子// 设置div元素的高度为数组中对应的数据，同时在柱子上方显示数据，下方显示季度信息document.write(`<div style="height: ${arr[i]}px;"><span>${arr[i]}</span><h4>第${i + 1}季度</h4></div> `);}// 向文档中写入类名为box的div元素的结尾标签，完成柱状图的创建document.write(` </div>`);</script>
</body></html>
