[JS入门到进阶] 前端开发不能写undefined？这是误区！

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

背景

今天看到一篇《不要再直接写undefined了》，一些人可能会被误导，所以写下这个文章，希望避免大家被误导。

先说大背景：现代前端开发，已经在前端引入了 webpack 这种构建工具，并且拥有包括 eslint、babel 在内的完整的生态了。如果你对他们不理解，你就完全可能会被误导。

关于变量名叫undefined

现代前端开发，没有人会使用undefined作为变量名，无论是局部变量还是全局变量，都不会。

因为现代前端项目都会配置eslint，所有常见eslint规则都有这样的规则：

Shadowing of global property 'undefined'.(no-shadow-restricted-names)

以后开发代码，你要是敢用undefined作变量名，那么就会有明显的Error级别提示：

为什么我说“所有常见”规则都有上述规则呢？因为这条规则默认是在eslint:recommended这个包里的，它是一个eslint规则限制比较少的包，几乎所有规则都是经典规则，大家都需要遵守。这不像airbnb，规则限制非常多。

如果你不知道eslint:recommended是什么意思，也不知道airbnb是什么意思，建议你尝试安装eslint并按照教程初始化一下，你就见到这两个名词了，是业界通用的eslint规则模板。

如果你的项目没有配置eslint，强烈建议接入ESLint，能极大降低代码出错率，降低前端开发者心智负担。

关于用void 0代替undefined

大可不必这么做。

在过去，很多前端开发者这么做，有2个原因：

void 0是兼容性最好的表示undefined的写法。
void 0字符串长度是5，比undefined短，占用体积更小。

但是现代前端开发，我们有了Webpack，可以借助它，对代码做一次“打包构建”，过程中可以使用各种Plugin，比如Babel对代码进行转译、terser对代码进行压缩混淆。

对代码构建，其中很重要的目的就是：

保证代码兼容性，在低版本浏览器中也能运行。
保证代码体积足够小，例如通过uglify把代码变量名尽可能压缩、删除多余空白符等。

很多常见的Webpack配置，基本都会把undefined压缩为void 0。

比如，我用create-react-app这个React脚手架，用它默认的Webpack配置，打包代码，代码中的undefined已经被压缩为void 0了。

既然有了工具转译，那么，前端开发最重要的事情就是：保证代码可读性。

显然，现代前端开发，undefined是大家公认的写法，毕竟有些人还不知道void 0。在团队协作项目中，只建议写undefined而不是void 0。

关于if (value)的坑

那篇文章评论区有人说，可以用if (value)来判断。我也想提醒下：你要考虑清楚，你代码逻辑value是null、是0、是''、是false这些情况，能否跟undefined后续逻辑保持一致。有时候是可以的，有时候是不行的。

所以有时候可以这么写if (value)，有时候不得不写if (value === undefined)。

另一个关于JSON.stringify中undefined的坑

console.log(JSON.stringify({a: 123, b: undefined}));

运行上述代码，JSON.stringify会把所有值是undefined的key删掉。所以序列化结果是{"a":123}这个字符串。

console.log(JSON.stringify({a: 123, b: null}));

运行上述代码，JSON.stringify的结果是{"a":123,"b":null}这个字符串。

发Http请求的时候很有用。因为不管是axios还是别的请求库，都会用JSON.stringify对你的Object数据进行序列化，再放进body中。前端开发务必注意区分undefined和null的区别。

写在最后