这篇文章主要介绍了JavaScript中判断整字类型最简洁的实现方法,本文给出多个判断整数的方法,最后总结出一个最短、最简洁的实现方法,需要的朋友可以参考下
我们知道JavaScript提供了typeof运算符,因此最容易想到的是用typeof来判断是否是number类型。
1
2
3
|
function isNumber(obj) { return typeof obj === 'number'
} |
这个函数对于整数和浮点数都没有问题,但对于NaN值也返回true这让人感到不爽,毕竟用isNumber判断通过后谁也不会用NaN去做算术运算。
那改进一下,用Object.prototype.toString试试。
function isNumber(obj) {
return Object.prototype.toString.call(obj) === '[object Number]'
}
和typeof判断一样,对于NaN也返回true,代码量还大了,这不是想要的结果。toString.call方式判断js数组(Array)可行,数字则力不从心了。
再改进下,NaN值用isNaN函数来对付。
1
2
3
|
function isNumber(obj) { return typeof obj === 'number' && !isNaN(obj)
} |
这次,如果传入的是非数字(NaN或者可转成NaN的值)就返回false了
1
2
3
4
5
6
7
|
function isNumber(obj) { return typeof obj === 'number' && !isNaN(obj)
} isNumber(1) // true
isNumber(1.2) // true
isNumber(NaN) // false
isNumber( parseInt( 'a' ) ) // false
|
嗯,这个isNumber不错了,但还有一个等价的,用isFinite来判断
1
2
3
|
function isNumber(obj) { return typeof obj === 'number' && isFinite(obj)
} |
到现在,最短代码的数字判断是此文提到的第三个使用isNaN函数的。下面隆重推出世界上最短的数字判断网页代码
1
2
3
|
function isNumber(obj) { return obj === +obj
} |
对于整数,浮点数返回true,对于NaN或可转成NaN的值返回false。
没看懂是吗? 咕~~(╯﹏╰)
园友说这还不是世界上最短判断数字代码,参数obj可以改成一个字符的。(⊙o⊙)你是对的。
举一反三,类似的利用JS动态语言特性(运算符运算时内部自动类型转换)最短的判断还有。
1
2
3
4
5
6
7
8
|
// 判断字符串 function isString(obj) { return obj === obj+ ''
} // 判断布尔类型 function isBoolean(obj) { return obj === !!obj
} |
我们都知道,JavaScript是类型松散型语言,在声明一个变量时,我们是无法明确声明其类型的,变量的类型是根据其实际值来决定的,而且在运行期间,我们可以随时改变这个变量的值和类型,另外,变量在运行期间参与运算时,在不同的运算环境中,也会进行相应的自动类型转换。
自动类型转换一般是根运行环境和操作符联系在一起的,是一种隐式转换,看似难以捉摸,其实是有一定规律性的,大体可以划分为:转换为字符串类型、转换为布尔类型、转换为数字类型。今天我们就介绍一下这几种转换机制。
1. 转换为字符串类型(to string)
当加号“+”作为二元操作符(binary)并且其中一个操作数为字符串类型时,另一个操作数将会被无条件转为字符串类型:
// 基础类型 var foo = 3 + ''; // "3" var foo = true + ''; // "true" var foo = undefined + ''; // "undefined" var foo = null + ''; // "null"
// 复合类型 var foo = [1, 2, 3] + ''; // "1,2,3" var foo = {} + ''; // "[object Object]" // 重写valueOf()和toString() var o = {
valueOf: function() {
return 3;
},
toString: function() {
return 5;
}
}; foo = o + ''; // "3" o = {
toString: function() {
return 5;
}
}; foo = o + ''; // "5"
从上面代码中可以看到,对于基础类型,会直接转为与字面量相一致的字符串类型,而对于复合类型,会先试图调用对象的valueOf()方法,如果此方法返回值是引用类型,则接着再调用其toString()方法,最后将返回值转为字符串类型。上面我们定义了一个对象,包含valueOf()和toString()方法,然后和一个空字符串进行运算,可以看得出来,它是调用了valueOf()方法,然后我们重写此对象,将valueOf()移除,也就是不重写object的valueOf()方法,从最后的结果来看,它最终是调用了toString()方法,然后将返回的数字类型5与空字符串进行运算,最终得到一个字符串类型的值。
2. 转为布尔类型(to boolean)
a. 数字转为布尔类型(from number)
当数字在逻辑环境中执行时,会自动转为布尔类型。0和NaN会自动转为false,其余数字都被认为是true,代码如下:
// 0和NaN为false,其余均为true if (0) {
console.log('true');
} else {
console.log('false'); // output: false
} if (-0) {
console.log('true');
} else {
console.log('false'); // output: false
} if (NaN) {
console.log('true');
} else {
console.log('false'); // output: false
} // 其余数字均为true if (-3) {
console.log('true'); // output: true
} else {
console.log('false');
} if (3) {
console.log('true'); // output: true
} else {
console.log('false');
}
从上面的代码中可以看出,非0负值也会被认为是true,这一点需要注意。
b. 字符串转为布尔类型(from string)
和数字类似,当字符串在逻辑环境中执行时,也会被转为布尔类型。空字符串会被转为false,其它字符串都会转为true,代码如下:
// 空字符串为false if ('') {
console.log('true');
} else {
console.log('false'); // output: false
} // 其他字符串均为true if ('0') {
console.log('true'); // output: true
} else {
console.log('false');
} if ('false') {
console.log('true'); // output: true
} else {
console.log('false');
}
c. undefined和null转为布尔类型(from undefined and null)
当undefined和null在逻辑环境中执行时,都被认为是false,看下面代码:
// undefined和null都为false if (undefined) {
console.log('true');
} else {
console.log('false'); // output: false
} if (null) {
console.log('true');
} else {
console.log('false'); // output: false
}
d. 对象转为布尔类型(from object)
当对象在逻辑环境中执行时,只要当前引用的对象不为空,都会被认为是true。如果一个对象的引用为null,根据上面的介绍,会被转换为false。虽然使用typeof检测null为"object",但它并不是严格意义上的对象类型,只是一个对象空引用的标识。
另外,我们这里的逻辑环境不包括比较操作符(==),因为它会根据valueOf()和toString()将对象转为其他类型。
现在我们来看一下对象类型的示例:
// 字面量对象
var o = {
valueOf: function() {
return false;
},
toString: function() {
return false;
}
}; if (o) {
console.log('true'); // output: true
} else {
console.log('false');
} // 函数
var fn = function() {
return false;
}; if (fn) {
console.log('true'); // output: true
} else {
console.log('false');
} // 数组
var ary = []; if (ary) {
console.log('true'); // output: true
} else {
console.log('false');
} // 正则表达式
var regex = /./; if (regex) {
console.log('true'); // output: true
} else {
console.log('false');
}
可以看到,上面的对象都被认为是true,无论内部如何定义,都不会影响最终的结果。
正是由于对象总被认为是true,使用基础类型的包装类时,要特别小心:
// 以下包装对象都被认为是true if (new Boolean(false)) {
console.log('true'); // output: true
} else {
console.log('false');
} if (new Number(0)) {
console.log('true'); // output: true
} else {
console.log('false');
} if (new Number(NaN)) {
console.log('true'); // output: true
} else {
console.log('false');
} if (new String('')) {
console.log('true'); // output: true
} else {
console.log('false');
}
根据们上面介绍的,它们对应的基础类型都会被转为false,但使用包装类实例的时候,引擎只会判断其引用是否存在,不会判断内部的值,这一点初学者需要多多注意。当然我们也可以不使用new关键字,而是显示的调用其包装类函数,将这些值转为布尔类型:
if (Boolean(false)) {
console.log('true');
} else {
console.log('false'); // output: false
} if (Number(0)) {
console.log('true');
} else {
console.log('false'); // output: false
} if (Number(NaN)) {
console.log('true');
} else {
console.log('false'); // output: false
} if (String('')) {
console.log('true');
} else {
console.log('false'); // output: false
}
对于Boolean类,有一个特别需要注意的是,当传入一个字符串时,它不会去解析字符串内部的值,而是做个简单地判断,只要不是空字符串,都会被认为是true:
if (Boolean('false')) {
console.log('true'); // output: true
} else {
console.log('false');
} if (Boolean('')) {
console.log('true');
} else {
console.log('false'); // output: false
}
上面介绍了这么多,还有几个例子需要提一下,那就是逻辑非、逻辑与和逻辑或操作符,连用两个逻辑非可以把一个值转为布尔类型,而使用逻辑与和逻辑或时,根据上面的规则,参与运算的值会被转换为相对应的布尔类型:
// 下面几个转为false var isFalse = !!0; // false var isFalse = !!NaN; // false var isFalse = !!''; // false var isFalse = !!undefined; // false var isFalse = !!null; // false // 下面都转为true var isTrue = !!3; // true var isTrue = !!-3; // true var isTrue = !!'0'; // true var isTrue = !!{}; // true // 逻辑与 var foo = 0 && 3; // 0 var foo = -3 && 3; // 3 // 逻辑或 var foo = 0 || 3; // 3 var foo = -3 || 3; // -3
3. 转为数字类型(to number)
操作数在数字环境中参与运算时,会被转为相对应的数字类型值,其中的转换规则如下:
i. 字符串类型转为数字(from string): 空字符串被转为0,非空字符串中,符合数字规则的会被转换为对应的数字,否则视为NaN
ii. 布尔类型转为数字(from boolean): true被转为1,false被转为0
iii. null被转为0,undefined被转为NaN
iv. 对象类型转为数字(from object): valueOf()方法先试图被调用,如果调用返回的结果为基础类型,则再将其转为数字,如果返回结果不是基础类型,则会再试图调用toString()方法,最后试图将返回结果转为数字,如果这个返回结果是基础类型,则会得到一个数字或NaN,如果不是基础类型,则会抛出一个异常
一个其他类型的值被转换为数字,跟其参与运算的操作符有很密切的联系,下面我们就来详细介绍:
当加号“+”作为一元操作符(unary)时,引擎会试图将操作数转换为数字类型,如果转型失败,则会返回NaN,代码如下所示:
var foo = +''; // 0 var foo = +'3'; // 3 var foo = +'3px'; // NaN var foo = +false; // 0 var foo = +true; // 1 var foo = +null; // 0 var foo = +undefined; // NaN
上面代码中,对于不符合数字规则的字符串,和直接调用Number()函数效果相同,但和parseInt()有些出入:
var foo = Number('3px'); // NaN var foo = parseInt('3px'); // 3
可以看出,parseInt对字符串参数比较宽容,只要起始位置符合数字类型标准,就逐个解析,直到遇见非数字字符为止,最后返回已解析的数字部分,转为数字类型。
当加号“+”作为二元操作符时,我们上面也提到过,如果一个操作数为字符串,则加号“+”作为字符串连接符,但如果两个操作数都不是字符串类型,则会作为加法操作符,执行加法操作,这个时候,其他数据类型也会被转为数字类型:
var foo = true + 1; // 2 var foo = true + false; // 1 var foo = true + null; // 1 var foo = null + 1; // 1 var foo = null + undefined; // NaN var foo = null + NaN; // NaN
上面加法运算过程中都出现了类型转换,true转为1,false转为0,null转为0,undefined转为NaN,最后一个例子中,null和NaN运算时,是先转为0,然后参与运算,NaN和任何其他数字类型运算时都会返回NaN,所以最终这个结果还是NaN。
对于undefined转为NaN似乎很好理解,但为什么null会转为0呢?这里也有些历史渊源的,熟悉C的朋友都知道,空指针其实是设计为0值的:
// 空指针的值为0 int *p = NULL; if (p == 0) {
printf("NULL is 0"); // output: NULL is 0
}
编程语言的发展是有规律的,语言之间也存在着密切的关联,新的语言总是会沿用老的传统,继而添加一些新的特性。从上面的例子中,我们发现,null被转为0其实很好理解,一点也不奇怪。
另外,我们可别忘了减号“-”操作符,当减号“-”作为一元操作符(unary negation)时,也会将操作数转换为数字,只不过转换的结果与上面相反,合法的数字都被转为负值。
除加号“+”以外的其他二元操作符,都会将操作数转为数字,字符串也不例外(如果转型失败,则返回NaN继续参与运算):
var foo = '5' - '2'; // 3 var foo = '5' * '2'; // 10 var foo = '5' / '2'; // 2.5 var foo = '5' % '2'; // 1 var foo = '5' << '1'; // 10 var foo = '5' >> '1'; // 2 var foo = '5' ** '2'; // 25 var foo = '5' * true; // 5 var foo = '5' * null; // 0 var foo = '5' * undefined; // NaN var foo = '5' * NaN; // NaN
上面的操作符中,位移和求幂操作符平时用的不多,不过在某些场景下(比如算法中)还是挺实用的。我们都知道,JavaScript中的数字类型都以浮点型存储,这就意味着我们不能想C和Java那样直接求整除结果,而是通过相关的函数进一步处理实现的,如果通过位移可以简化不少,而求幂操作也可以直接通过求幂运算符算出结果,看下面代码:
// 浮点型运算
var foo = 5 / 2; // 2.5 // 整除操作
var foo = Math.floor(5 / 2); // 2 // 向右移一位实现整除
var foo = 5 >> 1; // 2 // 求幂函数
var foo = Math.pow(5, 2); // 25 // 求幂运算
var foo = 5 ** 2; // 25
除了上面的操作符之外,递增和递减操作符也会将操作数转为数字,下面以前缀递增操作符为例:
var foo = ''; ++foo; // foo: 1 var foo = '3'; ++foo; // foo: 4 var foo = true; ++foo; // foo: 2 var foo = null; ++foo; // foo: 1 var foo = undefined; ++foo; // foo: NaN var foo = '3px'; ++foo; // foo: NaN
上面就是基本数据类型在数字环境下的转换规则。对于对象类型,同样有一套转换机制,我们上面也提到了,valueOf()方法和toString()方法会在不同的时机被调用,进而得到相应的返回值,最后根据返回值再进行类型转换,将其转为目标类型。由于篇幅限制,关于自动类型转换的后续内容,博主安排在下一篇中讲解,敬请期待。
在上一篇文章中,我们详细讲解了JavaScript中的自动类型转换,由于篇幅限制,没能覆盖到所有的转换规则,这次准备详细讲解一下。
上次我们提到了对象类型参与运算时转换规则:
1). 在逻辑环境中执行时,会被转换为true
2). 在字符串环境和数字环境中,它的valueOf()方法和toString()方法会依次被调用,然后根据返回值进行再次转换。首先,valueOf()方法会被调用,如果其返回值是基础类型,则将这个返回值转为目标类型,如果返回值不是基础类型,则再试图调用toString()方法,然后将返回值转型。如果最终的返回值不是基础类型,则转型会抛出一个异常,如果是基础类型,则会相应的转为字符串或数字。
接着上次的讲,当加号“+”作为一元操作符应用在对象类型上面时,valueOf()和toString()方法,将会有机会被调用,最终返回值会被转为数字类型,我们因而会得到一个数字或NaN。先来看看valueOf()和toString()的调用顺序:
var o = {
valueOf: function() {
return '3';
},
toString: function() {
return '5';
}
}; var foo = +o; console.log(foo); // 3
可以看到,valueOf()方法被调用,返回了字符串类型的'3',然后被转为数字类型的3,而toString()方法并没有被调用,我们再次移除valueOf()方法:
var o = {
toString: function() {
return '5';
}
}; var foo = +o; console.log(foo); // 5
这时候toString()方法就被调用了,根据其返回值'5',对象被成功转为了数字5。
估计很多初学者都会觉得,如果定义了valueOf()方法,就去调用valueOf()方法,如果没定义,就去调用toString()方法,其实是不准确的。
实际上,valueOf()方法总会在第一时间被调用,至于toString()方法的调用与否,那得看valueOf()方法的返回值了,我们上面也提到了,如果其返回值是基础类型,那么toString()方法根本没有机会被调用,而如果其返回值是引用类型,则会再试图调用toString()方法得到最终值。
通常,对象原型中的valueOf()方法会返回其自身引用,拿上面的例子来讲:
var o = {
toString: function() {
return '5';
}
}; console.log(o.valueOf() === o); // true
我们用了全等(===)操作符来比较其valueOf()返回值和其自身,发现是完全相同的,证明对象原型中的valueOf()的返回值的确是其自身,上面结果等同于下面这段代码:
// 重写实例中的valueOf()方法,其返回值是对象自身 var o = {
valueOf: function() {
return this;
},
toString: function() {
return '5';
}
}; console.log(o.valueOf() === o); // true
现在我们稍加修改,就可以看出在类型转换过程中,到底发生了什么:
var o = {}; Object.prototype.valueOf = function() { console.log('valueOf() called'); return [];
}; Object.prototype.toString = function() { console.log('toString() called') return '5';
} var a = +o; // output: valueOf() called
// output: toString() called console.log(a); // 5 var b = o + ''; // output: valueOf() called
// output: toString() called console.log(b); // '5'
上面的代码中,我们改为修改原型方法valueOf()和toString(),分别在方法内部添加了控制台输出语句,另外,在valueOf()内部我们返回了一个数组对象。在对象参与运算时可以看到,两个方法依次被调用,不管是数字环境还是字符串环境,都先调用了valueOf()方法,由于返回值不是基础类型,所以还需再调用toString()方法,得到一个最终的返回值,然后将其转为目标类型。如果我们将valueOf()中的数组返回值替换为一个基础类型,toString()方法将不会有机会执行,大家可以亲自试一下。
上面也提到,对象原型的valueOf()方法默认是返回对象自身的,实际上,常见对象类型的valueOf()方法都会返回其自身:
var o = {}; var fn = function(){}; var ary = []; var regex = /./; o.valueOf() === o; // true fn.valueOf() === fn; // true ary.valueOf() === ary; // true regex.valueOf() === regex; // true
不过有个特殊的例外,Date类型的valueOf()会返回一个毫秒数:
var date = new Date(2017, 1, 1); var time = date.valueOf(); console.log(time); // 1485878400000 console.log(time === date.getTime()); // true
所以我们就会很容易明白,在Date实例上应用一元加号操作符,是如何返回一个数字的:
var date = new Date(2017, 1, 1); var time = +date; console.log(time); // 1485878400000
不过Date真是个神奇的物种,如果我们直接跟拿它和一个时间毫秒数相加,并不会得到期望的结果:
var date = new Date(2017, 1, 1); var time = date + 10000; console.log(time); // 'Wed Feb 01 2017 00:00:00 GMT+0800 (CST)10000'
它竟然转为了字符串,然后与数字进行了字符串连接操作!为什么会是这样的呢?原因在于,对于一元加号操作符运算,目的很明确,就是求正操作,因此引擎调用了其valueOf()方法,返回时间戳数字,而对于后者的二元加号加号操作运算,其存在加法和连接符这样的二义性,所以引擎可以有选择地将操作数转为不同的目标类型,与其他对象不同的是,Date类型更倾向于转为字符串类型,所以toString()会被先行调用。下面这段话是ECMA规范中关于Date类型转为基础类型的描述:
大概的意思就是,对象在转为基础类型时,通常都会调用toPrimitive(hint)这样的方法,传入一个提示参数,指定其目标类型,如果不指定,其他对象的默认值都是number,而Date类型与众不同,它的默认值是string。
我们上面也提到了,一元加号操作符是求正运算,所以引擎能够识别并为其指定number目标类型,而二元加号操作符存在二义性,引擎使用了default作为提示参数,Date类型将默认值认为是string,所以我们也理解了上面的例子,即使是Date对象和数字相加,它也不会先调用valueOf()方法得到数字,而是先调用toString()得到一个字符串。
上面讲解了这么多,相信大家对于对象类型的转型规则都熟悉了,那么对于常见的对象,究竟是如何转为基础类型的呢?举个例子:
var foo = +[]; // 0 ( [] -> '' -> 0 ) var foo = +[3]; // 3 ( [3] -> '3' -> 3 ) var foo = +[3, 5]; // NaN ( [3, 5] -> '3,5' -> NaN )
从上面的代码可以看出,对于数组对象来说,要转为数字,就要遵循对象类型的转型规则,因为数组原型的valueOf()方法会返回其自身引用,所以最终会再试图调用其toString()方法,而它的toString()会返回一个字符串,这个字符串是由逗号分隔的数组元素集,那很容易理解了,对于空数组,必然返回一个空字符串,然后这个空字符串转型为数字之后就会变为0,而对于非空数组,如果只有一个元素并且元素可以转为数字,则结果第一个元素对应的数字,如果又多个元素,因为toString()返回的结果中存在逗号,所以无法转型成功,会返回一个NaN。
但如果我们尝试数组和一个数字相加,则还是会得到一个字符串的结果:
var foo = [] + 3; // '3' var foo = [3] + 3; // '33' var foo = [3, 5] + 3; // '3,53'
你也许会说,这不是很像上面的Date类型吗?是的,结果看上去很相似,但其内部的执行过程还是有差异的,它的valueOf()会先执行,出现上面的结果,是由于valueOf()返回了this,然后再次调用toString()返回了字符串,加号操作符在这里成了字符串连接符了。
类似的还有字面量对象,看下面例子:
var foo = {} + 0; // '[object Object]0' var foo = {} + []; // '[object Object]' var foo = {} + {}; // '[object Object][object Object]'
不过如果是在命令行直接输入下面表达式,结果会有所出入:
{} + 0; // 0 {} + []; // 0 {} + {}; // NaN
其原因是,前面的字面量对象被解释成了代码块,没有参与运算,只有后面的一部分会返回最终的结果,后面的转换过程可以参照以上我们讲解的内容。
对象的类型转换规则,就先讲到这里,下面来讲一下比较操作符中的类型转换。
比较操作符有以下几种:>, >=, <, <=, ==, ===。除了最后的全等操作符以外,其他几个在比较不同类型的数据时,均存在值的类型转换。
对于前四种来说,都遵循着以下规则:
1). 当两个操作数都为字符串类型时,不进行数据类型转换,直接比较每个字符
2). 当两个操作数不同时为字符串时,将操作数转为数字类型,然后进行比较
3). 如果操作数中存在对象类型,先将对象转为基础类型,然后再根据上面两条进行值的比较。
而对于“==”操作符,则是多了一条特殊的规则:null和undefined在比较时不进行数据转换,null和自身比较、null和undefined比较都会返回true,和其他值比较都会返回false;undefined和自身比较、undefined和null比较都会返回true,和其他值比较都会返回false。
以下比较操作不存在数据类型转换:
'a3' < 'b3'; // true null == undefined; // true null == 0; // false
需要注意的是最后一个表达式,由于我们在上一篇文章中讲到,null值在数字环境下会转型为0,很多人觉得这个表达式结果为true,但是不要忽略了上面关于null和undefined的规则,这里是不会有类型转换发生的。
在下面几个表达式中,操作数不全为字符串,所以要将操作数转为数字后再进行比较:
3 == '3'; // true 3 < '5'; // true 0 == '0'; // true 0 == ''; // true 0 == false; // true 1 <= true; // true null >= 0; // true
注意,最后一个表达式中的null,在遇到>、>=、<、<=这几个操作符时会被转为数字0的,这与上面的规则有所不同。
最后,对象在参与逻辑运算时,同样会遵循前面的转型规则:
var o = {
toString: function() {
return '3';
},
valueOf: function() {
return '5';
}
} o > 4; // true
特别注意的是,前面我们介绍到,对象在条件语句中是视为true的,但要避免下面这样的比较:
if ([]) {
// todo
} if ([] == true) {
// todo
}
第二个条件语句块是不会执行的,原因在于空的数组对象被转为数字0了,而true被转为数字1,比较结果为false,所以里面的代码永远无法得到执行,开发时要警惕这样的写法。
写了这么多关于自动类型转换的内容,大家也可以体会到JS有多么的灵活,想要驾驭好这门语言,不是件容易的事,还需细细体会,好好研究才行。
本文完。