1. JavaScript的输出方式全解析
在JavaScript开发中，输出信息是最基础也最常用的功能。不同于其他编程语言，JS提供了多种输出方式，每种方式都有其特定的使用场景和优缺点。
1.1 控制台输出：console.log()及其变体
console.log()是前端开发者的"瑞士军刀"，但很多人不知道console对象还有更多实用方法：
javascript复制console.debug('调试信息'); // 仅在verbose模式下显示
console.info('提示信息'); // 蓝色图标显示
console.warn('警告信息'); // 黄色警告图标
console.error('错误信息'); // 红色错误图标
console.table([{id:1,name:'Alice'},{id:2,name:'Bob'}]); // 表格化输出
提示：在Chrome DevTools中，可以通过设置日志级别来过滤不同重要性的信息，生产环境建议移除所有console.*调用以避免性能损耗。
1.2 页面输出：document.write()的替代方案
虽然document.write()可以直接向HTML文档写入内容，但在现代前端开发中已被视为反模式：
javascript复制// 不推荐的方式
document.write('<h1>Hello World</h1>');
// 现代替代方案
document.body.insertAdjacentHTML('beforeend', '<div class="alert">New content</div>');
// 更专业的DOM操作方式
const newElement = document.createElement('div');
newElement.textContent = 'Dynamic content';
document.getElementById('container').appendChild(newElement);
注意：document.write()如果在页面加载完成后调用，会清空整个文档，这是很多新手容易踩的坑。
1.3 弹窗输出：alert/confirm/prompt的适用场景
这三种浏览器原生弹窗虽然简单，但有几个关键限制：
- 同步阻塞：代码执行会暂停直到用户响应
- 样式不可定制：外观由浏览器决定
- 移动端体验差：可能被浏览器拦截
javascript复制// 基本用法
alert('操作完成'); // 只有确定按钮
const isConfirmed = confirm('确定删除吗?'); // 返回布尔值
const userName = prompt('请输入姓名', '默认值'); // 返回输入内容
// 现代替代方案：使用模态框库如SweetAlert2
Swal.fire({
title: '成功!',
text: '操作已完成',
icon: 'success',
confirmButtonText: '确定'
});
1.4 Node.js环境下的输出差异
在服务端JavaScript环境中，输出方式有所不同：
javascript复制// 标准输出
process.stdout.write('Progress: 50%\n');
// 标准错误
process.stderr.write('Error occurred\n');
// 更高级的日志方案
const winston = require('winston');
const logger = winston.createLogger({
transports: [
new winston.transports.Console(),
new winston.transports.File({ filename: 'combined.log' })
]
});
logger.info('Server started');
2. JavaScript变量深度剖析
变量是任何编程语言的基础，但JavaScript的变量系统有其独特之处，特别是ES6带来的重大变化。
2.1 变量声明：var/let/const的现代选择
三种声明方式的关键区别：
| 特性 | var | let | const |
|---|---|---|---|
| 作用域 | 函数级 | 块级 | 块级 |
| 变量提升 | 是 | 否(TDZ) | 否(TDZ) |
| 重复声明 | 允许 | 不允许 | 不允许 |
| 值可变性 | 可变 | 可变 | 不可变 |
javascript复制// 经典面试题：变量提升
console.log(a); // undefined
var a = 1;
console.log(b); // ReferenceError
let b = 2;
// const的特殊情况
const obj = { name: 'John' };
obj.name = 'Jane'; // 允许，因为对象引用未变
obj = {}; // TypeError: Assignment to constant variable
2.2 变量类型与类型检测
JavaScript是动态类型语言，但了解类型系统至关重要：
javascript复制// 原始类型
typeof 42; // "number"
typeof 'text'; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof Symbol(); // "symbol"
typeof null; // "object" (历史遗留问题)
typeof BigInt(1); // "bigint"
// 引用类型
typeof []; // "object"
typeof {}; // "object"
typeof function(){};// "function"
// 更可靠的类型检测
Object.prototype.toString.call([]); // "[object Array]"
Array.isArray([]); // true
2.3 作用域与闭包实战
理解作用域链是掌握JavaScript的关键：
javascript复制// 作用域示例
function outer() {
const outerVar = 'outer';
function inner() {
const innerVar = 'inner';
console.log(outerVar); // 可以访问外部变量
}
console.log(innerVar); // ReferenceError
}
// 闭包的实际应用：模块模式
const counter = (function() {
let privateCount = 0;
return {
increment() {
privateCount++;
},
get value() {
return privateCount;
}
};
})();
counter.increment();
console.log(counter.value); // 1
2.4 变量命名规范与最佳实践
良好的命名习惯能显著提升代码可读性：
- 使用camelCase命名变量和函数
- 构造函数使用PascalCase
- 常量使用全大写加下划线
- 布尔变量以is/has/can开头
- 避免单字符命名（循环变量除外）
javascript复制// 好的命名示例
const MAX_RETRIES = 3;
let isLoading = false;
function createUser() {}
class UserRepository {}
// 不好的命名
const a = 1; // 意义不明
let flag = true; // 什么flag?
function process() {} // 处理什么?
3. JavaScript内存管理机制
理解内存管理对于编写高效JavaScript代码至关重要，特别是避免内存泄漏。
3.1 堆栈内存与垃圾回收
JavaScript引擎的内存模型：
javascript复制// 原始类型存储在栈内存
let num = 10; // 直接存储值
// 引用类型存储在堆内存
let obj = { name: 'John' }; // obj存储的是引用地址
// 垃圾回收示例
function createObjects() {
const tempObj = {}; // 函数结束后不再引用，可回收
window.globalObj = {}; // 挂载到全局变量，不会被回收
}
3.2 常见内存泄漏场景
实际开发中容易导致内存泄漏的模式：
- 意外的全局变量
- 遗忘的定时器或回调
- DOM引用未清理
- 闭包使用不当
javascript复制// 定时器泄漏
function startTimer() {
const data = getHugeData();
setInterval(() => {
console.log(data.length);
}, 1000);
}
// 正确的做法
let timer;
function startTimerSafely() {
const data = getHugeData();
timer = setInterval(() => {
console.log(data.length);
}, 1000);
}
function stopTimer() {
clearInterval(timer);
}
// DOM引用泄漏
const elements = [];
function registerElement(element) {
elements.push(element); // 即使从DOM移除，数组仍持有引用
}
3.3 内存分析工具使用
Chrome DevTools的内存分析功能：
- Heap Snapshot：查看堆内存分配
- Allocation Timeline：记录内存分配时间线
- Allocation Sampling：采样内存分配情况
技巧：在开发过程中定期使用"Take heap snapshot"功能，比较不同时间点的内存变化，找出异常增长的对象。
4. JavaScript变量高级特性
ES6+引入了许多强大的变量相关特性，极大提升了开发体验。
4.1 解构赋值的妙用
解构不仅仅是语法糖，它能显著简化代码：
javascript复制// 对象解构
const user = { id: 1, name: 'Alice', age: 25 };
const { name, age: userAge } = user;
// 数组解构
const numbers = [1, 2, 3, 4];
const [first, , third] = numbers;
// 函数参数解构
function printUser({ name, age = 18 }) {
console.log(`${name}, ${age}岁`);
}
// 嵌套解构
const config = {
db: {
host: 'localhost',
credentials: {
user: 'admin',
pass: 'secret'
}
}
};
const { db: { credentials: { user } } } = config;
4.2 展开与剩余运算符
...运算符的两种用法：
javascript复制// 展开运算符
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }
// 剩余参数
function sum(...numbers) {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
// 剩余属性
const { a, ...rest } = { a: 1, b: 2, c: 3 };
4.3 全局变量与模块化
现代JavaScript开发应避免污染全局命名空间：
javascript复制// 传统方式（不推荐）
var globalVar = '危险';
// IIFE模式
(function() {
var privateVar = '安全';
})();
// ES模块（推荐）
// module.js
export const apiKey = '123';
export function helper() {}
// app.js
import { apiKey, helper } from './module.js';
5. 常见问题与调试技巧
实际开发中会遇到各种变量相关的问题，掌握调试方法很重要。
5.1 变量未定义与作用域问题
javascript复制// 典型问题1：变量提升导致的意外
console.log(x); // undefined
var x = 5;
// 解决方案：使用let/const
console.log(y); // ReferenceError
let y = 5;
// 典型问题2：循环中的闭包
for (var i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i); // 输出3次3
}, 100);
}
// 解决方案1：使用let
for (let j = 0; j < 3; j++) {
setTimeout(() => {
console.log(j); // 0,1,2
}, 100);
}
// 解决方案2：IIFE
for (var k = 0; k < 3; k++) {
(function(m) {
setTimeout(() => {
console.log(m); // 0,1,2
}, 100);
})(k);
}
5.2 类型转换陷阱
JavaScript的隐式类型转换常常导致意外行为：
javascript复制// 常见陷阱
console.log(1 + '1'); // '11'
console.log('1' - 1); // 0
console.log([] == ![]); // true
console.log(null == undefined); // true
console.log(0 == false); // true
// 解决方案：严格相等 ===
console.log(0 === false); // false
// 显式类型转换
const num = '123';
console.log(Number(num)); // 123
console.log(+num); // 123
console.log(parseInt(num, 10)); // 123
5.3 调试工具的高级用法
Chrome DevTools的进阶调试技巧：
- 条件断点：右键点击行号选择"Add conditional breakpoint"
- 日志点：无需暂停执行就能输出变量值
- 监视表达式：持续跟踪变量变化
- 黑盒脚本：忽略第三方库的调试
- 异常暂停：在未捕获异常时自动中断
javascript复制// 在DevTools中可以执行的调试命令
debugger; // 手动触发断点
console.trace(); // 输出调用堆栈
console.time('label'); console.timeEnd('label'); // 测量代码执行时间