深入js系列-类型(隐式强制转换)
隐式强制转换
在其可控的情况下,减少冗余,让代码更简洁,很多地方都进行了隐式转换,比如常见的三目表达式、if()、for()、while、逻辑运算符 || &&,适当通过语言机制,抽象和隐藏一些细枝末节,有助于提高代码可读性,以三目表示式为例
a? trueAction : falseAction
!!a ? trueAction : falseAction
1.字符串和数字之间的隐式转换
通过重载,+ 运算符即能用于数字加法,也能用于字符串拼接。JavaScript 怎样来判断我们
var a = "42";
var b = "0";
var c = 42;
var d = 0;
a + b; // "420"
c + d; // 42
通常我们的理解是,两个操作数中至少其中之一含有字符串,结果就为字符串,这种解释对了一半,看下面例子
var a = [1,2];
var b = [3,4];
a + b; // "1,23,4" 这里如何解释呢
我们得看一下ES5规范:
根据ES5 规范11.6.1 节,如果某个操作数是字符串或者能够通过以下步骤转换为字符串的话,+ 将进行拼接操作。如果其中一个操作数是对象(包括数组),则首先对其调用ToPrimitive 抽象操作(规范9.1 节),该抽象操作再调用[[DefaultValue]](规范8.12.8
节),以数字作为上下文
简单来说,如果+其中的一个操作数是字符串(或者通过此规范能得到字符串),则进行字符串拼接,否则执行数字加法
1,23,4的过程解析:
数组的valueOf() 操作无法得到简单基本类型值,于是它转而调用toString()。因此上例中的两个数组变成了"1,2" 和"3,4"。+ 将它们拼接后返回"1,23,4"。
这里有一个坑经常被提及
[]+ {} // "[object Object]"
{} + [] // 0
[] + {}
[].toSting()的结果是"" + {} ,这是相当于隐式将{}转换为字符串,由于valueof返回自身,所以转向了toString方法,而一般对象没没有设置toString方法的话,默认是调用Object.prototype.toString,所以最终结果是 "[obejct Obejct]"
{} + []
{} 被认为是一个空白代码块,解析的是 + [],此时 [].valueof返回是数组本身,而不是基本值,转而调用toString,返回了"",然后使用Number("")转换成数字,最后结果是0
这里有一个需要注意的地方 a+""和String(a)区别在于,a+ ""会根据ToPrimitive抽象操作规则,a+ ""会对a调用valueOf方法,然后通过ToString抽象操作将返回值转换为字符串,而String(a)则是直接调用ToString
var a = {
valueOf: function() { return 42; },
toString: function() { return 4; }
};
a + ""; // "42"
String( a ); // "4"
目前ES6对ToPrimitive抽象操作在Symbol上定义了一个名为Symbol.toPrimitive变量来供我们改写ToPrimitive行为,看下面例子
// hint表示js引擎获取到的操作偏好
let obj = {
[Symbol.toPrimitive](hint) {
if(hint === 'number'){
console.log('Number场景');
return 123;
}
if(hint === 'string'){
console.log('String场景');
return 'str';
}
if(hint === 'default'){
console.log('Default 场景');
return 'default';
}
}
}
console.log(2*obj); // Number场景 246
console.log(3+obj); // String场景 3default
console.log(obj + ""); // Default场景 default
console.log(String(obj)); //String场景 str
目前内置对象对Symbol.ToPrimitive使用,比如Date对象
var a = [1, 2, 3]
a.valueOf = function () {
return 'hello'
}
a.valueOf() // "hello"
a.toString() // "1,2,3"
'' + a // "hello"
var date = new Date()
date.valueOf() // 1536416960724
date.toString() // "Sat Sep 08 2018 22:29:20 GMT+0800 (中国标准时间)"
'' + date // "Sat Sep 08 2018 22:29:20 GMT+0800 (中国标准时间)"
这里date.valueOf能够获取基本值,但是行为被Symbol.ToPrimitive定义为优先返回toString
2.布尔值到数字的隐式强制转换
再将某些复杂的布尔逻辑转换为数字加法的时候,隐式强制转换能派上大用处,当然情况比较少见,特殊情况特殊处理
例如我们需要保证参数中只能有一个为true,
function onlyOne(a,b,c) {
return !!((a && !b && !c) ||
(!a && b && !c) || (!a && !b && c));
}
var a = true;
var b = false;
onlyOne( a, b, b ); // true
onlyOne( b, a, b ); // true
onlyOne( a, b, a ); // false
参数少我们尚可对所有情况进行枚举,但是3个参数就应该开始使得代码的可读性下降,多个参数枚举使得代码会更加难读,还更容易出错
function onlyOne() {
var sum = 0;
for (var i=0; i < arguments.length; i++) {
// 跳过假值,和处理0一样,但是避免了NaN
if (arguments[i]) {
sum += arguments[i];
}
}
return sum == 1;
}
var a = true;
var b = false;
onlyOne( b, a ); // true
onlyOne( b, a, b, b, b ); // true
“异常”的逻辑运算符 && ||,我觉得应该称之为选择器运算符,因为它们是返回操作数之中的其一
var a = 42;
var b = "abc";
var c = null;
a || b; // 42
a && b; // "abc"
c || b; // "abc"
c && b; // null
3.符号的强制转换
ES6允许符号显式转换字符串,而隐式转换会产生错误
var s1 = Symbol( "cool" );
String( s1 ); // "Symbol(cool)"
var s2 = Symbol( "not cool" );
s2 + ""; // TypeError
4.宽松相等和严格相等
4.1== 、=== 的区别,常见的误区是“== 检查值是否相等,=== 检查值和类型是否相等”。听起来蛮有道理,然而
还不够准确。很多JavaScript 的书籍和博客也是这样来解释的,但是很遗憾他们都错了。
正确的解释是:“== 允许在相等比较中进行强制类型转换,而=== 不允许。”
4.2相等比较的性能
如果两个值的类型不同,我们就需要考虑有没有强制类型转换的必要,有就用,没有就
用=,不用在乎性能。
4.3抽象相等,==运算符的行为,这是隐式强制转换最让人诟病的,开发人员认为它们过于晦涩,很难掌握和运用。
规则
两个值类型相同,仅比较它们相等,需要注意非常规的NaN!=NaN以及+0 == -0,对于对象,只判断其引用是否相等,不发生强制类型转换
两个不同类型的值会发生隐式强制转换
4.3.1 字符串和数字之间的相等比较,将字符串转换为数字再进行比较,具体规范如下
(1) 如果Type(x) 是数字,Type(y) 是字符串,则返回x == ToNumber(y) 的结果。
(2) 如果Type(x) 是字符串,Type(y) 是数字,则返回ToNumber(x) == y 的结果。
例子
var a = 42;
var b = "42";
a === b; // false
a == b; // true
4.3.2 其他类型和布尔类型之间的相等比较,将布尔值转换为数字,然后继续比较,这种比较会导致宽松相等会进行多次的隐式类型转换,不要使用 宽松相等来和布尔值比较,它的隐式转换过于晦涩。
(1) 如果Type(x) 是布尔类型,则返回ToNumber(x) == y 的结果;
(2) 如果Type(y) 是布尔类型,则返回x == ToNumber(y) 的结果
例子
var x = true;
var y = "42";
x == y; // false
解析
Type(x) 是布尔值,所以ToNumber(x) 将true 强制类型转换为1,变成1 == "42",二者的类型仍然不同,"42" 根据规则被强制类型转换为42,最后变成1 == 42,结果为false。
5 null和undefined之间的相等比较,在==情况下它们相等
规范
(1) 如果x 为null,y 为undefined,则结果为true。
(2) 如果x 为undefined,y 为null,则结果为true。
6 对象和非对象之间的相等比较,对对象进行ToPrimitive操作然后进行操作
规范
(1) 如果Type(x) 是字符串或数字,Type(y) 是对象,则返回x == ToPrimitive(y) 的结果;
(2) 如果Type(x) 是对象,Type(y) 是字符串或数字,则返回ToPromitive(x) == y 的结果。
例子
var a = 42;
var b = [ 42 ];
a == b; // true
解析
[ 42 ] 首先调用ToPromitive 抽象操作(参见4.2 节),返回"42",变成"42" == 42,然后又变成42 == 42,最后二者相等。
== 中的假值比较
"0" == null; // false
"0" == undefined; // false
"0" == false; // true -- 晕!
"0" == NaN; // false
"0" == 0; // true
"0" == ""; // false
false == null; // false
false == undefined; // false
false == NaN; // false
false == 0; // true -- 晕!
false == ""; // true -- 晕!
false == []; // true -- 晕!
false == {}; // false
"" == null; // false
"" == undefined; // false
"" == NaN; // false
"" == 0; // true -- 晕!
"" == []; // true -- 晕!
"" == {}; // false
0 == null; // false
0 == undefined; // false
0 == NaN; // false
0 == []; // true -- 晕!
0 == {}; // false
应对假值比较的特殊情况
"0" == false; // true -- 晕!
false == 0; // true -- 晕!
false == ""; // true -- 晕!
false == []; // true -- 晕!
// 前面四种我们可以通过不使用== boolean来避免
// 这个比较少用
"" == []; // true -- 晕!
// == "" == 0 我们得特别注意,在有 [] 、0 、"" 我们尽量少使用
"" == 0; // true -- 晕!
0 == []; // true -- 晕!
小结,对于宽松相等,对象会被ToPrimitive抽象操作转换为基本值,然后我们只需要记住数字、布尔、字符串比较的隐式转换规则即可
字符串和数字比较,字符串会被转换数字
布尔值和其他类型比较,会被转换成数字