1. JavaScript核心语法精要1.1 变量声明与作用域在JavaScript中变量声明经历了从var到let/const的演进过程。var存在变量提升(hoisting)现象其作用域仅限于函数作用域而非块级作用域这常常导致意外的变量覆盖问题。ES6引入的let和const采用块级作用域更符合现代编程习惯。// 变量提升示例 console.log(x); // 输出undefined而非报错 var x 5; // 块级作用域示例 { let y 10; const z 15; } console.log(y); // 报错y未定义关键提示优先使用const声明不变的值需要重新赋值时使用let避免使用var1.2 数据类型与类型转换JavaScript是弱类型语言包含7种原始数据类型(Undefined, Null, Boolean, Number, BigInt, String, Symbol)和Object类型。类型转换是常见陷阱特别是和的区别// 严格相等比较 0 false // true 0 false // false null undefined // true null undefined // false类型转换方法显式转换Number(), String(), Boolean()隐式转换算术运算、逻辑运算等场景2. 函数与作用域进阶2.1 函数定义方式JavaScript支持多种函数定义方式各有适用场景// 函数声明会提升 function sum(a, b) { return a b; } // 函数表达式 const multiply function(a, b) { return a * b; }; // 箭头函数ES6 const divide (a, b) a / b; // 立即执行函数(IIFE) (function() { console.log(立即执行); })();2.2 闭包与高阶函数闭包是JavaScript最强大的特性之一允许函数访问并记住其词法作用域function createCounter() { let count 0; return function() { return count; }; } const counter createCounter(); console.log(counter()); // 1 console.log(counter()); // 2高阶函数示例// 接受函数作为参数 function operate(a, b, operation) { return operation(a, b); } // 返回函数的函数 function power(exponent) { return function(base) { return Math.pow(base, exponent); }; }3. 面向对象编程3.1 原型与原型链JavaScript采用基于原型的继承机制每个对象都有__proto__属性指向其原型function Person(name) { this.name name; } Person.prototype.greet function() { return Hello, ${this.name}; }; const john new Person(John); console.log(john.greet()); // Hello, John原型链查找顺序对象自身属性对象构造函数的prototypeObject.prototypenull3.2 ES6类语法class语法糖让面向对象编程更直观class Animal { constructor(name) { this.name name; } speak() { console.log(${this.name} makes a noise.); } } class Dog extends Animal { constructor(name, breed) { super(name); this.breed breed; } speak() { super.speak(); console.log(${this.name} barks.); } }4. 异步编程演进4.1 回调函数到Promise异步编程从回调地狱演进到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));4.2 async/await终极方案ES2017引入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. 现代JS开发实践5.1 模块化开发ES Modules成为现代JS开发标准// math.js export const PI 3.14159; export function circleArea(r) { return PI * r * r; } // app.js import { PI, circleArea } from ./math.js; console.log(circleArea(5));5.2 常用数组方法现代JS开发离不开这些数组方法const numbers [1, 2, 3, 4, 5]; // 转换方法 const doubled numbers.map(n n * 2); const evens numbers.filter(n n % 2 0); // 查找方法 const firstEven numbers.find(n n % 2 0); const hasEven numbers.some(n n % 2 0); // 聚合方法 const sum numbers.reduce((acc, n) acc n, 0);6. DOM操作与事件处理6.1 现代DOM操作querySelector取代传统getElementById// 选择元素 const form document.querySelector(#contact-form); const inputs form.querySelectorAll(input[typetext]); // 创建元素 const div document.createElement(div); div.classList.add(alert, alert-success); div.textContent 操作成功; document.body.appendChild(div);6.2 事件委托与自定义事件利用事件冒泡提高性能// 事件委托 document.querySelector(ul).addEventListener(click, function(e) { if (e.target.tagName LI) { console.log(点击了:, e.target.textContent); } }); // 自定义事件 const event new CustomEvent(itemAdded, { detail: { productId: 123 } }); document.dispatchEvent(event);7. 现代JS工具链7.1 包管理与构建工具npm/yarn webpack/vite构成现代开发基础# 初始化项目 npm init -y # 安装依赖 npm install lodash axios # 开发依赖 npm install webpack webpack-cli --save-dev7.2 代码质量工具ESLint Prettier保证代码一致性// .eslintrc.json { extends: eslint:recommended, rules: { semi: [error, always], quotes: [error, single] } }8. 性能优化实践8.1 减少重绘与回流优化DOM操作性能// 批量修改DOM const fragment document.createDocumentFragment(); for (let i 0; i 100; i) { const li document.createElement(li); li.textContent Item ${i}; fragment.appendChild(li); } document.querySelector(ul).appendChild(fragment);8.2 内存管理避免内存泄漏的常见模式// 清除事件监听器 function setup() { const button document.getElementById(myButton); button.addEventListener(click, onClick); // 清理函数 return () { button.removeEventListener(click, onClick); }; } const cleanup setup(); // 适当时候调用cleanup()9. 安全最佳实践9.1 XSS防护正确处理用户输入// 转义HTML function escapeHtml(unsafe) { return unsafe .replace(//g, amp;) .replace(//g, lt;) .replace(//g, gt;) .replace(//g, quot;) .replace(//g, #039;); } // 使用textContent而非innerHTML element.textContent userInput;9.2 CSRF防护实施安全请求策略// 设置CSRF Token fetch(/api/data, { method: POST, headers: { Content-Type: application/json, X-CSRF-Token: getCSRFToken() }, body: JSON.stringify(data) });10. 测试与调试10.1 单元测试使用Jest编写测试用例// math.test.js const { sum } require(./math); test(adds 1 2 to equal 3, () { expect(sum(1, 2)).toBe(3); }); test(async test, async () { const result await fetchData(); expect(result).toEqual({ status: ok }); });10.2 Chrome调试技巧开发者工具高级用法条件断点黑盒脚本性能分析器内存快照// 使用debugger语句 function complexCalculation() { debugger; // 执行到此会暂停 // 复杂计算... }在实际项目中我习惯将常用工具函数封装成模块通过JSDoc添加类型提示结合VS Code的智能提示大幅提升开发效率。对于复杂状态管理越来越倾向于使用原生Proxy实现轻量响应式而非直接引入大型状态库。
JavaScript核心语法与最佳实践全解析
1. JavaScript核心语法精要1.1 变量声明与作用域在JavaScript中变量声明经历了从var到let/const的演进过程。var存在变量提升(hoisting)现象其作用域仅限于函数作用域而非块级作用域这常常导致意外的变量覆盖问题。ES6引入的let和const采用块级作用域更符合现代编程习惯。// 变量提升示例 console.log(x); // 输出undefined而非报错 var x 5; // 块级作用域示例 { let y 10; const z 15; } console.log(y); // 报错y未定义关键提示优先使用const声明不变的值需要重新赋值时使用let避免使用var1.2 数据类型与类型转换JavaScript是弱类型语言包含7种原始数据类型(Undefined, Null, Boolean, Number, BigInt, String, Symbol)和Object类型。类型转换是常见陷阱特别是和的区别// 严格相等比较 0 false // true 0 false // false null undefined // true null undefined // false类型转换方法显式转换Number(), String(), Boolean()隐式转换算术运算、逻辑运算等场景2. 函数与作用域进阶2.1 函数定义方式JavaScript支持多种函数定义方式各有适用场景// 函数声明会提升 function sum(a, b) { return a b; } // 函数表达式 const multiply function(a, b) { return a * b; }; // 箭头函数ES6 const divide (a, b) a / b; // 立即执行函数(IIFE) (function() { console.log(立即执行); })();2.2 闭包与高阶函数闭包是JavaScript最强大的特性之一允许函数访问并记住其词法作用域function createCounter() { let count 0; return function() { return count; }; } const counter createCounter(); console.log(counter()); // 1 console.log(counter()); // 2高阶函数示例// 接受函数作为参数 function operate(a, b, operation) { return operation(a, b); } // 返回函数的函数 function power(exponent) { return function(base) { return Math.pow(base, exponent); }; }3. 面向对象编程3.1 原型与原型链JavaScript采用基于原型的继承机制每个对象都有__proto__属性指向其原型function Person(name) { this.name name; } Person.prototype.greet function() { return Hello, ${this.name}; }; const john new Person(John); console.log(john.greet()); // Hello, John原型链查找顺序对象自身属性对象构造函数的prototypeObject.prototypenull3.2 ES6类语法class语法糖让面向对象编程更直观class Animal { constructor(name) { this.name name; } speak() { console.log(${this.name} makes a noise.); } } class Dog extends Animal { constructor(name, breed) { super(name); this.breed breed; } speak() { super.speak(); console.log(${this.name} barks.); } }4. 异步编程演进4.1 回调函数到Promise异步编程从回调地狱演进到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));4.2 async/await终极方案ES2017引入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. 现代JS开发实践5.1 模块化开发ES Modules成为现代JS开发标准// math.js export const PI 3.14159; export function circleArea(r) { return PI * r * r; } // app.js import { PI, circleArea } from ./math.js; console.log(circleArea(5));5.2 常用数组方法现代JS开发离不开这些数组方法const numbers [1, 2, 3, 4, 5]; // 转换方法 const doubled numbers.map(n n * 2); const evens numbers.filter(n n % 2 0); // 查找方法 const firstEven numbers.find(n n % 2 0); const hasEven numbers.some(n n % 2 0); // 聚合方法 const sum numbers.reduce((acc, n) acc n, 0);6. DOM操作与事件处理6.1 现代DOM操作querySelector取代传统getElementById// 选择元素 const form document.querySelector(#contact-form); const inputs form.querySelectorAll(input[typetext]); // 创建元素 const div document.createElement(div); div.classList.add(alert, alert-success); div.textContent 操作成功; document.body.appendChild(div);6.2 事件委托与自定义事件利用事件冒泡提高性能// 事件委托 document.querySelector(ul).addEventListener(click, function(e) { if (e.target.tagName LI) { console.log(点击了:, e.target.textContent); } }); // 自定义事件 const event new CustomEvent(itemAdded, { detail: { productId: 123 } }); document.dispatchEvent(event);7. 现代JS工具链7.1 包管理与构建工具npm/yarn webpack/vite构成现代开发基础# 初始化项目 npm init -y # 安装依赖 npm install lodash axios # 开发依赖 npm install webpack webpack-cli --save-dev7.2 代码质量工具ESLint Prettier保证代码一致性// .eslintrc.json { extends: eslint:recommended, rules: { semi: [error, always], quotes: [error, single] } }8. 性能优化实践8.1 减少重绘与回流优化DOM操作性能// 批量修改DOM const fragment document.createDocumentFragment(); for (let i 0; i 100; i) { const li document.createElement(li); li.textContent Item ${i}; fragment.appendChild(li); } document.querySelector(ul).appendChild(fragment);8.2 内存管理避免内存泄漏的常见模式// 清除事件监听器 function setup() { const button document.getElementById(myButton); button.addEventListener(click, onClick); // 清理函数 return () { button.removeEventListener(click, onClick); }; } const cleanup setup(); // 适当时候调用cleanup()9. 安全最佳实践9.1 XSS防护正确处理用户输入// 转义HTML function escapeHtml(unsafe) { return unsafe .replace(//g, amp;) .replace(//g, lt;) .replace(//g, gt;) .replace(//g, quot;) .replace(//g, #039;); } // 使用textContent而非innerHTML element.textContent userInput;9.2 CSRF防护实施安全请求策略// 设置CSRF Token fetch(/api/data, { method: POST, headers: { Content-Type: application/json, X-CSRF-Token: getCSRFToken() }, body: JSON.stringify(data) });10. 测试与调试10.1 单元测试使用Jest编写测试用例// math.test.js const { sum } require(./math); test(adds 1 2 to equal 3, () { expect(sum(1, 2)).toBe(3); }); test(async test, async () { const result await fetchData(); expect(result).toEqual({ status: ok }); });10.2 Chrome调试技巧开发者工具高级用法条件断点黑盒脚本性能分析器内存快照// 使用debugger语句 function complexCalculation() { debugger; // 执行到此会暂停 // 复杂计算... }在实际项目中我习惯将常用工具函数封装成模块通过JSDoc添加类型提示结合VS Code的智能提示大幅提升开发效率。对于复杂状态管理越来越倾向于使用原生Proxy实现轻量响应式而非直接引入大型状态库。
