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

27次阅读

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

我是 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) 来判断。我也想揭示下:你要思考分明,你代码逻辑 valuenull、是 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 中。前端开发务必留神辨别 undefinednull的区别。

写在最初

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

正文完
 0