深入理解JavaScript隐式类型转换机制

JavaScript数据类型概述

JavaScript的数据类型主要分为六类：null、undefined、boolean、string、number和object。

其中，object属于引用类型，其余五种为基本类型（或称原始类型）。可以通过typeof方法判断变量所属的具体类型。当不同类型的变量进行比较时，JavaScript会执行类型转换，这一过程通常被称为隐式转换。这种转换常见于加减乘除、等于（==）以及大小比较（大于、小于）等运算符操作中。

typeof '11' //string 
typeof(11) 　//number
'11' < 4 //false

基本类型的隐式转换

一、基本类型的转换规则

首先分析算术运算符（加、减、乘、除）中的转换行为。

1. 字符串与数字相加时，数字会被转换为字符串，然后进行字符串拼接。

2. 数字减去字符串时，字符串会被转换为数字。如果字符串包含非纯数字字符，转换结果将为NaN（非数字）。字符串减去数字的情况同理。若两个字符串相减，它们会先被转换为数字再执行减法。

3. 乘法、除法、大于和小于运算符遵循与减法相同的转换逻辑。

//隐式转换 + - * == / 
// + 
10 + '20' //'2010'
// -
10 - '20' //-10
10 - 'one' //NaN
10 - '100a' //NaN
// *
10*'20' //200
'10'*'20' //200
// /
20/'10' //2
'20'/'10' //2
'20'/'one'　 //NaN

4. 加法运算的结合顺序对结果有显著影响。

混合表达式可能因JavaScript的操作顺序敏感性而产生困惑。例如，表达式：1+2+"3"; //"33"

由于加法运算遵循左结合律（自左向右计算），上述表达式等同于：(1+2)+"3"; //"33"

相反，表达式：1+"2"+3; //"123"的计算结果为字符串“123”。左结合律意味着左侧的加法运算优先执行，其结果再与后续元素进行运算。

5. 接下来分析相等运算符（==）的行为。

1). undefined与null相等。

2). 字符串与数字比较时，字符串会被转换为数字。

3). 数字与布尔值比较时，布尔值会被转换为数字。

4). 字符串与布尔值比较时，两者都会被转换为数字。

// ==
undefined == null; //true
'0' == 0; 　　 //true,字符串转数字
0 == false; //true,布尔转数字
'0' == false; 　　　//true,两者转数字
null == false; 　 //false
undefined == false; 　//false

存在7个falsy值：false、0、-0、空字符串“”、NaN、null以及undefined，其余所有值均为truthy。

NaN的特殊性与检测

6、关于NaN（Not a Number）的特殊性

NaN是一个特殊数值，表示某些算术运算（如求负数的平方根）的结果不是有效数字。parseInt()和parseFloat()在无法解析指定字符串时会返回此值。对于常规情况下应返回有效数字的函数，也可采用Number.NaN来指示错误情况。

Math.sqrt(-2)
Math.log(-1)
0/0
parseFloat('foo')

对于许多JavaScript初学者而言，第一个陷阱在于typeof运算符返回的结果往往出乎意料：

console.log(typeof NaN); // 'Number'

在这种情况下，NaN并不意味着它不是一个数字，实际上它的类型是number。理解这一点很重要： 因为typeof返回的是字符串，共有六种：“number”、”string”、”boolean”、”object”、”function”、”undefined”

保持冷静，因为下面还有更多复杂情况。让我们比较两个NaN：

var x = Math.sqrt(-2);
var y = Math.log(-1);
console.log(x == y); // false

这是否因为没有使用严格相等（===）操作？显然不是原因。

var x = Math.sqrt(-2);
var y = Math.log(-1);
console.log(x === y); // false

直接比较两个NaN呢？

console.log(NaN === NaN); // false

由于存在多种表示非数字的方式，一个NaN不会等于另一个NaN，这在逻辑上是合理的。

当然，解决方案已经存在。让我们认识一下全局函数isNaN：

console.log(isNaN(NaN)); // true

然而，isNaN()函数也存在许多缺陷：

