js中的隐式类型转换有哪些

在前端js这门动态弱类型语言中，不仅存在着显示类型转换，还存在许多隐式类型转换，让人头大。为了减少小伙伴们的踩坑，今天总结了一些常见的隐式类型转换规则，让我们来看看有哪些。

一、隐式类型转换条件有哪些

• 逻辑运算符：&&、||、！
• 运算符：+、-、*、/
• 关系操作符：>、<、<=、>=
• 相等运行算符：==
• if / while 条件

二、== 的隐式类型转换

• 类型相同，则无需进行类型转换。
• 如果其中一个操作数是 null 或者 undefined ，那么另一个操作数必须是 null 或者 undefined 才会返回 true ，否则返回 false 。
• 如果其中一个操作数是 Symbol ，那么返回 false。
• 如果两个操作数都为 string 和 number 类型，那就就将字符串转换为 number。
• 如果一个操作数是 boolean 类型，那么转换成 number。
• 如果一个操作数为 object ，且另一方为 string、number、或者 Symbol ，就会把object 转换为原始类型再进行判断。

测试：

null == undefined;  // true
null == 0;  		// false
'' == null;  		// false
'' == 0;  			// true
'123' == 123;  		// true
0 == false;  		// true
1 == true;  		// true

var a = {
	value: 0,
	valueOf: function(){
		this.value++;
		return this.value;
	}
}
console.log(a==1 && a==2 && a==3);  // true
// 对象隐式转换为原始类型，调用对象的valueOf方法返回值，此对象的valueOf()返回一个自定义自增方法，每调用一次增加1，最后结果为3.
// a==1时，a.valueOf()返回1，所以1==1为true，此时a.value==1；
// a==2时，a.valueOf()返回2，所以2==2为true，此时a.value==2；
// a==3时，a.valueOf()返回3，所以3==3为true，此时a.value==3；

// 这时，如果再判断a==1&&a==2&&a==3，则返回false，因为此时的a已经为4了
console.log(a==1 && a==2 && a==3);  // false

三、+ 的隐式类型转换

+号操作符，不仅可以用作数字相加，还可以用作字符串拼接。

• 如果其中一个操作数是 string，另外一个操作数是 undefined、null 或者 boolean，则调用 toString() 方法进行字符串拼接。
• 如果是纯对象、数组、正则等，则默认调用对象的转换方法，会存在优先级，然后再进行拼接。
• 如果其中有一个是 number ，另外一个是 undefined、null、boolean、number，则会将其转换为数字进行加法运算，对象的情况参考上一条规则。
• 如果其中一个是 string ，一个是 number，则按照字符串规则进行拼接。

测试：

1 + 2;      // 3
'1' + '2';  // '12' 
'1' + 3;    // '13' 字符串拼接

'1' + undefined;  // '1undefined'
'1' + null;       // '1null'
'1' + true;       // '1true'
'1' + 1n;         // '11' 字符串和BigInt相加，BigInt转换为字符串

1 + undefined;  // NaN  undefined转换为NaN
1 + null;       // 1  null转换为0
1 + true;       // 2  true转换为1
1 + 1n;         // TypeError: Cannot mix BigInt and other types, use explicit conversion "无法混合BigInt和其他类型，请使用显式转换"

四、object 的隐式类型转换

1. 如果部署了 [Symbol.toPrimitive] 方法，优先调用再返回；
2. 若不存在 [Symbol.toPrimitive] 方法，则调用 valueOf 方法，如果返回基础数据类型，则执行结束；
3. 否则调用 toString 方法，如果转换为基础数据类型，则返回；
4. 最后，如果都没有返回基础数据类型，则报错。

测试：

var obj = {
	value: 1,
	valueOf(){
		console.log('valueOf', 2);
		return 2;
	},
	toString(){
		console.log('toString', 3);
		return 3;
	},
	[Symbol.toPrimitive](){
		console.log('[Symbol.toPrimitive]', 4);
		return 4;
	}
}
console.log(obj + 1);  // 5
// 调用[Symbol.toPrimitive]方法，获取返回值4，4+1=5

10 + {};  // '10[object Object]'
// {}调用valueOf方法返回自身，然后继续调用toString方法返回字符串'[object Object]'，10与其相加得 '10[object Object]'

[1, 2, undefined, 4, 5] + 10;  // '1,2,,4,510'
// 数组调用valueOf方法返回数组本身，然后调用toString方法转换为字符串'1,2,,4,5'，与10相加得 '1,2,,4,510'

1、探讨 object 的隐式转换执行顺序

1、有 [Symbol.toPrimitive] 方法，执行方法后获取原始值返回，执行结束；若返回不是原始值则报错。

var obj = {
	value: 1,
	valueOf(){
		console.log('valueOf', 2);
		return 2;
	},
	toString(){
		console.log('toString', 3);
		return 3;
	},
	[Symbol.toPrimitive](){
		console.log('[Symbol.toPrimitive]', 4);
		return 4;
	}
}
console.log(obj + 1);  // 5

2、valueOf方法返回值不为原始值时，则继续寻找toString方法执行，获取返回值，执行结束。

var obj = {
	value: 1,
	valueOf(){
		console.log('valueOf', 2);
		return {};
	},
	toString(){
		console.log('toString', 3);
		return 3;
	},
}
console.log(obj + 1);  // 4

3、若valueOf方法返回值为原始值时，执行结束。

var obj = {
	value: 1,
	valueOf(){
		console.log('valueOf', 2);
		return 2;
	},
	toString(){
		console.log('toString', 3);
		return 3;
	}
}
console.log(obj + 1);  // 3

4、若无 Symbol.toPrimitive 方法，并且最终获取不到原始值时，报错。

var obj = {
	value: 1,
	valueOf(){
		console.log('valueOf {}');
		return {};
	},
	toString(){
		console.log('toString {}');
		return {};
	}
}
console.log(obj + 1);  // ncaught TypeError: Cannot convert object to primitive value

2、探讨 Symbol.toPrimitive 属性如何将对象转换为原始值

Symbol.toPrimitive 指将被调用的指定函数值的属性转换为相对应的原始值。

在 Symbol.toPrimitive属性(用作函数值)的帮助下，一个对象可被转换为原始值。该函数由字符串参数 hint 调用，目的是指定原始值转换结果的首选类型。 hint 参数可以是"number"、“string” 和 “default” 中的一种。

// An object without Symbol.toPrimitive property. 对象中不存在Symbol.toPrimitive属性
var obj1 = {};
console.log(+obj1);     // NaN
console.log(`${obj1}`); // "[object Object]"
console.log(obj1 + ''); // "[object Object]"

// An object with Symbol.toPrimitive property. 对象中存在Symbol.toPrimitive属性
var obj2 = {
  [Symbol.toPrimitive](hint) {
    if (hint == 'number') {
      return 10;
    }
    if (hint == 'string') {
      return 'hello';
    }
    return true;
  }
};
console.log(+obj2);     // 10        -- hint is "number"
console.log(`${obj2}`); // "hello"   -- hint is "string"
console.log(obj2 + ''); // "true"    -- hint is "default"

超强测试题：

{} + '';   // 0   
// 代码执行顺序为从左到右，此处的{}被认为是代码块而非对象，所以不进行类型转换，仅剩余 +'' 被转换number类型

+{} + '';  // 'NaN'  
// 此处先执行+{}，转换为number类型NaN，与空字符串相加得'NaN'

'' + {};   // '[object Object]'  
// 此处的+号前面空字符串为string类型，按照代码执行顺序以及字符串拼接规则，
// 需将{}转换为string类型与其相加，调用toString方法获得'[object Object]'