JavaScript基础教程（五）输出：不只是console.log！JavaScript输出全攻略，90%的人不知道的骚操作

JavaScript的输出方法远不止console.log，不同场景需选用不同输出策略。

1. 控制台输出家族

console.log('%c带样式的输出', 'color: red; font-size: 20px;')
console.table([{name: 'John', age: 30}])
console.dir(document.body) // DOM对象详细结构

console.debug()/info()/warn()/error()提供了多级日志分类，配合过滤器和格式化字符可实现高级调试。

2. 页面内容输出对比

// 危险：重写整个文档
document.write('<h1>仅适用于同步加载</h1>')

// 推荐：精准更新
document.getElementById('app').innerHTML = '<b>安全更新</b>'

// 现代方案
targetElement.insertAdjacentHTML('beforeend', '<li>新项目</li>')

3. 警告与用户交互

// 阻塞式警告（慎用）
alert('立即中断用户操作')

// 非阻塞提示
Toast.show('操作成功') // 第三方库实现

4. Node.js环境特殊输出

process.stdout.write('无换行输出')
console.clear() // 清空控制台

5. 异步输出的陷阱

// 异步操作后的输出可能错过DOM加载期
setTimeout(() => {
  document.write('此时加载会导致页面重绘') 
}, 1000)

最佳实践：生产环境应使用日志库统一管理输出，开发阶段善用console的丰富API，页面输出优先使用DOM操作方法，避免使用阻塞式alert。

理解不同输出方式的底层机制，能在调试效率、用户体验和代码维护性之间找到最佳平衡。