JavaScript类型转换之`[] == ![]`的原理与实践

1. 显示类型转换
2. 隐式类型转换
• 对象转 number
• 对象转 String
• 运算符中的转换
3. 特殊方法：toString()
• 对象的toString()
• 数组的 toString()
• 其它的 toString()
• Array.isArray()的特异性
4. 一元与二元运算符
5. == 与 === 的区别
6. 解析 [] == ![]

JavaScript 的类型转换是一项重要而且影响程序行为的核心机制。它涉及到显式和隐式两种方式的类型转换，对比较运算和函数调用等多个方面产生了深远的影响。本文将深入探讨 JavaScript 中的类型转换规则，特别关注显式和隐式转换之间的差异，并对一个经典例子进行剖析：[] == ![]的结果及其背后的原理。

显示类型转换

显示类型转换，即程序员明确指定的类型转换，主要包括三种基本转换方式：

1. 转布尔值：Boolean(x)，用于显式将任意值转换为布尔值，遵循 JavaScript 的真值规则。

let s='s'
let n=123
let f=false
let u=undefined
let nu=null
console.log(Boolean(s));//true
console.log(Boolean(n));//true
console.log(Boolean(Infinity));//true
console.log(Boolean(-Infinity));//true
console.log(Boolean(''));//false
console.log(Boolean(0));//false
console.log(Boolean(-1));//true
console.log(Boolean(NaN));//false
console.log(Boolean(undefined));//false
console.log(Boolean(null));//false
console.log(Boolean(false)); // false
console.log(Boolean());//false

2. 转数字：Number(x)，将值转换为数字，无法直接转换的值（如对象、非数字字符串）将转换为NaN。

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

3. 转字符串：String(x)，将任何值转换为字符串形式。

let num = 123;
let numStr = String(num);
console.log(numStr); // 输出 "123"

隐式类型转换

隐式类型转换通常发生在运算符或函数自动将值转换为所需类型时。

对象转 number

先调用ToNumber(x)，该函数中会再调用ToPrimitive(x,Number)将对象转为原始值，ToPrimitive(x,Number)会返回一个原始类型。

ToPrimitive(object,Number)的原理：

1. 判断接收到的值是不是原始类型，是，则返回；
2. 否则，调用valueOf(),如果得到了原始值，则返回；
3. 否则，调用toString()方法，如果得到了原始值，则返回；
4. 否则，报错。

console.log(Number([]));//输出 0
// Number([])
//1. ToPrimitive()
//2. let primValue=ToPrimitive([], Number)//''
//3. Number('')

为何输出 0？

• Array转Number类型时，先调用ToNumber([])，该函数中会再调用ToPrimitive([],Number)。
• 在ToPrimitive([],Number)中，首先会判断它是否为原始类型，[]不是原始类型，则调用valueOf()，发现也得不到原始值。那么这时候就会进行调用toString()，将[]转换成了''，ToPrimitive([],Number)便完成任务。
• 最后Number()对ToPrimitive([],Number)的返回值进行转换，即Number('')值为 0。

对象转 String

先调用ToString(x)，该函数中会再调用ToPrimitive(x,String)将对象转为原始值

ToPrimitive(object,String)：

1. 判断接收到的值是不是原始类型，是，则返回；
2. 否则，调用toString(),如果得到了原始值，则返回；
3. 否则，调用valueOf()方法，如果得到了原始值，则返回；
4. 否则，报错。

console.log(String({}));
//ToString({})
//let primValue=ToPrimitive({}, String)//"[object Object]"
//String("[object Object]")//"[object Object]"

为何输出”[object Object]”？

• Object转String类型时，先调用ToNumber({})，该函数中会再调用ToPrimitive([],String)。
• 在ToPrimitive({},Number)中，首先会判断它是否为原始类型，{}不是原始类型，则调用toString()，Object有自己的toString()方法，得到"[object Object]"，ToPrimitive([],Number)便完成任务。
• 最后String()对ToPrimitive({},String)的返回值进行转换，即String("[object Object]")值为"[object Object]"。

布尔值转换任何对象在需要转换为布尔值时，隐式转换结果总是true。

