知安局最近搜"JavaScript"相关关键词的人特别多，我扫了一圈热搜词——从 javascript:void(0)、箭头函数、fetch 各种语法，到 Vue 项目里自动导入 Element Plus 却报 ElMessage is not defined，再到 OC 和 JavaScript 互相调用、macOS 环境配置、运行时报错……说实话，这些词凑一块儿，正好勾勒出一名前端开发者从入门到接手真实项目的完整路径。
这篇文章我就按这条路径来写：先讲环境怎么搭、基础怎么补，再聊现代语法和 API 的实用细节，接着用 Vue + Element Plus 的真实报错场景做一次排查演示，最后说说跨端互调和学习资料踩坑。所有内容都来自我实际开发和带新人过程中的积累，不讲空话，直接给结论和可以照着抄的方案。
1. 先把环境跑起来：macOS 开发环境配置与运行时错误根源
1.1 别一上来就装全家桶，先想清楚你要跑什么
很多初学者拿到的第一份"JavaScript 环境配置教程"会让人装一堆东西：Node、npm、yarn、pnpm、Vite、Webpack……全装完再说。结果就是环境变量乱成一锅粥，跑什么都是满屏报错。我带的几个新人里，至少有三次"运行时报错"最后定位到是环境问题，而不是代码问题。
在 macOS 上，一套干净、够用的 JavaScript 开发环境其实只需要三样：
- Node.js：JavaScript 的运行时，跑脚本、装依赖都靠它。
- 包管理器：npm 会随 Node 一起装，够用；你要是愿意用 pnpm 或 yarn 也行，但别同时混用。
- 一个编辑器：VS Code 是绝大多数人的选择，装好 ESLint 和 Prettier 插件即可。
安装 Node 我推荐用 nvm（Node Version Manager）而不是直接去官网下 pkg 安装包。原因很简单：真实项目会锁定 Node 版本，你同时维护三五个项目时，不同项目可能要求 Node 14、16、18，用 nvm 可以随时切换，不用反复卸载安装。
bash复制# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# 安装 Node 长期支持版
nvm install --lts
# 查看当前版本
node -v
装完之后，在终端输入 node -v 能输出版本号，npm -v 也正常，环境就通了。如果出现 command not found: node，大概率是 nvm 没有写入 shell 配置，检查 ~/.zshrc 里有没有 nvm 的初始化脚本，重新 source ~/.zshrc 就好。
1.2 macOS 上常见的运行时错误，冤枉代码的情况占一半
我见过太多人对着一段逻辑完全正确的代码抓耳挠腮，结果问题出在环境上。macOS 下这几个错误出现频率最高，我列个速查表：
| 错误信息 | 常见原因 | 解决方法 |
|---|---|---|
command not found: node |
nvm 未正确加载或 Node 未安装 | 检查 ~/.zshrc，重新加载 nvm |
EACCES: permission denied |
全局安装依赖时权限不足 | 用 nvm 管理 Node，不要用 sudo 装全局包 |
Digital envelope routines::unsupported |
Node 17+ 与旧版 Webpack 的 OpenSSL 冲突 | 升级构建工具，或设置 NODE_OPTIONS=--openssl-legacy-provider |
Module not found: Error: Can't resolve 'xxx' |
依赖没装全或路径写错 | 先 npm install，再检查 import 路径 |
Cannot find module 'xxx' |
node_modules 损坏或版本不一致 | 删除 node_modules 和 lock 文件后重装 |
最后一个错误建议优先试：rm -rf node_modules package-lock.json && npm install。这招能解决大概三分之一莫名其妙的本地运行时报错。
注意：macOS 上不要用
sudo npm install -g去装全局工具。权限错误十有八九是这么来的，而且 sudo 装出来的全局包在 nvm 切换 Node 版本后会直接失效，到时候你都不知道哪个环节出了问题。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 别让基础概念卡住你：函数、void(0) 与箭头函数
2.1 理解 JavaScript 函数，先抓住"一等公民"这个点
"JavaScript 函数"这个热搜词太宽泛了，但背后反映的问题很集中：函数声明、函数表达式、立即执行函数、回调函数、高阶函数……每种写法看着相似，行为却不同。新手最容易栽在"函数声明会被提升，函数表达式不会"这一点上。
javascript复制// 函数声明：可以在定义之前调用，因为声明会被提升
sayHello("张三"); // 正常输出
function sayHello(name) {
console.log("你好，" + name);
}
// 函数表达式：赋值给变量，声明不会提升
sayBye("李四"); // TypeError: sayBye is not a function
var sayBye = function (name) {
console.log("再见，" + name);
};
我当时带新人最喜欢用这个例子来解释"提升"（hoisting）的概念：JavaScript 引擎在正式执行前会先把所有函数声明和变量声明"预读"一遍，但赋值操作留在原处。所以 var sayBye 这个变量名被提升了，但它的值还是 undefined，一调用就报 not a function。
这也是为什么现代项目都推荐用 const 声明函数表达式，能在编译阶段就暴露这种问题。ESLint 里的 prefer-const 规则就是干这个的。
2.2 javascript:void(0) 是什么，为什么老在旧代码里看到
搜索 javascript:void(0) 的人，多半是碰到了老项目或者某些网页源码。这个写法其实是把 JavaScript 当作 href 属性的协议来用：
html复制<a href="javascript:void(0);" onclick="handleClick()">点击我</a>
void 是一个一元运算符，它对后面的表达式求值，然后永远返回 undefined。写成 void(0) 就是计算 0 并返回 undefined。为什么要这么干？因为如