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