JS：类型转换（二）从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ？

前言

JavaScript中类型转换是一个很令人头疼的问题，特别是对于初学者来说。这是由于 JavaScript 是一种弱类型语言，它在运行时会尝试自动转换数据类型，以使表达式能够执行。这种灵活性使得 JavaScript 非常强大，但也容易引发一些不直观的行为。就比如当字符串与数字相加时，例如"3" + 2，JavaScript 将数字 2 隐式转换为字符串，而不是执行数学运算。今天我们就来聊聊JS中的类型转换规则，并且带你解决经典面试问题[ ] == ![ ] ？。

基本数据类型转对象类型

我们使用Object()方法将基本数据类型强制转化为对象类型

数字和字符串类型转对象类型

console.log(Object(123)); // Number {123}
console.log(Object('123'); // String {'123'}

我们可以先在Chrome浏览器中查看一下输出结果：

我们可以看到，它们转为了对应的包装类对象。对包装类对象不太了解的小伙伴们可以看看我以前的文章： 给原始数据类型加属性和方法为什么不会报错？包装类------阿里面试题

布尔类型转对象类型

console.log(Object(true))

Undefined 和 Null 转为为对象类型

console.log(Object(undefined)); // 输出 {}
console.log(Object(null)); // 输出 {}

Object 方法在接收 null 或 undefined 作为参数时，会返回一个空对象 {}。这是因为 null 和 undefined 是特殊的原始值，没有对应的包装对象。如果要将他们转为对象的话，对其使用Object 方法会将它们转换为一个空对象。

聊完了原始数据类型的类型转换，我们来聊聊对象数据类型转化为原始数据类型，相比于原始数据类型之前的互相转换，对象数据类型转换为原始数据类型是有点复杂的，我们首先需要知道两个方法valueof（） 和 toString() 。

Valueof（）

在JavaScript中，valueOf() 方法常常与包装对象（Wrapper Objects）一起使用，返回对象的原始值。包装类对象是指由基本数据类型创建的对象形式，它们分别是 Number、String 和 Boolean 对象。这些对象允许你在基本数据类型上调用对象方法和访问属性。

1. Number 对象：

   • 用于包装数字（整数或浮点数）的对象。
   • 允许你在数字上调用对象方法。
   • 创建方式：new Number(66)。

2. String 对象：

   • 用于包装字符串的对象。
   • 允许你在字符串上调用对象方法。
   • 创建方式：new String("Hello")。

3. Boolean 对象：

   • 用于包装布尔值的对象。
   • 允许你在布尔值上调用对象方法。
   • 创建方式：new Boolean(true)。

这些包装类对象通常是通过构造函数创建的

• 对于 Number 对象：

  let numObj = new Number(42);
  let primitiveValue = numObj.valueOf();  // 42

  valueOf() 返回 Number 对象的原始值，这里是数字 42。

• 对于 String 对象：

  let strObj = new String("Hello");
  let primitiveValue = strObj.valueOf();  // "Hello"

  valueOf() 返回 String 对象的原始值，这里是字符串 "Hello"。

• 对于 Boolean 对象：

  let boolObj = new Boolean(true);
  let primitiveValue = boolObj.valueOf();  // true

toString()

toString() 方法是 JavaScript 中的一个内置方法，它用于将一个对象转换为字符串。它是对象构造函数原型上的一个方法:Object.prototype.toString()，几乎所有的对象都继承自 Object，而 Object 对象中的 toString() 方法是一个通用的方法，因此几乎所有的对象都可以调用这个方法。但是不同的数据类型调用此方法时，得到的效果也不同：

1. { }.toString() 返回由 "[object" 和 class 和 "]" 组成的字符串

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

3. xx.toString() 直接返回字符串字面量

我们举几个例子来帮助我们了解一下：

1. 对象调用 toString() 方法：

   var obj = { key: "value" };
   var objAsString = obj.toString();
   console.log(objAsString);  // "[object Object]"

   默认情况下，对象的 toString() 方法返回 "[object Object]"。

2. 数组调用 toString() 方法：

   var arr = [1, 2, 3];
   var arrAsString = arr.toString();
   console.log(arrAsString);  // "1,2,3"

   数组的 toString() 方法将数组元素以逗号分隔的字符串形式返回。

3. 字符串调用 toString() 方法：

   var str = "Hello";
   var strAsString = str.toString();
   console.log(strAsString);  // "Hello"

   对于字符串，toString() 方法返回字符串本身。

4. 数字调用 toString() 方法：

   var num = 42;
   var numAsString = num.toString();
   console.log(numAsString);  // "42"

   对于数字，toString() 方法将数字转换为字符串。

5. 布尔值调用 toString() 方法：

   var boolValue = true;
   var boolAsString = boolValue.toString();
   console.log(boolAsString);  // "true"

   对于布尔值，toString() 方法将布尔值转换为字符串形式。

总结

toSring（）

• 转字符串 调用的其实就是 Object.prototype.toString()

1. {}.toString() 返回由 "[object" 和 class 和 "]" 组成的字符串
2. [].toString() 返回由数组内部元素以逗号拼接的字符串
3. xx.toString() 直接返回字符串字面量

valueof（）

用于转换包装类