JavaScript中的参数传递 参数传递的两种方式值传递（基本类型）就像给你一份复印件，你改了复印件，不影响原件。let a = 10; // 原价：10元 function changePrice(price) { price = 20; // 我改了复印件上的价格 console.log("函数内价格:", price); // 20 } changePrice(a); console.log("函数外原价:", a); // 还是10，没变！引用传递（对象、数组）就像给你钥匙，你用钥匙进屋改了东西，房子真的变了。let house = { color: "白色", size: "100平" }; // 一座房子 function paintHouse(h) { h.color = "蓝色"; // 用钥匙进去刷墙 console.log("函数内颜色:", h.color); // 蓝色 } paintHouse(house); console.log("函数外颜色:", house.color); // 也变成蓝色了！子程序的运行依赖参数传递所使用的方法（子程序的执行结果会受到参数传递方式的影响）更通俗的解释想象你要让同事帮你处理一份文件，有两种方式：给你复印件（传值）同事在复印件上修改，不影响你的原件子程序对参数的修改不会影响原数据给你原文件的位置（传引用）同事直接修改原文件，你的文件内容会改变子程序对参数的修改会影响原数据同样的子程序，采用不同的参数传递方式，会产生不同的运行效果。

javascript随笔 const oldCount = configData.length; //configData 很可能是一个数组（Array） 或类似数组的对象（比如字符串、NodeList 等），而 .length 是 JavaScript 中用于获取这些对象元素个数的内置属性。 //.length 的作用是：返回数组（或类数组对象）中元素的个数。 //例如 const configData = ['a', 'b', 'c']; const oldCount = configData.length; // oldCount = 3 const stats = await fs.stat(configPath);这里fs.stat是语法预定义的 //是 Node.js 中 fs 模块预定义的方法，用于获取文件/目录的状态信息（如大小、创建时间、权限等）。以下是详细解析： fs 模块 Node.js 内置的 fs (File System) 模块 提供了文件系统操作接口，fs.stat() 是其核心方法之一。 无需自定义 只要你的代码中正确引入 fs 模块（如 const fs = require('fs') 或 import fs from 'fs'），就可以直接使用 fs.stat()。 res.json({ 这里的res也是预定义的 //在常见的 Node.js Web 框架（如 Express.js、Koa 等）中，res.json() 是框架预定义的方法，专门用于发送 JSON 格式的 HTTP 响应。以下是详细解析： res 是 HTTP 响应（Response）对象的缩写，由框架自动创建并传入路由处理函数。它的核心作用是将数据返回给客户端（如浏览器、移动端等）。 app.get('/api/data', (req, res) => { res.json({ message: "Hello World" }); // 发送 JSON 响应 }); req：请求对象（包含客户端发送的数据，如 URL、Headers、Body 等）。 res：响应对象（用于控制服务器返回给客户端的内容）。 res.json() 的作用 将 JavaScript 对象转换为 JSON 字符串，并设置正确的 HTTP 响应头（Content-Type: application/json），然后发送给客户端。 注意事项 只能调用一次 HTTP 响应只能发送一次数据，重复调用 res.json() 会报错： 自动序列化 res.json() 会自动处理对象序列化，无需手动调用 JSON.stringify()： 错误处理 如果数据包含无法序列化的内容（如循环引用），会抛出错误： res.json() 是框架预定义的方法，用于便捷地发送 JSON 响应。 关键特性： 自动设置 Content-Type: application/json。 自动序列化 JavaScript 对象为 JSON 字符串。 适用场景： API 接口返回数据、前后端分离项目中的 JSON 通信等。 //只能在浏览器使用，window指的是当前网页，location是对象 const currentHost = window.location.hostname; const currentPort = window.location.port; //nodejs没有当前网页的概念，但可以用req返回 const express = require('express'); const app = express(); app.get('/', (req, res) => { const hostname = req.hostname; // 主机名（如 "example.com"） const port = req.app.get('port') || 3000; // 服务器监听的端口 const protocol = req.protocol; // "http" 或 "https" console.log(`Host: ${hostname}:${port}, Protocol: ${protocol}`); res.send('Hello World'); }); app.listen(3000); //如果有一个 URL 字符串（如 "https://example.com:8080/path"），可以用 Node.js 的 URL 模块解析： const { URL } = require('url'); const url = new URL('https://example.com:8080/path'); console.log(url.hostname); // "example.com"（不含端口） console.log(url.port); // "8080"（字符串，默认端口时为空） console.log(url.host); // "example.com:8080"（含端口） //为事件监听器添加异步处理函数的写法。它的核心目的是：在点击事件中执行异步操作（如 fetch、await 等） reloadBtn.addEventListener('click', async function() {}) //为什么用 async function //async function 允许你在函数内部使用 await 关键字，从而以同步的写法处理异步操作（如网络请求、定时器等）。如果不加 async，直接写 await 会报错（因为普通函数不支持 await） reloadBtn.addEventListener('click', async function() { try { const response = await fetch('/api/data'); // 异步请求 const data = await response.json(); console.log(data); // 处理数据 } catch (error) { console.error('请求失败:', error); } }); //错误处理必须用 try/catch，异步函数中抛出的错误不会自动被浏览器捕获，必须手动处理： reloadBtn.addEventListener('click', async function() { try { await someAsyncOperation(); } catch (error) { alert('操作失败！'); } }); 不同对象的事件监听示例 // 1. 监听document对象的事件 document.addEventListener('DOMContentLoaded', function() { console.log('文档加载完成'); }); // 2. 监听window对象的事件 window.addEventListener('resize', function() { console.log('窗口大小改变了'); }); // 3. 监听DOM元素的事件 const button = document.getElementById('myButton'); button.addEventListener('click', function() { console.log('按钮被点击了'); }); // 4. 监听body元素的事件 document.body.addEventListener('click', function() { console.log('body被点击了'); });// 这行代码执行后： const reloadBtn = document.getElementById('reload-btn'); // reloadBtn 存储的是： // 1. 一个DOM元素的引用（指针/地址） // 2. 不是DOM元素本身 // 3. 不是字符串 'reload-btn' // 4. 而是内存中那个DOM元素对象的引用 // 可以理解为： // reloadBtn → [DOM元素对象在内存中的位置] 内存地址: 0x123456 +----------------------+ | HTMLButtonElement | ← 实际的DOM元素对象 | - id: "reload-btn" | | - className: "" | | - onclick: null | | - ...其他属性... | +----------------------+ ↑ | 引用/指针 const reloadBtn = 0x123456

