关于前端:JS入门到进阶-前端开发不能写undefined这是误区

4次阅读

共计 1984 个字符，预计需要花费 5 分钟才能阅读完成。

我是 HullQin，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。

明天看到一篇《不要再间接写 undefined 了》，一些人可能会被误导，所以写下这个文章，心愿防止大家被误导。

先说大背景：古代前端开发，曾经在前端引入了 webpack 这种构建工具，并且领有包含 eslint、babel 在内的残缺的生态了。如果你对他们不了解，你就齐全可能会被误导。

古代前端开发，没有人会应用 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，能极大升高代码出错率，升高前端开发者心智累赘。

大可不必这么做。

在过来，很多前端开发者这么做，有 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) 来判断。我也想揭示下：你要思考分明，你代码逻辑 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，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。

正文完