目录
引言
任何编译语言最基础的问题通常是 搞清楚有哪些类型
相比一些强类型语言(例如: Java) JavaScript的类型定义没那么严格
例如： 这样的代码也是可以的
var a = 2;
a = '2';
但是 稍有经验的开发者或稍大型的JavaScript项目 就会发现
JavaScript的这种便利同时也带来了较高的沟通和维护成本 (试着回忆每次只有通过断点或打印才能看懂代码的经历)
为了克服JavaScript的这个问题 可以使用TypeScript或者Flow 他们的做法都是引入了类型系统
变量类型vs值的类型
在开始讨论JavaScript类型之前 我们再回头看一下上面这段代码
var a = 2; // 当前a的类型是number
a = '2'; // 当前a的类型是string
如果你想问 当前a的类型是什么? 那么答案就是
看看当前值的类型吧
所以在JavaScript中
变量类型 = 值的类型
这点和强类型语言(例如: Java)有很大的差别 例如下面这段Java代码
int a; // 当前a的类型是int
a = 2; // 当前a的类型是int
a = '2'; // Error
String s = '2'; // 当前s的类型是String
上述代码中 就算a只做申明而不赋值 但是a的类型还是已知并确定的int类型
七大类型
铺垫完之后 我们总算可以看看JavaScript的类型了 一共有7个
-
boolean
-
number
-
string
-
symbol
-
object
-
undefined
-
null
其中 除对象类型之外的其他统称为"基本类型"
typeof
为了查看值的类型 我们可以使用typeof运算符 它返回的是类型的字符串 例如
console.log(typeof true === 'boolean'); // true
console.log(typeof 2 === 'number'); // true
console.log(typeof 'hello' === 'string'); // true
console.log(typeof { key: '1' } === 'object'); // true
console.log(typeof Symbol() === 'symbol'); // true
这里需要注意的是 undefined和null的类型
console.log(typeof undefined === 'undefined'); // true
console.log(typeof null === 'object'); // true
另外需要注意的是 function和array的类型
console.log(typeof function(){} === 'function'); // true
console.log(typeof [1, 2, 3] === 'object'); // true
虽然funtion的typeof值为'function' 但'function'其实只是'object'的子类型
另外array的typeof值为'object' 所以JavaScript并没有特别的对于array的子类型
判断undefined
了解类型之后 日常最容易引起混淆和问题的就是对于一些特殊值的判断了
例如 下面对于undefined的判断就是不正确的
var u;
if (!u) { // 不可以�正确判断undefined
console.log('is undefined');
} else {
console.log('is not undefined');
}
判断undefined的正确方法应该是
var u;
if (typeof u === 'undefined') { // �正确判断undefined
console.log('is undefined');
} else {
console.log('is not undefined');
}
判断null
这次先不卖关子了 直接给出判断null的正确方法
var n = null;
if (!n && typeof n === 'object') { // �正确判断null
console.log('is null');
} else {
console.log('is not null');
}
判断null有两个条件
- 第一个条件 !n
该判断为true时 此时的值有以下6种情况
null
undefined
false
0
''
NaN // 后面会介绍
- 第二个条件 typeof n === 'object'
经过第一个条件!n筛选的6种情况 只有null的typeof值为'object'
obj.prop || defaultValue
判断值的有效性然后设置默认值 在实际开发中是很常用的 它的写法是这样的
obj.prop || defaultValue
需要理解的是第一个条件 和判断null时的!n类似 当判断为true时 obj.prop的值应该是除以下6种情况以外的值
null / undefined / false / 0 / '' / NaN
类型错误
实际开发中 我们常常会遇到类型错误TypeError 例如下面的代码
var i = 2;
i.toUpperCase(); // TypeError
使用babel-node执行该段代码 就会发生TypeError的错误
TypeError: i.toUpperCase is not a function
这是因为当前的i是number类型 而toUpperCase是string类型才有的方法 所以发生了TypeError
关于babel-node的更多介绍请参考JavaScript学习 之 版本
同样 想要调用非function类型的对象 也会发生TypeError 例如下面的代码
var o = { key: 'value' };
o(); // TypeError
使用babel-node执行该段代码 就会发生TypeError的错误
TypeError: o is not a function
引用错误
理解了类型错误TypeError 想必读者会想到另外一个容易混淆的错误: 引用错误ReferenceError 例如下面的代码
z; // ReferenceError
同样 调用没有声明的函数 也会发生ReferenceError 例如下面的代码
f(); // ReferenceError
简单来说
ReferneceError是指找不到 TypeError是指能找到但用得不对
NaN
NaN并不是一个新的类型 这点使用typeof可以看到
console.log(typeof NaN === 'number'); // true
既然NaN也只是一个number 那么它到底又代表什么number呢? �
NaN可以理解成无效值或坏数值
例如下面的代码就会返回NaN
var r = 0 / 's';
那么我们如何判断一个值是否为NaN呢? 直接使用===来判断的结果如下
console.log(r === NaN); // false
通过打印的结果false可以知道这种方法是不对的
正确判断NaN的方法是使用内置函数isNaN
console.log(isNaN(r)); // true
小结
类型是个双刃剑:
-
弱类型的javascript异常灵活和强大 但是带来是副作用是工程开发负担变大
-
强类型的typescript降低了开发成本 但是牺牲了javascript灵活性 因此有人戏称typescript肯定是.net / java程序员开发和喜欢的
虽然我也喜欢灵活自由的表达方式 但是从实际开发角度来看 我更倾向于使用加强类型的typescript (不小心暴露出我也是强类型语言出身的身份)
希望读者也分享你的观点和依据 我们一起讨论和完善对javascript类型的认识
参考
-
Is there a standard function to check for null, undefined, or blank variables in JavaScript?
-
How to check for an undefined or null variable in JavaScript?
更多文章, 请支持我的个人博客
网友评论