调用API重新加载数据知识点 try-catch错误捕获机制try-catch-finally结构 try { // 尝试执行的代码，可能会抛出错误 const result = await riskyOperation(); } catch (error) { // 捕获错误，进行错误处理 console.error('操作失败:', error); } finally { // 无论成功或失败都会执行的代码 cleanup(); }错误类型分类try { await fetch('https://api.example.com/data'); } catch (error) { if (error instanceof TypeError) { // 网络错误或URL错误 console.error('网络错误:', error.message); } else if (error instanceof SyntaxError) { // JSON解析错误 console.error('数据格式错误'); } else if (error.name === 'AbortError') { // 请求被取消 console.error('请求超时'); } else { // 其他未知错误 console.error('未知错误:', error); } }异步操作：使用async/await处理异步API调用async/await基本概念// 传统Promise方式（回调地狱） function oldWay() { fetch(url) .then(response => response.json()) .then(data => { return processData(data); }) .then(result => { console.log(result); }) .catch(error => { console.error(error); }); } // async/await方式（同步写法） async function newWay() { try { const response = await fetch(url); const data = await response.json(); const processed = await processData(data); console.log(processed); } catch (error) { console.error(error); } }await的工作机制async function example() { console.log('1. 开始执行'); // await会暂停函数执行，等待Promise完成 const result = await someAsyncFunction(); // ⬆️ 这里会"等待"，但不会阻塞主线程 console.log('3. 异步操作完成:', result); } console.log('0. 函数调用前'); example(); console.log('2. 函数已调用（不会等待）'); // 输出顺序: 0 → 1 → 2 → 3并行与串行执行// 1. 串行执行（一个接一个） async function serialExecution() { console.time('串行'); const result1 = await fetchData1(); // 等待2秒 const result2 = await fetchData2(); // 等待3秒（等第一个完成后才开始） console.timeEnd('串行'); // 总耗时≈5秒 } // 2. 并行执行（同时进行） async function parallelExecution() { console.time('并行'); const promise1 = fetchData1(); // 立即开始，不等待 const promise2 = fetchData2(); // 立即开始，不等待 // 使用Promise.all同时等待多个Promise const [result1, result2] = await Promise.all([promise1, promise2]); console.timeEnd('并行'); // 总耗时≈3秒（取最长的） } // 3. 竞赛模式（谁先完成用谁） async function raceExecution() { const result = await Promise.race([ fetchWithTimeout('api1', 2000), fetchWithTimeout('api2', 2000) ]); // 第一个完成的（无论成功或失败）会被返回 }错误处理模式对比// 模式1：每个await单独try-catch async function individualCatch() { let data; try { data = await fetchData(); } catch (error) { console.error('获取数据失败:', error); return; } try { await processData(data); } catch (error) { console.error('处理数据失败:', error); } } // 模式2：统一错误处理 async function unifiedCatch() { try { const data = await fetchData(); await processData(data); await saveData(data); } catch (error) { // 任何一个步骤失败都会跳到这里 handleError(error); } } // 模式3：使用高阶函数包装 function withErrorHandling(asyncFunc) { return async function(...args) { try { return await asyncFunc(...args); } catch (error) { console.error('函数执行失败:', error); return { error: true, message: error.message }; } }; } const safeFetch = withErrorHandling(fetchData); const result = await safeFetch(url);实际案例<script> // 当DOM内容完全加载后执行（确保所有HTML元素已存在） document.addEventListener('DOMContentLoaded', function() { // 获取页面中的按钮元素 const reloadBtn = document.getElementById('reload-btn'); // 获取显示结果的div元素 const resultDiv = document.getElementById('result'); // 获取显示服务器URL的span元素（虽然代码中未使用，但已定义） const serverUrlSpan = document.getElementById('server-url'); // 获取当前页面的主机名和端口号，用于构建API URL（备用） const currentHost = window.location.hostname; const currentPort = window.location.port; // 为"更新数据"按钮添加点击事件监听器 reloadBtn.addEventListener('click', async function() { // 禁用按钮，防止用户重复点击 reloadBtn.disabled = true; // 更改按钮文字提示用户正在更新 reloadBtn.textContent = '更新中...'; // 清空之前显示的结果 resultDiv.className = 'hidden'; // 添加隐藏类 resultDiv.innerHTML = ''; // 清空内容 try { // 显示加载状态 resultDiv.className = 'loading'; // 添加加载样式类 resultDiv.textContent = '正在重新加载数据...'; resultDiv.classList.remove('hidden'); // 移除隐藏类，显示div // 调用API发送POST请求到指定端点 const response = await fetch(`https://api.demo.top/api/reload`, { method: 'POST', // 使用POST方法 headers: { 'Content-Type': 'application/json' // 设置请求头为JSON格式 } }); // 将响应解析为JSON格式 const result = await response.json(); // 根据API返回的成功状态设置结果显示样式 resultDiv.className = result.success ? 'success' : 'error'; // 构建要显示的结果HTML内容 let html = ''; if (result.success) { // 成功情况的显示内容 html += '<div class="status-line"><strong>✅ 数据重载成功</strong></div>'; html += `<div class="status-line">${result.message}</div>`; // 如果有详细数据，显示详细信息 if (result.data) { html += '<hr style="margin: 15px 0;">'; // 添加分隔线 html += '<div class="status-line"><strong>详细信息:</strong></div>'; html += `<div class="status-line">重载前: ${result.data.before} 条记录</div>`; html += `<div class="status-line">重载后: ${result.data.after} 条记录</div>`; html += `<div class="status-line">变化: ${result.data.difference > 0 ? '+' : ''}${result.data.difference} 条记录</div>`; html += `<div class="status-line">时间: ${result.data.timestamp}</div>`; } } else { // 失败情况的显示内容 html += '<div class="status-line"><strong>❌ 数据重载失败</strong></div>'; html += `<div class="status-line">${result.message}</div>`; // 如果有错误详情，显示错误信息 if (result.error) { html += `<div class="status-line">错误: ${result.error}</div>`; } } // 将构建的HTML插入结果div resultDiv.innerHTML = html; } catch (error) { // 捕获网络错误或其他异常 resultDiv.className = 'error'; resultDiv.innerHTML = ` <div class="status-line"><strong>❌ 请求失败</strong></div> <div class="status-line">无法连接到服务器</div> <div class="status-line">错误: ${error.message}</div> <div class="status-line">请确保服务器正在运行</div> `; } finally { // 无论成功或失败，最后都会执行这里 // 恢复按钮的可用状态 reloadBtn.disabled = false; // 恢复按钮文字 reloadBtn.textContent = '更新数据'; } }); }); </script>

JavaScript DOM 相关知识整理 1. DOM 简介 DOM (Document Object Model) 是一种以树形结构表示 HTML 或 XML 文档的编程接口。它将文档解析为一个由节点和对象组成的结构，使编程语言能够连接和操作文档。 1.1 DOM 树结构 - Document - Element (html) - Element (head) - Element (title) - Text - Element (body) - Element (div) - Element (p) - Text 2. 节点类型 DOM 树中的每个节点都是一个对象，主要有以下几种类型： 节点类型 Node常量 nodeType 值 元素节点 Node.ELEMENT_NODE 1 属性节点 Node.ATTRIBUTE_NODE 2 文本节点 Node.TEXT_NODE 3 注释节点 Node.COMMENT_NODE 8 文档节点 Node.DOCUMENT_NODE 9 3. 获取 DOM 元素 3.1 基本获取方法 // 通过 ID 获取单个元素 document.getElementById('myId'); // 通过类名获取元素集合 (HTMLCollection) document.getElementsByClassName('myClass'); // 通过标签名获取元素集合 (HTMLCollection) document.getElementsByTagName('div'); // 通过 CSS 选择器获取单个元素 document.querySelector('#myId .myClass'); // 通过 CSS 选择器获取所有匹配元素 (NodeList) document.querySelectorAll('div.className'); 3.2 新增获取方法 (HTML5) // 通过元素 name 属性获取 document.getElementsByName('username'); // 获取第一个匹配的表单元素 document.forms['myForm']; document.images; document.links; 4. DOM 操作 4.1 元素创建 // 创建元素节点 const newDiv = document.createElement('div'); // 创建文本节点 const textNode = document.createTextNode('Hello World'); // 创建完整元素 (设置文本内容) const div = document.createElement('div'); div.textContent = 'Hello World'; // 或者 div.innerHTML = '<span>Hello</span> World'; 4.2 元素添加 // 添加子元素 (作为最后一个子元素) parentElement.appendChild(newElement); // 在指定位置插入元素 parentElement.insertBefore(newElement, referenceElement); // 在特定位置插入 HTML (不推荐用于用户内容，有 XSS 风险) parentElement.insertAdjacentHTML('beforebegin', htmlString); insertAdjacentHTML 位置参数： beforebegin: 元素前面 afterbegin: 元素内部第一个子元素前面 beforeend: 元素内部最后一个子元素后面 afterend: 元素后面 4.3 元素移除 // 移除子元素 parentElement.removeChild(childElement); // 直接移除自身 (现代浏览器) element.remove(); // 移除所有子元素 element.innerHTML = ''; // 或者 while (element.firstChild) { element.removeChild(element.firstChild); } 4.4 元素替换 parentElement.replaceChild(newElement, oldElement); 4.5 克隆元素 // 浅克隆 (只克隆元素，不克隆子元素) const shallowClone = element.cloneNode(false); // 深克隆 (克隆元素及其所有子元素) const deepClone = element.cloneNode(true); 5. 元素属性与特性 5.1 属性访问 // 获取属性 element.getAttribute('class'); // 设置属性 element.setAttribute('class', 'myClass'); // 移除属性 element.removeAttribute('class'); // 属性存在性检查 element.hasAttribute('class'); 5.2 DOM 属性与 HTML 特性 // DOM 属性 (直接访问) element.id = 'newId'; element.className = 'newClass'; element.value = 'newValue'; // HTML 特性 (通过 attribute 方法) element.setAttribute('data-value', '123'); const dataValue = element.getAttribute('data-value'); 5.3 类名操作 // 检查类名 element.classList.contains('myClass'); // 添加类名 element.classList.add('newClass'); // 移除类名 element.classList.remove('oldClass'); // 切换类名 element.classList.toggle('active'); // 替换类名 element.classList.replace('old', 'new'); 6. 元素样式操作 // 直接修改样式 (行内样式) element.style.color = 'red'; element.style.backgroundColor = '#f0f0f0'; element.style.cssText = 'color: red; background: #f0f0f0;'; // 获取计算样式 (所有最终样式) const computedStyle = window.getComputedStyle(element); console.log(computedStyle.color); 7. 元素尺寸与位置 7.1 尺寸 // 内容区域尺寸 (不包括边框和内边距) element.clientWidth; element.clientHeight; // 总尺寸 (包括边框和内边距) element.offsetWidth; element.offsetHeight; // 尺寸 (精确到浮点数) element.getBoundingClientRect().width; element.getBoundingClientRect().height; 7.2 位置 // 元素相对于文档的位置 (包括滚动偏移) element.offsetTop; element.offsetLeft; // 元素相对于最近的已定位祖先元素的位置 element.getBoundingClientRect().top; element.getBoundingClientRect().left; // 元素相对于视口的位置 const rect = element.getBoundingClientRect(); console.log(rect.top, rect.left, rect.width, rect.height); 8. 事件处理 8.1 事件绑定 // 方式1: 事件属性 element.onclick = function() { /* 处理函数 */ }; // 方式2: addEventListener (推荐) element.addEventListener('click', function() { /* 处理函数 */ }); // 多个事件监听器 element.addEventListener('click', handler1); element.addEventListener('click', handler2); // 一次性事件 element.addEventListener('click', function handler() { // 执行后自动移除 }, { once: true }); 8.2 事件对象 element.addEventListener('click', function(e) { console.log(e.type); // 事件类型 (click) console.log(e.target); // 事件目标元素 console.log(e.currentTarget); // 当前处理事件的元素 console.log(e.eventPhase); // 事件阶段 (1: 捕获, 2: 目标, 3: 冒泡) // 鼠标事件 e.clientX; e.clientY; // 相对于视口的坐标 e.pageX; e.pageY; // 相对于文档的坐标 // 阻止默认行为 e.preventDefault(); // 阻止事件冒泡 e.stopPropagation(); }); 8.3 事件委托 // 在父元素上监听子元素的事件 document.querySelector('ul').addEventListener('click', function(e) { if (e.target.tagName === 'LI') { // 处理 li 的点击 } }); 8.4 常见事件类型 鼠标事件: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave 键盘事件: keydown, keyup, keypress 表单事件: submit, reset, change, focus, blur, input 窗口事件: load, resize, scroll, unload

此内容被密码保护 加密文章，请前往内页查看详情