【Java Web学习 | 第八篇】JavaScript(2) 基础知识2 – 菜鸟教程

【Java Web学习 | 第八篇】JavaScript(2) – 基础知识（下）（2026最新版）

恭喜你完成 JavaScript(1)！现在进入 JavaScript(2)，本篇将重点讲解函数、数组、对象以及DOM 操作。这些内容是 Java Web 前端与后端（Spring Boot API）交互的核心基础。

掌握本篇后，你就能：

封装可复用函数
处理后端返回的 JSON 数据（数组/对象）
动态修改页面内容（增删改查 DOM 元素）
为后续 AJAX/Fetch 调用后端接口做好准备

1. 函数（Functions）

1.1 普通函数 vs 箭头函数（ES6 推荐）

// 1. 普通函数声明
function add(a, b) {
    return a + b;
}

// 2. 函数表达式
const multiply = function(a, b) {
    return a * b;
};

// 3. 箭头函数（最常用，简洁，无自己的 this）
const subtract = (a, b) => a - b;                    // 单行可省略 return 和 {}
const greet = (name) => `你好，${name}！欢迎学习 Java Web`;

// 多行箭头函数
const calculateTotal = (items) => {
    let total = 0;
    for (let item of items) {
        total += item.price;
    }
    return total;
};

console.log(add(5, 3));           // 8
console.log(greet("重阳"));       // 你好，重阳！欢迎学习 Java Web

箭头函数注意点：

适合简短逻辑
没有自己的 this（继承外层 this，常用于事件处理和回调）
不能用作构造函数

1.2 函数参数默认值与剩余参数

// 默认值
function registerUser(username = "游客", age = 18) {
    console.log(`用户名: ${username}, 年龄: ${age}`);
}

// 剩余参数（...rest）
function sum(...numbers) {
    return numbers.reduce((acc, cur) => acc + cur, 0);
}

console.log(sum(1, 2, 3, 4, 5));   // 15

1.3 立即执行函数（IIFE）与模块化基础

// 立即执行函数（避免全局污染）
(function() {
    console.log("页面加载时立即执行");
})();

2. 数组（Array）—— 处理后端返回列表的核心

const users = [
    { id: 1, name: "张三", age: 25, active: true },
    { id: 2, name: "李四", age: 30, active: false },
    { id: 3, name: "王五", age: 22, active: true }
];

// 常用方法（ES6+ 强烈推荐）
console.log(users.length);                    // 3

// 1. 遍历
users.forEach(user => console.log(user.name));

// 2. map（映射，返回新数组，常用于渲染列表）
const names = users.map(user => user.name);
console.log(names);                           // ["张三", "李四", "王五"]

// 3. filter（过滤）
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);

// 4. find（找第一个匹配项）
const user = users.find(u => u.id === 2);
console.log(user?.name);                      // 李四

// 5. reduce（累加、统计等）
const totalAge = users.reduce((sum, user) => sum + user.age, 0);
console.log(totalAge);                        // 77

数组解构（ES6）：

const [firstUser, secondUser] = users;
console.log(firstUser.name);   // 张三

3. 对象（Object）—— 处理后端返回单个实体

const user = {
    id: 101,
    username: "chongyang",
    email: "chongyang@example.com",
    roles: ["USER", "ADMIN"],
    profile: {
        avatar: "https://example.com/avatar.jpg",
        bio: "Java Web 学习者"
    }
};

// 访问属性
console.log(user.username);
console.log(user.profile?.bio);        // 可选链，防止报错

// 对象解构（非常常用！）
const { username, email, roles } = user;
console.log(username, email);

// 重命名 + 默认值
const { bio: userBio = "暂无简介" } = user.profile;
console.log(userBio);

// 展开运算符（...）
const updatedUser = { ...user, age: 26, active: true };
console.log(updatedUser);

4. DOM 操作（操作页面元素的核心）

DOM（Document Object Model）是浏览器提供的接口，让 JS 可以动态修改 HTML 结构和样式。

4.1 获取元素

// 最常用方式
const title = document.getElementById('title');           // 通过 id
const cards = document.querySelectorAll('.card');         // 通过 CSS 选择器（推荐）
const firstCard = document.querySelector('.card');        // 只获取第一个

// 现代推荐：querySelector / querySelectorAll

4.2 修改内容与属性

// 修改文本
title.textContent = "Java Web 项目标题已更新";

// 修改 HTML（小心 XSS）
title.innerHTML = "&lt;strong>加粗标题&lt;/strong>";

// 修改样式
title.style.color = "#007bff";
title.style.fontSize = "2rem";

// 添加/移除 class
title.classList.add('highlight');
title.classList.remove('highlight');
title.classList.toggle('active');

// 设置属性
const img = document.createElement('img');
img.setAttribute('src', 'https://picsum.photos/300');
img.setAttribute('alt', '示例图片');

4.3 创建与添加元素（动态渲染后端数据）

