1. JavaScript基础：输出方式与变量详解
作为一名前端开发者，我经常被新手问到JavaScript的基础问题。今天我们就来深入探讨JavaScript中最基础也最重要的两个概念：输出方式和变量。这些知识看似简单，但其中有很多细节和技巧是教科书上不会告诉你的。
2. JavaScript的输出方式
2.1 控制台输出：console.log()
控制台输出是调试JavaScript最常用的方式。console对象提供了多种输出方法：
javascript复制console.log('基础输出'); // 普通日志
console.info('信息性输出'); // 信息提示
console.warn('警告信息'); // 警告提示
console.error('错误信息'); // 错误提示
提示：在Chrome开发者工具中，不同类型的输出会以不同颜色显示，便于区分。
实际开发中，我经常使用console.log()的格式化输出功能：
javascript复制const user = {name: '张三', age: 25};
console.log('用户信息：%o', user); // %o表示对象
console.log('当前时间：%s', new Date()); // %s表示字符串
2.2 页面输出：document.write()与DOM操作
虽然document.write()可以直接向页面写入内容，但在实际项目中几乎不会使用，因为它会覆盖整个文档：
javascript复制document.write('<h1>Hello World</h1>'); // 不推荐
更专业的做法是使用DOM操作：
javascript复制// 创建元素
const div = document.createElement('div');
div.textContent = '动态创建的内容';
// 添加到页面
document.body.appendChild(div);
2.3 弹窗输出：alert(), confirm(), prompt()
这些方法会阻塞浏览器线程，影响用户体验，一般只用于简单的调试或教学：
javascript复制alert('提示信息'); // 只有确定按钮
const result = confirm('确定要删除吗？'); // 返回布尔值
const name = prompt('请输入你的名字', '默认值'); // 返回用户输入
3. JavaScript变量详解
3.1 变量声明：var, let, const
ES6引入了let和const，改变了JavaScript的变量作用域规则：
javascript复制var oldWay = 'ES5方式'; // 函数作用域，存在变量提升
let modernWay = 'ES6方式'; // 块级作用域
const constantValue = '不可变值'; // 必须初始化，不能重新赋值
注意：const声明的对象属性可以修改，只是不能重新赋值整个对象。
3.2 变量命名规范
良好的命名习惯能显著提高代码可读性：
- 使用驼峰命名法：myVariableName
- 常量全大写：MAX_SIZE
- 布尔变量以is/has开头：isActive, hasPermission
- 避免使用$和_开头（除非使用特定框架）
3.3 变量类型与类型转换
JavaScript是弱类型语言，理解类型转换很重要：
javascript复制// 类型检测
typeof 42; // "number"
typeof 'text'; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object" (历史遗留问题)
// 类型转换
Number('123'); // 123
String(123); // "123"
Boolean(0); // false
4. 常见问题与解决方案
4.1 变量提升问题
var声明的变量会提升到函数顶部，可能导致意外行为：
javascript复制console.log(x); // undefined，而不是报错
var x = 5;
解决方案：始终使用let/const，它们也存在提升但不会初始化。
4.2 作用域混淆
JavaScript有函数作用域和块级作用域：
javascript复制function test() {
if (true) {
var a = 1; // 函数作用域
let b = 2; // 块级作用域
}
console.log(a); // 1
console.log(b); // ReferenceError
}
4.3 内存泄漏
不当的变量引用会导致内存无法回收：
javascript复制// 意外的全局变量
function leak() {
leakedVar = '这个变量会泄漏到全局';
}
// 解决方案：严格模式
'use strict';
leakedVar = 'error'; // 现在会报错
5. 高级技巧与实践
5.1 解构赋值
ES6引入的强大特性：
javascript复制// 对象解构
const {name, age} = {name: '李四', age: 30};
// 数组解构
const [first, second] = [1, 2, 3];
5.2 模板字符串
比字符串拼接更优雅的方式：
javascript复制const user = {name: '王五'};
const greeting = `你好，${user.name}！今天是${new Date().toLocaleDateString()}`;
5.3 变量冻结
防止对象被修改的几种方式：
javascript复制const obj = {prop: 'value'};
Object.preventExtensions(obj); // 不能添加新属性
Object.seal(obj); // 也不能删除属性
Object.freeze(obj); // 完全不可变
6. 调试技巧
6.1 条件断点
在Chrome开发者工具中，可以设置条件断点：
javascript复制for (let i = 0; i < 100; i++) {
console.log(i); // 在这里设置条件断点i === 50
}
6.2 console.table()
以表格形式输出数组或对象：
javascript复制const users = [
{name: '张三', age: 25},
{name: '李四', age: 30}
];
console.table(users);
6.3 性能分析
使用console.time()测量代码执行时间：
javascript复制console.time('耗时操作');
// 执行一些代码
console.timeEnd('耗时操作');
7. 最佳实践总结
- 始终使用const，除非需要重新赋值，这时使用let
- 完全避免使用var
- 变量命名要具有描述性
- 尽量减少全局变量
- 使用严格模式('use strict')
- 复杂数据结构考虑使用TypeScript
在实际项目中，我发现遵循这些原则可以避免90%的变量相关错误。特别是const的使用，强制你思考每个变量是否需要被重新赋值，从而写出更健壮的代码。