JavaScript的数据类型

在JavaScript中数据类型可以分为两大类：原始数据类型（Undefined，Null，Boolean，Number，String，Symbol），引用数据类型（object）

JavaScript变量的显式转换

在JavaScript中一个原始值转化为另一个原始值，这个过程通常称之为显式转化。常见的显式转化样例如下：

原始值转布尔

console.log(Boolean(1)); // true
console.log(Boolean(0)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(null)); // false

原始值转数字

console.log(Number("123")) // 123
console.log(Number("123a")) // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number('')); // 0
console.log(Number(' ')); // 0 
console.log(Number(undefined)); // NaN
console.log(Number(null)); // 0

原始值转字符串

console.log(String(1)); //1
console.log(String(true)); // true
console.log(String(false)); // false
console.log(String(undefined)); // undefined
console.log(String(null)); // null
console.log(String(Symbol(1))); // Symbol(1) 
console.log(String(NaN)); // NaN   NaN属于number数据类型

原始值转对象

let a = 1;
console.log(new String(a));
let obja = new String(a);
console.log(obja.valueOf())

JavaScript变量的隐式转化

在JavaScript中当两种不同的变量进行数值运算时，则会发生变量的隐式转化。在进行变量的隐式转化时，JavaScript引擎会在内部执行一套转化规则。

这套转换规则的主要流程如下:

1. ToPrimitive()方法将变量转为原始类型
2. ToString（）方法将变量转为字符串
3. ToNumber（）方法将变量转为数字

ToPrimitive方法

ToPrimitive（obj，type）的工作方式如下：

1. 如果对象已经是一个原始值，则直接返回（比如字符串、数字、布尔值、null 或 undefined）
2. 调用对象的 valueOf 方法，如果该方法返回一个原始值，则返回这个原始值。
3. 调用对象的 toString 方法， 如果对象的 valueOf 方法返回的不是原始值，则调用对象的 toString 方法。如果该方法返回一个原始值，则返回这个原始值。
4. 如果 valueOf 和 toString 方法均不存在或者返回的不是原始值，则抛出 TypeError错误。

很多初学者对于toString和valueOf方法的执行结果可能不是很熟悉，下面我将为大家总结这两种方法的执行过程。

toString和valueOf

toString方法

1. {}.toString() 得到由"[object 和 class ]" 组成的字符串，例如:

1. [].toString() 返回由数组内部元素以逗号拼接的字符串

1. xxx.toString() 返回字符串字面量

valueOf方法

1. 包装类对象 (String Boolean Number) 得到的结果为相应的原始值

let a = 1;
console.log(new String(a));
let obja = new String(a);
console.log(obja.valueOf())

1. Date 返回的则是日期的毫秒

let date = new Date();
console.log(date);
console.log(date.valueOf());

1. 其他对象返回的则是自己

var a = new Array();
a.valueOf() === a; // true

var b = new Object({});
b.valueOf() === b; // true

隐式转化案例

一元运算符 +

如果操作数是一个原始类型（比如字符串、布尔值等），JavaScript会尝试将其转换为数值类型(底层ToNumber方法)。如果操作数已经是一个数值，则不会进行任何转换，直接返回该数值。如果操作数是一个对象，JavaScript会调用对象的 valueOf() 方法来获取其原始值，并尝试将该值转换为数值。

思考1

let a = + "123";
console.log(+"123");
console.log(typeof a);

思考一下以上代码会输出什么结果？？ 答案如下:

当js引擎执行这段代码时，发生隐式类型转化，执行ToNumber方法将字符串"123"转为数字123,所以a的类型为number

思考2

console.log(+[]);

答案如下:

运算过程

1. [].valueOf() === []
2. [].toString() === ''
3. '' ==> 0

二元操作符

当发生形如:v1 + v2的运算时，会执行以下步骤:

1. lprim = ToPrimitive(v1)
2. rprim = ToPrimitive(v2)
3. 如果 lprim 或 rprim 是字符串，那么就ToString(lprim) 或者 ToString(rprim) 再拼接
4. 否则，ToNumber(lprim) + ToNumber(rprim)

思考1

console.log('' + {});

该代码会输出什么内容呢？答案如下:

运算过程

1.ToPrimitive('') ToPrimitive({}) 传入的参数不是原始值，此时执行toString()方法 2. 得到结果: '' ' [object Object] ' 3. 拼接: '' + '[object Object]' = '[object Object]'

思考2

let str = 2 + '5';
console.log(str);
console.log(typeof str);

思考该代码的执行结果。结果如下：

运算过程

1. 2 + '5'
2. lprim = ToPrimitive(2) = 2 rprim = ToPrimitive('5') = '5'
3. ToString(2) + '5'
4. '2' + '5' = "25"

== 运算符

思考

console.log([] == ![])

请你判断这段代码会输出什么? 答案如下:

运算过程

1. 对象转布尔一定为true，则![] == false

2. 证明: [] == false 布尔值false转为数值为0

3. [] == 0

4. ToPrimitive([]) == toString([]) == '' == 0

5. 0 == 0

6. true

总结

在js隐式转化的过程中，不管是转为什么类型，都会调用内置的ToPrimitive方法，最后通过toString和valueOf方法将对象类型转为原始类型。

本篇文章就到此为止啦，希望通过这篇文章能对你了解js类型转化有所帮助，本人水平有限难免会有纰漏，欢迎大家指正。如觉得这篇文章对你有帮助的话，欢迎点赞收藏加关注，感谢支持🌹🌹。