深入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抽象操作转换为基本值，然后我们只需要记住数字、布尔、字符串比较的隐式转换规则即可

字符串和数字比较，字符串会被转换数字

布尔值和其他类型比较，会被转换成数字