运算符中的转换

如加法运算符+，在操作数不同时会尝试将非数字转换为数字；而比较运算符如==，则会根据两边的类型进行复杂的类型转换以进行比较。

特殊方法：toString()

toString()方法在不同类型的对象上有着不同的表现。

对象的toString()

Object.prototype.toString(x)：

1. 如果toString接收的值是undefined，则返回“[object Undefined]”
2. 如果toString接收的值是null，则返回“[object Null]”
3. 调用ToObject(x)将 x 转为对象，此时得到的对象内部一定拥有一个属性[[Class]]，而该属性[[Class]]的值就是 x 的类型
4. 设 class 是[[Class]]的值
5. 返回由”[object “和 class 和”]”连接而成的字符串

let a={}
let b=[]
let c='hello'

console.log(Object.prototype.toString(a));//[object Object]
console.log(Object.prototype.toString.call(b)); //[object Array]
console.log(Object.prototype.toString.call(c));//[object String]

为何b和c使用Object.prototype.toString()时为何同时使用了call()？

直接调用数组和字符串实例的toString方法可能会受到对象原型上toString方法被覆盖的影响。而使用Object.prototype.toString.call()确保了调用的是最原始、未被修改的toString方法，提高了代码的稳定性和可靠性。

数组的 toString()

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

数组的toString()方法是一个非常实用且内置的功能，它能够将数组中的所有元素转换成字符串形式，并用逗号,连接这些字符串，最后返回一个由这些字符串组成的单个字符串。这个过程简单直观，非常适合于需要将数组内容以易于阅读的文本格式展示的场景。

其它的 toString()

//Number
let num = 123;
console.log(num.toString()); // 输出 "123"

//String
let str = "Hello";
console.log(str.toString()); // 输出 "Hello"

//Boolean
console.log(true.toString()); // 输出 "true"
console.log(false.toString()); // 输出 "false"

//函数 function
let func = function() { return "Hello"; };
console.log(func.toString()); // 输出 "function (){ return "Hello"; }"

直接将值修改成字符串字面量。

Array.isArray()的特异性

对于数组这种特定的引用类型，JavaScript ES5 引入了Array.isArray()方法，它专门用于判断一个值是否为数组。虽然功能单一，但它提供了一种直接且明确的方式来识别数组，避免了使用更通用的instanceof或Object.prototype.toString()所带来的潜在复杂性。

一元与二元运算符

console.log(+[])//输出 0

一元操作符+ 作为正号使用时，会对操作数进行隐式转换为数字。

console.log(1+'1');//'11'
console.log(1+[]);//1+''
console.log(1+{});//1+'[object Object],'输出'1[object Object]'
console.log({}+[]);//'[object Object]'+'',输出'[object Object]'

二元运算符+ 在字符串与非字符串相加时，会将非字符串转换为字符串；在数字与非数字相加时，会将非数字转换为数字。

== 与 === 的区别

• == 进行宽松相等比较，会根据两边的类型进行必要的隐式类型转换，可能导致意料之外的结果。
• === 进行严格相等比较，不仅比较值，还比较类型，不进行类型转换，是推荐使用的比较方式。

解析 [] == ![]

现在，让我们深入分析[] == ![]这一看似诡异的表达式。首先，解析步骤如下：

1. ![]：空数组[]在布尔上下文中隐式转换为true，取反后变为false。
2. 然后进行比较[] == false。在此比较中，由于一方是对象，另一方是布尔值，根据==的规则，两边都会被转换为数字进行比较：
   • 根据上文Number([])隐式类型转换示例，得出为 0
   • false转换为数字是0。
3. 因此，[]与false在转换后都等于0，根据==规则，最终结果为true。

通过这个例子，我们不仅理解了 JavaScript 中的类型转换机制，还见识到了隐式类型转换在某些情况下可能导致的非直观结果。在实际编码中，推荐使用===进行严格比较，以减少因类型转换带来的潜在错误。

以上就是 JavaScript 类型转换之`[] == ![]`的原理与实践的详细内容，更多请关注www.mimiwuqi.com的其它相关文章！