我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发加微信，交友），转载本文需作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。背景今天看到一篇文章《不要再直接写undefined了》，可能有些人被误导了，所以写下这篇文章，希望能防止大家被误导。先说说背景：现代前端开发在前端引入了webpack等构建工具，并且拥有包括eslint、babel在内的完整生态。如果您不了解它们，您可能会完全被误导。关于现代前端开发中名为undefined的变量，无论是局部变量还是全局变量，都不会有人用undefined作为变量名。因为现代前端项目都会配置eslint，所有常见的eslint规则都有这样一条规则：Shadowingofglobalproperty'undefined'。(no-shadow-restricted-names)开发代码后，如果敢用undefined作为变量名，那么就会有明显的错误级别提示：为什么说“所有通用”的规则都有上面的规则呢？因为这条规则默认在eslint:recommended包中，所以是一个对eslint规则限制比较少的包。几乎所有规则都是经典规则，每个人都需要遵守。这不像airbnb，规则非常严格。如果你不知道eslint:recommended是什么意思或者airbnb是什么意思，我建议你按照教程尝试安装eslint并初始化，你会看到这两个名词，都是业界常见的eslint规则模板。如果你的项目没有配置eslint，强烈建议连接ESLint，可以大大降低代码错误率，减轻前端开发者的精神负担。无需使用void0而不是undefined来执行此操作。过去，很多前端开发者这样做的原因有两个：void0是undefined最兼容的表达方式。void0的字符串长度为5，比undefined更短，占用的体积更小。但是在现代前端开发中，我们有Webpack，可以用来对代码进行“打包构建”。过程中可以使用各种Plugins，比如Babel用来翻译代码，terser用来压缩和混淆代码。对于代码构建来说，最重要的目的之一就是保证代码的兼容性，同时也可以在低版本的浏览器中运行。保证代码体积足够小，比如通过uglify尽量压缩代码变量名，删除多余的空格等。很多常见的Webpack配置基本都是把undefined压缩成void0。比如我用的React脚手架create-react-app，并使用其默认的Webpack配置来打包代码。代码中的undefined已经被压缩成了void0，现在有了工具翻译，前端开发最重要的就是保证代码的可读性。显然，在现代前端开发中，undefined是公认的写法。毕竟有些人还不知道void0。团队协作项目中，只建议写undefined，不要写void0。关于if(value)坑的文章评论区有人说可以用if(value)判断。我还要提醒你：你得考虑清楚你的代码的逻辑值是null、0、''还是false，能不能和undefined的后续逻辑保持一致。有时有效，有时无效。所以有时候可以这样写if(value)，有时候就得写if(value===undefined)。JSON.stringify中关于undefined的另一个坑console.log(JSON.stringify({a:123,b:undefined}));运行上面的代码，JSON.stringify将删除所有值为undefined的键。所以序列化结果是字符串{"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授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。
