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

持续创作，加速成长！

这是我的专栏《前端入门到进阶》，跟HullQin学前端，入门到进阶！带你进大厂！欢迎关注～

背景

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

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

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

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

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

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

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

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

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

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

大可不必这么做。

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

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

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

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

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

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

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

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

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

所以有时候可以这么写if (value)，有时候不得不写if (value === 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的区别。

我是HullQin，独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋、UNO等游戏，绝不收费，绝无广告，点这就能开始玩。还独立开发了《合成大西瓜重制版》。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：《教你做小游戏》、《极致用户体验》。

再给专栏《前端入门到进阶》打个广告：跟HullQin学前端，入门到进阶！带你进大厂！欢迎关注～