1. JavaScript 核心基础概述JavaScript 作为现代 Web 开发的三大基石之一HTML、CSS、JavaScript已经从最初的简单脚本语言发展为功能强大的编程语言。它不仅是浏览器端的唯一原生脚本语言更通过 Node.js 等技术栈渗透到服务端开发领域。根据 GitHub 年度报告JavaScript 已连续多年成为最活跃的编程语言。提示学习 JavaScript 前建议先掌握 HTML 和 CSS 基础这是构建 Web 页面的三件套中最合理的入门顺序。2. JavaScript 基础语法精要2.1 变量与数据类型JavaScript 是弱类型语言但理解其数据类型对避免常见错误至关重要。ES6 后主要使用 let 和 const 声明变量// 基本类型 let name 张三; // String const age 25; // Number let isStudent true; // Boolean let score null; // Null let address; // Undefined // 引用类型 const hobbies [编程, 音乐]; // Array const person { // Object name: 李四, age: 30 };类型转换陷阱使用会进行隐式类型转换5 5为 true推荐始终使用严格相等比较显式转换方法Number(),String(),Boolean()2.2 运算符与表达式除常规算术运算符外需特别注意// 逻辑运算符短路特性 const result false someFunction(); // someFunction不会执行 // 空值合并运算符 ?? const defaultValue inputValue ?? 默认值; // 可选链操作符 ?. const street user?.address?.street; // 避免undefined报错2.3 流程控制现代 JavaScript 推荐使用函数式编程替代部分传统控制结构// 传统if-else if (age 18) { console.log(成年); } else { console.log(未成年); } // 三元运算符 console.log(age 18 ? 成年 : 未成年); // switch优化方案 const actions { add: (a, b) a b, subtract: (a, b) a - b }; const operation add; console.log(actions[operation]?.(5, 3) ?? 未知操作);3. 函数与作用域深度解析3.1 函数定义演进从ES5到ES6的函数定义方式对比// 函数声明存在提升 function sum(a, b) { return a b; } // 函数表达式 const sum function(a, b) { return a b; }; // 箭头函数无this绑定 const sum (a, b) a b; // 立即执行函数(IIFE) (function() { console.log(立即执行); })();3.2 作用域与闭包JavaScript 采用词法作用域静态作用域理解闭包是掌握JS核心的关键function createCounter() { let count 0; // 闭包保护的私有变量 return { increment: () count, getCount: () count }; } const counter createCounter(); counter.increment(); console.log(counter.getCount()); // 1作用域链查找规则当前函数作用域外层函数作用域全局作用域未找到则报 ReferenceError4. 对象与原型系统4.1 对象创建模式// 字面量创建 const person { name: 王五, greet() { console.log(你好我是${this.name}); } }; // 构造函数 function Person(name) { this.name name; } Person.prototype.greet function() { console.log(你好我是${this.name}); }; // Class语法糖ES6 class Person { constructor(name) { this.name name; } greet() { console.log(你好我是${this.name}); } }4.2 原型链机制JavaScript 采用原型继承而非类继承理解__proto__和prototype的区别function Animal(name) { this.name name; } Animal.prototype.eat function() { console.log(${this.name}在吃东西); }; function Dog(name) { Animal.call(this, name); } Dog.prototype Object.create(Animal.prototype); Dog.prototype.constructor Dog; Dog.prototype.bark function() { console.log(汪汪); }; const myDog new Dog(阿黄); myDog.eat(); // 继承自Animal myDog.bark(); // 自有方法5. 异步编程实战5.1 回调函数到Promise的演进// 回调地狱示例 getData(function(a) { getMoreData(a, function(b) { getMoreData(b, function(c) { console.log(c); }); }); }); // Promise解决方案 getData() .then(a getMoreData(a)) .then(b getMoreData(b)) .then(c console.log(c)) .catch(err console.error(err)); // Async/Await终极方案 async function fetchData() { try { const a await getData(); const b await getMoreData(a); const c await getMoreData(b); console.log(c); } catch (err) { console.error(err); } }5.2 现代异步API实践// Fetch API示例 async function fetchUser() { const response await fetch(https://api.example.com/users); if (!response.ok) { throw new Error(网络响应不正常); } return response.json(); } // Web Worker多线程 const worker new Worker(worker.js); worker.postMessage({ cmd: start, value: 42 }); worker.onmessage function(e) { console.log(Worker说, e.data); };6. DOM 操作与事件系统6.1 高效DOM操作// 批量DOM操作 const fragment document.createDocumentFragment(); for (let i 0; i 100; i) { const div document.createElement(div); div.textContent 项目 ${i}; fragment.appendChild(div); } document.body.appendChild(fragment); // 现代选择器API const activeItems document.querySelectorAll(.item.active); // 事件委托优化 document.getElementById(list).addEventListener(click, function(e) { if (e.target.classList.contains(item)) { console.log(点击了项目, e.target.textContent); } });6.2 自定义事件系统// 创建自定义事件 const event new CustomEvent(build, { detail: { time: Date.now() } }); // 监听事件 elem.addEventListener(build, function(e) { console.log(自定义事件触发时间, e.detail.time); }); // 触发事件 elem.dispatchEvent(event);7. ES6 核心特性实战7.1 解构赋值高级用法// 对象解构 const { name, age, ...rest } user; // 数组解构 const [first, second, ...others] scores; // 函数参数解构 function draw({ x 0, y 0, radius 10 }) { console.log(在(${x},${y})画半径${radius}的圆); } // 解构重命名 const { name: userName, age: userAge } user;7.2 模块化开发// math.js export const PI 3.14159; export function square(x) { return x * x; } // app.js import { PI, square } from ./math.js; console.log(π的平方是${square(PI)}); // 动态导入 button.addEventListener(click, async () { const module await import(./module.js); module.doSomething(); });8. 性能优化与调试技巧8.1 内存管理// 避免内存泄漏 window.addEventListener(load, function() { const bigData getHugeData(); // 记得移除事件监听 window.addEventListener(unload, cleanUp); function cleanUp() { // 释放资源 window.removeEventListener(unload, cleanUp); } }); // 弱引用示例 const weakMap new WeakMap(); let obj {}; weakMap.set(obj, some data); obj null; // 下次GC时会自动清除weakMap中的引用8.2 调试技巧// 条件断点 function processItem(item) { // 在调试器中设置条件item.id 42 console.log(处理项目, item); } // 性能分析 console.time(数据加载); loadData().then(() { console.timeEnd(数据加载); }); // 错误监控 window.onerror function(message, source, lineno, colno, error) { sendErrorToServer({ message, source, lineno, colno, stack: error?.stack }); };9. 现代JavaScript开发工具链9.1 VS Code 高效配置推荐安装的插件ESLint - 代码质量检查Prettier - 代码自动格式化JavaScript (ES6) code snippets - 代码片段Debugger for Chrome - 浏览器调试Jest - 测试运行器.vscode/settings.json配置示例{ editor.formatOnSave: true, javascript.updateImportsOnFileMove.enabled: always, eslint.validate: [javascript, javascriptreact], typescript.tsdk: node_modules/typescript/lib }9.2 构建工具配置现代项目通常使用Webpack/Rollup/Vite 打包Babel 转译ESLint Prettier 代码规范Jest/Vitest 测试简单webpack.config.js示例const path require(path); module.exports { entry: ./src/index.js, output: { filename: bundle.js, path: path.resolve(__dirname, dist) }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: babel-loader, options: { presets: [babel/preset-env] } } } ] } };10. 安全最佳实践10.1 常见安全漏洞防范// XSS防护 function safeInput(str) { return str.replace(//g, lt;).replace(//g, gt;); } // CSRF防护 fetch(/api/data, { method: POST, headers: { Content-Type: application/json, X-CSRF-Token: getCSRFToken() }, body: JSON.stringify(data) }); // CORS配置 const express require(express); const cors require(cors); const app express(); app.use(cors({ origin: [https://trusted-site.com], methods: [GET, POST] }));10.2 敏感数据处理// 避免在客户端存储敏感信息 const authToken localStorage.getItem(token); // 不安全 const authToken sessionStorage.getItem(token); // 相对安全 // 使用加密库处理密码 import { hash, verify } from argon2; const hashedPassword await hash(userPassword); const isValid await verify(hashedPassword, inputPassword);11. 测试驱动开发11.1 单元测试示例使用Jest测试框架// math.js export function sum(a, b) { if (typeof a ! number || typeof b ! number) { throw new TypeError(参数必须是数字); } return a b; } // math.test.js import { sum } from ./math; describe(sum函数, () { test(正常数字相加, () { expect(sum(1, 2)).toBe(3); }); test(参数类型检查, () { expect(() sum(1, 2)).toThrow(TypeError); }); });11.2 E2E测试示例使用Cypress进行端到端测试describe(登录流程, () { it(成功登录, () { cy.visit(/login); cy.get(#username).type(testuser); cy.get(#password).type(password123); cy.get(form).submit(); cy.url().should(include, /dashboard); cy.contains(欢迎回来testuser); }); });12. 项目架构设计12.1 模块化架构推荐的项目结构src/ ├── assets/ # 静态资源 ├── components/ # 通用组件 ├── pages/ # 页面组件 ├── store/ # 状态管理 ├── utils/ # 工具函数 ├── services/ # API服务 ├── styles/ # 全局样式 ├── router.js # 路由配置 └── main.js # 应用入口12.2 状态管理方案Redux现代写法示例// store/slices/userSlice.js import { createSlice } from reduxjs/toolkit; const userSlice createSlice({ name: user, initialState: null, reducers: { login: (state, action) action.payload, logout: () null } }); export const { login, logout } userSlice.actions; export default userSlice.reducer; // store/index.js import { configureStore } from reduxjs/toolkit; import userReducer from ./slices/userSlice; export default configureStore({ reducer: { user: userReducer } }); // 组件中使用 import { useSelector, useDispatch } from react-redux; import { login } from ../store/slices/userSlice; function LoginForm() { const dispatch useDispatch(); const user useSelector(state state.user); const handleLogin () { dispatch(login({ name: 用户, token: abc123 })); }; return ( button onClick{handleLogin}登录/button ); }13. 性能优化进阶13.1 虚拟列表实现大数据量渲染优化方案function VirtualList({ items, itemHeight, containerHeight }) { const [scrollTop, setScrollTop] useState(0); const containerRef useRef(); const totalHeight items.length * itemHeight; const startIndex Math.floor(scrollTop / itemHeight); const endIndex Math.min( startIndex Math.ceil(containerHeight / itemHeight), items.length - 1 ); const visibleItems items.slice(startIndex, endIndex 1); return ( div ref{containerRef} style{{ height: containerHeight, overflow: auto }} onScroll{() setScrollTop(containerRef.current.scrollTop)} div style{{ height: totalHeight, position: relative }} div style{{ position: absolute, top: startIndex * itemHeight, width: 100% }} {visibleItems.map(item ( div key{item.id} style{{ height: itemHeight }} {item.content} /div ))} /div /div /div ); }13.2 Web Worker 性能优化将CPU密集型任务转移到Worker线程// worker.js self.onmessage function(e) { const result heavyCalculation(e.data); self.postMessage(result); }; function heavyCalculation(data) { // 模拟耗时计算 let sum 0; for (let i 0; i data.length; i) { sum data[i] * Math.sqrt(data[i]); } return sum; } // 主线程 const worker new Worker(worker.js); worker.postMessage(largeArray); worker.onmessage function(e) { console.log(计算结果:, e.data); };14. 设计模式实战14.1 观察者模式实现class EventEmitter { constructor() { this.events {}; } on(event, listener) { if (!this.events[event]) { this.events[event] []; } this.events[event].push(listener); } emit(event, ...args) { if (this.events[event]) { this.events[event].forEach(listener listener(...args)); } } off(event, listener) { if (this.events[event]) { this.events[event] this.events[event].filter(l l ! listener); } } } // 使用示例 const emitter new EventEmitter(); emitter.on(data, data console.log(收到数据:, data)); emitter.emit(data, { id: 1, value: 测试 });14.2 策略模式应用const strategies { add: (a, b) a b, subtract: (a, b) a - b, multiply: (a, b) a * b, divide: (a, b) a / b }; function calculate(strategy, a, b) { if (!strategies[strategy]) { throw new Error(未知的计算策略); } return strategies[strategy](a, b); } console.log(calculate(add, 5, 3)); // 815. 现代框架核心原理15.1 虚拟DOM实现简版function createElement(type, props, ...children) { return { type, props: { ...props, children: children.map(child typeof child object ? child : createTextElement(child) ) } }; } function createTextElement(text) { return { type: TEXT_ELEMENT, props: { nodeValue: text, children: [] } }; } function render(element, container) { const dom element.type TEXT_ELEMENT ? document.createTextNode() : document.createElement(element.type); Object.keys(element.props) .filter(key key ! children) .forEach(name { dom[name] element.props[name]; }); element.props.children.forEach(child render(child, dom) ); container.appendChild(dom); } // 使用示例 const element createElement( div, { id: app }, createElement(h1, null, Hello), createElement(p, null, 虚拟DOM示例) ); render(element, document.getElementById(root));15.2 响应式原理实现function reactive(obj) { const handlers { get(target, key) { track(target, key); return Reflect.get(target, key); }, set(target, key, value) { const result Reflect.set(target, key, value); trigger(target, key); return result; } }; return new Proxy(obj, handlers); } const targetMap new WeakMap(); let activeEffect null; function track(target, key) { if (activeEffect) { let depsMap targetMap.get(target); if (!depsMap) { targetMap.set(target, (depsMap new Map())); } let dep depsMap.get(key); if (!dep) { depsMap.set(key, (dep new Set())); } dep.add(activeEffect); } } function trigger(target, key) { const depsMap targetMap.get(target); if (!depsMap) return; const dep depsMap.get(key); if (dep) { dep.forEach(effect effect()); } } function effect(fn) { activeEffect fn; fn(); activeEffect null; } // 使用示例 const state reactive({ count: 0 }); effect(() { console.log(count变化了:, state.count); }); state.count; // 自动触发effect