console.log(isNaN('hello')); // true
console.log(isNaN(['x'])); // true
console.log(isNaN({})); // true

这导致了多种不同的解决方案。其中一种方案利用了NaN的非自反性质（例如，参考Kit Cambridge的笔记）。

var My = {
 isNaN: function (x) { return x !== x; }
}

幸运的是，在即将到来的ECMAScript 6标准中，引入了Number.isNaN()方法，提供可靠的NaN检测。 换句话说，只有当参数是真正的NaN时，该方法才会返回true。

console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(Math.sqrt(-2))); // true
console.log(Number.isNaN('hello')); // false
console.log(Number.isNaN(['x'])); // false
console.log(Number.isNaN({})); // false

引用类型的转换规则

二、引用类型的转换规则

基本类型之间的比较相对简单。而引用类型与基本类型的比较则较为复杂，需要先将引用类型转换为基本类型，再按上述规则进行比较。

1. 所有引用类型转换为布尔值时均为true。

例如空数组，只要是对象即为引用类型，因此[]转换为布尔值为true。引用类型转换为数字或字符串时，需调用valueOf()或toString()方法。对象本身继承自valueOf()和toString()，用户也可以自定义这两个方法。不同类型的对象在调用继承的valueOf()时，可能转换为字符串、数字或对象本身；而调用toString()则一定转换为字符串。一般对象默认调用valueOf()。

1). 当对象转换为数字时，调用valueOf()；

2). 当对象转换为字符串时，调用toString()；

先看看下面的例子：

0 == []; // true, 0 == [].valueOf(); ---> 0 == 0;
'0' == []; // false, '0' == [].toString(); ---> '0' == '';
2 == ['2']; // true, 2 == ['2'].valueOf(); ---> 2 == '2' ---> 2 == 2;
'2' == [2]; // true, '2' == [2].toString(); ---> '2' =='2';

[] == ![]; //true, [].valueOf() == !Boolean([]) -> 0 == false ---> 0 == 0;

当对象转换为数字时，调用valueOf()，在此之前会先调用toString()；因此我推测valueOf方法可能类似如下实现。So上面的例子 0 == []要改成下面更合理。无论如何，[]最后是转成0的。

var valueOf = function (){
 var str = this.toString(); //先调用toString(),转成字符串
 //...
}
0 == []; // true, 0 == [].valueOf(); -> 0 == '0' -> 0 == 0;

自定义的valueOf()和toString();

• 当自定义的valueOf()和toString()同时存在时，默认调用valueOf();
• 如果仅存在toString(),则调用toString();

var a = [1];

a.valueOf = function (){ return 1;}
a.toString = function (){ return '1';}

a + 1; // 2, valueOf()先调用

如果移除valueOf()就会调用toString()。

var a = [1];

a.valueOf = function (){ return 1;}
a.toString = function (){ return '1';}

a + 1; // 2, 先调用valueOf()
//去掉valueOf
delete a.valueOf;
a + 1; // '11', 调用toString()

如果返回值是其他类型会怎么样呢？

var a = [1];

a.valueOf = function (){return ;}
a.toString = function (){return 1 ;};

1 - a; //NaN

其他对象调用valueOf()会转换为不同类型：

var a = {};
a.valueOf(); //Object {}
var a = [];
a.valueOf(); //[] 自己本身
var a = new Date();
a.valueOf(); //1423812036234 数字
var a = new RegExp();
a.valueOf(); // /(?:)/ 正则对象

引用类型之间的比较是内存地址的比较，不需要进行隐式转换，这里不再赘述。

[] == [] //false 地址不一样

var a = []; b = a; b == a //true

显式转换方法

2.显式转换方法

显式转换相对简单，可以直接使用类作为方法进行转换。

Number([]); //0 String([]); //” Boolean([]); //true

还有更简单的转换技巧。

3 + ” // 字符串'3' +'3' // 数字3 !!'3' // true

以上就是本文的全部内容，详细介绍了javascript的隐式强制转换，希望对大家的学习有所帮助。