17370845950

JavaScript的核心用途是网页交互与动态渲染，依赖addEventListener、querySelector、fetch等API；受浏览器沙箱、同源策略、单线程等约束，不能直接操作文件系统或跨域读DOM。

JavaScript 不是“能做什么”的问题，而是“几乎 everywhere 都在用它做什么”——但关键在于：它只在浏览器里跑前端逻辑，或通过 Node.js 跑服务端代码，不能直接操作文件系统（除非明确授权）、不能绕过同源策略读其他网站 DOM、也不能替代 Python 做科学计算。

网页交互和动态内容渲染

这是 JavaScript 最原始也最不可替代的用途。用户点击按钮弹窗、表单实时校验、下拉菜单展开收起、无限滚动加载新数据……全靠 addEventListener、document.querySelector、fetch 这些 API 驱动。

• 别在 DOMContentLoaded 之前操作 DOM 元素，否则 querySelector 返回 null
• 用 innerHTML 插入 HTML 字符串有 XSS 风险，优先用 textContent 或 createElement + appendChild
• 大量 DOM 更新时，避免反复触发重排重绘，可先用 DocumentFragment 批量插入

调用 Web API 实现原生级能力

现代浏览器暴露了大量底层能力，JavaScript 可以直接调用：地理位置（navigator.geolocation）、摄像头（getUserMedia）、通知（Notification.requestPermission）、离线缓存（Cache + ServiceWorker）等。

• Notification.requestPermission() 必须由用户手势（如 click）触发，自动调用会被浏览器静默拒绝
• getUserMedia 在非 HTTPS 页面会被 Chrome 等主流浏览器禁用
• localStorage 容量有限（通常 5–10MB），且是同步阻塞的，大数据建议用 IndexedDB

构建服务端应用（Node.js）

Node.js 让 JavaScript 脱离浏览器运行，处理 HTTP 请求、读写文件、连接数据库、跑定时任务。但它不是“另一个 Java”，没有多线程模型，所有 I/O 默认异步，靠

• 用 fs.readFile 而不是 fs.readFileSync，后者会阻塞整个进程
• HTTP 服务别直接用原生 http 模块写生产项目，选 express 或 fastify 这类成熟框架
• 环境变量必须用 process.env.NODE_ENV 判断，而不是硬编码字符串，否则部署时容易出错

与前端框架协同工作（React/Vue/Svelte）

这些框架本质是 JavaScript 库，最终都编译/运行在浏览器中。它们不改变 JS 的能力边界，只是封装了状态管理、组件生命周期、虚拟 DOM 差异更新等模式。

• React 中的 useEffect 不等于“页面加载完就执行”，它的依赖数组为空（[]）时，才类似 componentDidMount
• Vue 的响应式原理基于 Proxy（Vue 3）或 Object.defineProperty（Vue 2），对数组索引赋值（arr[0] = x）不会触发更新
• Svelte 编译时生成高效 DOM 操作代码，但无法在运行时动态添加响应式属性——它不是靠运行时劫持，而是靠编译器识别 $: 声明

真正难的从来不是“JS 能做什么”，而是清楚它在哪种上下文里受什么约束：浏览器沙箱、事件循环机制、单线程模型、模块加载规则（ESM vs CommonJS）、以及各平台对 Web API 的实现差异。漏掉其中任一环，写的代码就可能在某个环境里静默失败。