写出更好的JavaScript之undefined篇（上）

“全局变量”和“全局对象的属性”是指同样的东西，只是因为要配合上下文才用了不同的说法，正文中我就不再另外解释了；“声明”指通过“var”语句声明变量和/或对函数及其签名的定义；“变量”指通过“var”语句声明过或者在函数体中试图访问的命名参数；“undefined”指名为“undefined”的值（全局或本地变量），而“未定义”指type(...) == “undefined”的情况；“output”是一个显示传入参数的函数，可以看作是“alert”的同类。

我们写JavaScript程序的时候总有需要用到“未定义”的时候，比方说我们要知道某一个值是不是已经经过赋值，或者我们希望消除某一个已经赋予的值，我们就可能这样做：


代码如下:

output(myVar === undefined);
myVar = undefined;

然而这样做并不太好，如果我们尝试“读”（或者比较）一个不存在的变量，就会引发一个异常。
比方说如果因为设计得不够周全，执行上面的代码的时候还没有定义过myVar这个变量，上面的代码就会出错；
另外在较早的浏览器版本上，也不存在undefined这个预定义值，所以为了提高兼容性和容错性，我们可以这样做：


代码如下:

output(typeof(myVar) == "undefined");
myVar = void(0);

typeof运算符是JavaScript的语言功能，虽然上面的代码看起来像是这样的一种东西：


代码如下:

output(oneFunction(myVar) == "undefined");
myVar = void(0);

但这两者有一个重要区别——当myVar不存在的时候，前者可以正确执行，并返回字符串"undefined"；而后者不管内部构造是什么样的，都会引发异常。
void则是另一个语言功能，这个运算符的意义是向脚本的其它部分隐藏它的传入参数；而假如有一个语句试图得到void“运算”的结果，它就只能得到“未定义”。
因为void的这个特性，void最常见的功能就有两种：一是像上面的代码中那样将“未定义”值赋予给其它变量/属性；另一种就是像下面这样：
<a href="javascript:void(favList.push(curItem));">添加到收藏列表</a>
其中favList是一个JavaScript数组，而curItem是一个已经定义的对象——数组的push方法会返回执行push操作以后数组的长度，在这个例子里面这个长度对我们来说一点用都没有，但如果放任它不管的话，浏览器就可能会跳转到一个几乎为空白的脚本结果页面，只显示push的返回值，比方说“3”。
因此需要用一个void运算符来“欺骗”浏览器：这里啥都没有。
现在把目光回到对“未定义”的使用上，就会发现前面我们用来同“未定义”比较的“高容错性”的typeof运算符，用起来有点麻烦：总共需要多写“typeof()""”这样10个字符。
虽然我们是成天跟麻烦打交道的程序员，但这也不能说明我们不该想办法减少麻烦啊～各种开发工具其实不都是为了把编程工作变得简单才出现的么？
所以说如果明确知道一个变量一定一定绝对绝对已经声明过，就可以把这个变量直接和已知的“未定义”相比较，比方说这样：


代码如下:

output(myVar === void(0));

相比于使用typeof运算符，后面这个办法除了少打几个字符，还有一些好处：可以避免难以察觉的拼写错误（比方说把“undefined”写成“undefinied”什么的） 。

到这里，最常见的关于“undefined”/“未定义”的技巧，已经介绍完了。
在下一篇里面，我会介绍另一些不太常见的技巧。

赞 (0)

