【Java Web学习 | 第七篇】JavaScript(1) – 基础知识（上）（2026最新版）
恭喜你完成 CSS 现代布局！现在我们正式进入 JavaScript 部分，这是连接前端与 Java 后端（Spring Boot Web API）的“桥梁”。
JavaScript（简称 JS）负责页面交互、数据处理、调用后端 API 等。作为 Java Web 全栈开发者，掌握 JS 基础后，你就能实现表单提交、动态渲染数据、AJAX/Fetch 调用后端接口等功能。
2026 年，JavaScript 仍以 ECMAScript（ES） 为核心标准。ES6（2015） 是现代 JS 的分水岭，引入了大量实用语法（let/const、箭头函数、模板字符串等），已成为企业开发默认规范。ES2025/ES2026 在日期、异步、精度等方面继续优化，但基础部分仍以 ES6+ 为主。
本篇采用“快学快用”风格，分上下两篇：
- (1)：变量、数据类型、运算符、控制流（本篇）
- (2)：函数、数组、对象、DOM 等（下一篇）
建议边看边在浏览器控制台（F12 → Console）或新建 js-demo.html 文件中敲代码测试。
1. 如何引入和运行 JavaScript？
三种方式（推荐外部文件，便于维护）：
<!-- 1. 内联（测试用） -->
<script>
console.log("Hello Java Web!");
</script>
<!-- 2. 内部（单个页面） -->
<script>
// 代码写在这里
</script>
<!-- 3. 外部文件（生产推荐） -->
<script src="app.js" defer></script> <!-- defer 推荐：页面解析完再执行 -->
新建测试文件 index.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础演示</title>
</head>
<body>
<h1>Java Web JS 学习</h1>
<script src="app.js"></script>
</body>
</html>
app.js 中写代码，用 Live Server 打开即可。
2. 变量声明（强烈推荐 let 和 const，放弃 var）
// var（旧方式，有作用域提升问题，不推荐）
var name = "重阳"; // 全局/函数作用域
// let（块级作用域，可重新赋值）
let age = 25;
age = 26; // 可以修改
// const（块级作用域，声明后不可重新赋值，但对象/数组内容可变）
const PI = 3.14159;
// PI = 3.14; // 报错！
const user = { name: "张三" };
user.name = "李四"; // 允许（修改对象属性）
最佳实践：
- 默认用
const，只有需要重新赋值时才用let。 - 避免
var（存在变量提升、作用域污染等问题）。
3. 数据类型（动态类型语言）
JavaScript 是弱类型、动态类型语言，变量无需提前声明类型。
基本数据类型（7 种）：
- Number：数字（整数、浮点、NaN、Infinity）
- String：字符串
- Boolean：true / false
- Undefined：未赋值
- Null：空值（typeof null === ‘object’，历史遗留）
- Symbol（ES6）：唯一标识符
- BigInt（ES2020）：大整数（末尾加 n）
引用类型：
- Object（对象、数组、函数等）
let num = 42; // Number
let price = 99.99;
let str = "Hello Java Web"; // String
let isActive = true; // Boolean
let nothing = null;
let notDefined; // undefined
console.log(typeof num); // "number"
console.log(typeof str); // "string"
模板字符串（Template Literals，ES6 强烈推荐）：
const name = "重阳";
const score = 95;
console.log(`欢迎 ${name}！你的分数是 ${score} 分。`);
// 支持多行
const html = `
<div>
<h2>标题</h2>
</div>
`;
4. 运算符
算术运算符：+ - * / % **（幂运算）
比较运算符：==（宽松相等，推荐避免）、===（严格相等，推荐）、!=、!==、>、>= 等
逻辑运算符：&&（与）、||（或）、!（非）
空值合并运算符（ES2020）：??（左侧为 null/undefined 时取右侧）
可选链（ES2020）：?.（防止报错）
let a = 10, b = 20;
console.log(a + b); // 30
console.log(a === b); // false（严格比较类型和值）
let user = null;
console.log(user?.name); // undefined（安全访问）
console.log(user ?? "默认用户"); // "默认用户"
5. 控制流语句
if…else
let score = 85;
if (score >= 90) {
console.log("优秀");
} else if (score >= 75) {
console.log("良好");
} else {
console.log("需努力");
}
三元运算符（简洁）
let status = score >= 60 ? "及格" : "不及格";
switch
let day = 1;
switch (day) {
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
default:
console.log("其他");
}
循环
// for 循环
for (let i = 0; i < 5; i++) {
console.log(i);
}
// while
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
// for...of（遍历数组/字符串，推荐）
const arr = [10, 20, 30];
for (let item of arr) {
console.log(item);
}
6. 类型转换与常见坑
console.log("5" + 5); // "55"（字符串拼接）
console.log("5" - 5); // 0（自动转数字）
console.log("5" == 5); // true（宽松）
console.log("5" === 5); // false（严格）
推荐：显式转换
Number("123")、String(123)、Boolean(1)parseInt()、parseFloat()
7. 小练习（立即动手）
- 声明
const username = "你的名字";，用模板字符串输出欢迎语。 - 写一个判断闰年的 if 语句（能被 4 整除但不能被 100 整除，或能被 400 整除）。
- 创建一个数组
[88, 95, 76, 92]，用 for…of 循环打印每个分数，并判断是否及格。 - 在浏览器控制台练习
??和?.的用法。
把练习代码写到 app.js 中，刷新页面查看 Console 输出。
下一篇文章预告：《【Java Web学习 | 第八篇】JavaScript(2) – 函数、数组、对象与 DOM 操作》
我们将学习函数（普通函数 + 箭头函数）、数组方法（map、filter 等）、对象、以及 DOM 操作（操作页面元素），为后续与 Spring Boot API 交互打基础。
本篇核心总结（快记口诀）：
- 变量：优先
const>let> 弃var - 字符串：用
`模板 ${变量}` - 比较：用
===严格相等 - 控制流：if / for…of / 三元运算符
有问题随时问：
- 想要完整基础示例代码文件（含所有演示）？
- 需要练习答案解析？
- 或直接进入 JavaScript(2)？
回复“给我完整示例”或“下一篇函数”，我立刻继续！
JavaScript 是 Java Web 前后端交互的核心，坚持练习，很快就能调用后端 API 啦！🚀