function renderUsers(users) {
    const container = document.getElementById('user-list');
    container.innerHTML = '';   // 清空原有内容

    users.forEach(user => {
        const div = document.createElement('div');
        div.className = 'user-item';
        div.innerHTML = `
            &lt;h3>${user.name}&lt;/h3>
            &lt;p>年龄：${user.age}&lt;/p>
            &lt;button onclick="deleteUser(${user.id})">删除&lt;/button>
        `;
        container.appendChild(div);
    });
}

// 调用示例
renderUsers(users);

4.4 事件处理（用户交互核心）

// 方式1：内联（不推荐大量使用）
&lt;button onclick="handleClick()">点击&lt;/button>

// 方式2：推荐写法
const btn = document.querySelector('button');

btn.addEventListener('click', () => {
    alert('按钮被点击了！');
    // 这里可以调用后端 API
});

// 常用事件：click、input、submit、load、keydown 等

5. 完整综合示例（推荐复制运行）

创建一个 js-demo.html 文件：

&lt;!DOCTYPE html>
&lt;html lang="zh-CN">
&lt;head>
    &lt;meta charset="UTF-8">
    &lt;title>JavaScript 基础2 综合示例&lt;/title>
    &lt;style>
        .user-item { padding: 15px; margin: 10px 0; background: #f8f9fa; border-radius: 8px; }
        .highlight { color: #007bff; font-weight: bold; }
    &lt;/style>
&lt;/head>
&lt;body>
    &lt;h1 id="title">Java Web JS 学习&lt;/h1>
    &lt;button id="add-btn">添加用户&lt;/button>
    &lt;div id="user-list">&lt;/div>

    &lt;script>
        const users = [
            { id: 1, name: "张三", age: 25 },
            { id: 2, name: "李四", age: 30 }
        ];

        function renderUsers() {
            const container = document.getElementById('user-list');
            container.innerHTML = users.map(user => `
                &lt;div class="user-item">
                    &lt;h3>${user.name}（${user.age}岁）&lt;/h3>
                &lt;/div>
            `).join('');
        }

        // 事件绑定
        document.getElementById('add-btn').addEventListener('click', () => {
            const newUser = { id: Date.now(), name: "新用户", age: 28 };
            users.push(newUser);
            renderUsers();
            document.getElementById('title').classList.add('highlight');
        });

        // 页面加载完成后渲染
        window.onload = renderUsers;
    &lt;/script>
&lt;/body>
&lt;/html>

6. 小练习（建议立即完成）

写一个箭头函数 calculateAverage(arr)，接收数字数组，返回平均值（用 reduce）。
用 map 和 filter 处理用户数组：过滤出年龄大于 25 岁的用户，并返回只包含 name 和 age 的新数组。
实现一个“切换主题”按钮，点击时给 body 添加/移除 dark 类（需自行写一点 CSS）。
动态创建一个表格，展示用户列表（用 createElement + appendChild）。

下一篇文章预告：《【Java Web学习 | 第九篇】JavaScript(3) – 事件、异步（Promise + async/await）与 Fetch API》

我们将重点学习异步编程和Fetch，实现真正的前后端数据交互（调用 Spring Boot REST API）。

本篇核心总结：

函数：优先使用箭头函数
数组：熟练掌握 map、filter、forEach、reduce
对象：熟练使用解构和展开运算符 ...
DOM：优先使用 querySelector + addEventListener

有问题随时问：

想要完整示例代码文件（含所有练习）？
需要练习答案解析？
或直接进入 JavaScript(3) 异步与 Fetch？

回复“给我完整示例”或“下一篇异步”，我立刻继续！

JavaScript 基础已经接近尾声，坚持下去，你很快就能独立完成前后端交互功能了！🚀

【Java Web学习 | 第八篇】JavaScript(2) 基础知识2

1. 函数（Functions）

1.1 普通函数 vs 箭头函数（ES6 推荐）

1.2 函数参数默认值与剩余参数

1.3 立即执行函数（IIFE）与模块化基础

2. 数组（Array）—— 处理后端返回列表的核心

3. 对象（Object）—— 处理后端返回单个实体

4. DOM 操作（操作页面元素的核心）

4.1 获取元素

4.2 修改内容与属性

4.3 创建与添加元素（动态渲染后端数据）

4.4 事件处理（用户交互核心）

5. 完整综合示例（推荐复制运行）

6. 小练习（建议立即完成）

likuolei

发表回复取消回复

2026 年 3 月
一	二	三	四	五	六	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

1. 函数（Functions）

1.1 普通函数 vs 箭头函数（ES6 推荐）

1.2 函数参数默认值与剩余参数

1.3 立即执行函数（IIFE）与模块化基础

2. 数组（Array）—— 处理后端返回列表的核心

3. 对象（Object）—— 处理后端返回单个实体

4. DOM 操作（操作页面元素的核心）

4.1 获取元素

4.2 修改内容与属性

4.3 创建与添加元素（动态渲染后端数据）

4.4 事件处理（用户交互核心）

5. 完整综合示例（推荐复制运行）

6. 小练习（建议立即完成）

likuolei

发表回复 取消回复

相关文章

发表回复取消回复