相关推荐

  • 写出更好的JavaScript之undefined篇（上）

    "全局变量"和"全局对象的属性"是指同样的东西,只是因为要配合上下文才用了不同的说法,正文中我就不再另外解释了:"声明"指通过"var"语句声明变量和/或对函数及其签名的定义:"变量"指通过"var"语句声明过或者在函数体中试图访问的命名参数:"undefined"指名为"undefined"的值(全局或本地变量),而"未定义"

  • 分享5个小技巧让你写出更好的 JavaScript 条件语句

    在使用 JavaScript 时,我们常常要写不少的条件语句.这里有五个小技巧,可以让你写出更干净.漂亮的条件语句. 1. 使用 Array.includes 来处理多重条件 举个栗子 : // 条件语句 function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); } } 乍一看,这么写似乎没什么大问题.然而,如果我们想要匹配更多的红色水果呢,比方说『樱桃』和『蔓越莓』?我

  • 写出更好的JavaScript程序之undefined篇（中）

    写出更好的JavaScript程序之undefined篇（中）

    写在前面的依然是消歧义声明:本文中JavaScript是指一般意义上的JavaScript,并不只限定"自称是JavaScript"的运行环境:"全局变量"和"全局对象的属性"是指同样的东西,只是因为要配合上下文才用了不同的说法,正文中我就不再另外解释了:"声明"指通过"var"语句声明变量和/或对函数及其签名的定义:"变量"指通过"var"语句声明过或者在函数体中试

  • 几个你不知道的技巧助你写出更优雅的vue.js代码

    1. watch 与 computed 的巧妙结合 如上图,一个简单的列表页面. 你可能会这么做: created(){ this.fetchData() }, watch: { keyword(){ this.fetchData() } } 如果参数比较多,比如上图 关键字筛选, 区域筛选, 设备ID筛选, 分页数, 每页几条数据, 可能会是这样: data(){ return { keyword:'', region:'', deviceId:'', page:1 } }, methods:

  • Android实用小技巧之利用Lifecycle写出更好维护的代码

    目录 前言 场景 优化版本1 优化版本2 单元测试 总结 前言 你是否在onStart()启动过某项任务却忘记在onStop()中取消呢?人不是机器,难免会有错漏.就算老手不会犯错,也不能保证新人不会.学会下面的小技巧,让这种粗心成为不可能. 关于Lifecycle的源码,已经有很多大佬分析过.这篇文章的主旨是让读者对Lifecycle的使用场景有更多的体会,这样也能更好地理解源码.先来看一个场景,然后一步一步优化. 场景 假设我们有一个界面,模拟一个厨房.里面有灶台和餐桌.要求每秒钟翻炒一下,

  • Javascript异步编程的4种方法让你写出更出色的程序

    Javascript异步编程的4种方法让你写出更出色的程序

    你可能知道,Javascript语言的执行环境是"单线程"(single thread). 所谓"单线程",就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推.  这种模式的好处是实现起来比较简单,执行环境相对单纯:坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其

  • 如何开发出更好的JavaScript模块

    不少人都曾经在 npm 上发布过自己开发的 JavaScript 模块,而在使用一些模块的过程中,我经常产生"这个模块很有用,但如果能 xxx 就更好了"的想法.所以,本文将站在模块使用者的角度总结一下,如何能让模块变得更好用. 提供 ES6 模块的入口 webpack 和 rollup 都支持对 ES6 模块做一些静态优化(例如 Tree Shaking 和 Scope Hoisting),它们都会优先读取 package.json 中的 module 字段作为 ES6 模块的入口,

  • Java 11 正式发布,这 8 个逆天新特性教你写出更牛逼的代码

    Java 11 正式发布,这 8 个逆天新特性教你写出更牛逼的代码

    美国时间 09 月 25 日,Oralce 正式发布了 Java 11,这是据 Java 8 以后支持的首个长期版本.非常值得大家的关注,可以通过下面的地址进行下载: https://www.oracle.com/technetwork/java/javase/downloads/jdk11-downloads-5066655.html 为什么说是长期版本,看下面的官方发布的支持路线图表. 可以看出 Java 8 扩展支持到 2025 年,而 Java 11 扩展支持到 2026 年. 现在大部

  • 如何利用Promises编写更优雅的JavaScript代码

    你可能已经无意中听说过 Promises,很多人都在讨论它,使用它,但你不知道为什么它们如此特别.难道你不能使用回调么?有什么了特别的?在本文中,我们一起来看看 Promises 是什么以及如何使用它们写出更优雅的 JavaScript 代码. Promises 易于阅读 比如说我们想从 HipsterJesus 的API中抓取一些数据并将这些数据添加到我们的页面中.这些 API 的响应数据形式如下: { "text": "<p>Lorem ipsum...<

  • 一篇文章教你写出干净的JavaScript代码

    目录 1. 变量 使用有意义的名称 避免添加不必要的上下文 避免硬编码值 2. 函数 使用有意义的名称 使用默认参数 限制参数的数量 避免在一个函数中做太多事情 避免使用布尔标志作为参数 避免写重复的代码 避免副作用 3. 条件语句 使用非负条件 尽可能使用简写 避免过多分支 优先使用 map 而不是 switch 语句 4.并发 避免回调 5. 错误处理 6.注释 只注释业务逻辑 使用版本控制 总结 一段干净的代码,你在阅读.重用和重构的时候都能非常轻松.编写干净的代码非常重要,因为在我们日常

随机推荐