Js 隐式类型转换、JavaScript `==` vs `===` 深度对比表

文章目录

[JavaScript 隐式转换（Implicit Coercion）详解](#JavaScript 隐式转换（Implicit Coercion）详解)
- [1. 底层原理：三大转换规则](#1. 底层原理：三大转换规则)
- - [① ToPrimitive(input, PreferredType)](#① ToPrimitive(input, PreferredType))
  - [② ToNumber](#② ToNumber)
  - [③ ToString](#③ ToString)
  - [④ ToBoolean](#④ ToBoolean)
- [2. 常见运算符的转换逻辑](#2. 常见运算符的转换逻辑)
- - [A. 加号运算符 (+) ------ 最复杂](#A. 加号运算符 (+) —— 最复杂)
  - [B. 减号运算符 (-)](#B. 减号运算符 (-))
  - [C. 关系运算符 (>, <, ==)](#C. 关系运算符 (>, <, ==))
  - [D. 重写对象 valueOf 与 toString方法](#D. 重写对象 valueOf 与 toString方法)
- [3. 常见的"坑"与注意点](#3. 常见的“坑”与注意点)
- [4. 经典面试题解析](#4. 经典面试题解析)
- - [Q1：为什么 [] == ![] 是 true？](#Q1：为什么 [] == ![] 是 true？)
  - [Q2：如何让 a == 1 && a == 2 && a == 3 成立？](#Q2：如何让 a == 1 && a == 2 && a == 3 成立？)
  - Q3：判断输出结果
[JavaScript `==` vs `===` 深度对比表](#JavaScript == vs === 深度对比表)
- [💡 使用场景建议](#💡 使用场景建议)
- [⚠️ 面试核心考点](#⚠️ 面试核心考点)
- - Q1：基础辨析
  - Q2：布尔值的陷阱
  - Q3：对象比较
  - [Q4：最著名的 NaN](#Q4：最著名的 NaN)

JavaScript 隐式转换（Implicit Coercion）详解

在 JavaScript 中，隐式转换是指当运算符两边的数据类型不一致时，编译器会自动将其中一个（或两个）操作数转换为相同类型后再进行计算的现象。它是 JS "弱类型"特征的体现，也是很多 Bug 和面试题的源头。

1. 底层原理：三大转换规则

隐式转换严格遵循 ECMAScript 规范，主要通过四个内部抽象操作完成：

① ToPrimitive(input, PreferredType)

当对象（Object）需要转换为原始值时调用。

规则：根据 PreferredType（期望类型，通常是 Number 或 String）决定调用顺序。
流程：
1. 先找 valueOf()，如果返回 原始值 就结束。
2. 再找 toString()，如果返回原始值就结束。
3. 如果都没返回原始值，则抛出 TypeError。

数组的 valueOf() 到底返回什么？

根据 JS 规范，绝大多数内置对象（包括 Array、Object、Function）的 valueOf() 方法默认都只返回对象本身。

javascript 复制代码

const arr = [1];
console.log(arr.valueOf()); // 输出: [1] (依然是一个数组对象)

关键点： ToPrimitive 要求必须返回一个 原始值 （String, Number, Boolean, undefined, null）。
因为 arr.valueOf() 返回的还是一个对象，所以 JS 引擎认为这次尝试失败了，接着会去调用 toString()。

② ToNumber

undefined -> NaN
null -> 0
true -> 1 / false -> 0
string -> 数字（空字符串为 0，非数字格式为 NaN）

③ ToString

直接变成字符串（如 true -> "true"，[1, 2] -> "1,2"）。

④ ToBoolean

在 JavaScript 中，只有一小部分值会被转换为 false，这些值被称为 Falsy (虚假值)。
除此之外的所有值（包括所有对象）都会被转换为 true。

Falsy 值列表（转换后为 false）：

undefined
null
false
0 / -0 / 0n (BigInt zero)
NaN
"" (空字符串)

Truthy 值（转换后为 true）：

所有对象（包括空数组 []、空对象 {}、甚至 new Boolean(false)）
所有非空字符串
所有非零数字

2. 常见运算符的转换逻辑

A. 加号运算符 (+) ------ 最复杂

加号的双重身份
在 JS 规范中，加号的操作被分为两大类：

身份一：字符串连接符 (String Concatenation)
- 只要操作数中出现字符串，加号就会"变节"，不再执行算术运算，而是执行文本拼接。
- 优先级：极高。只要有一方能转成字符串，它就倾向于拼接。
- 例子：1 + "2" // "12"
身份二：算术运算符 (Addition)
- 只有当双方都不是字符串，且都能被转换为数字时，它才履行算术加法的职责。
- 例子：1 + true // 2
逻辑：只要有一边是字符串，另一边就会转为字符串进行拼接。
特殊：如果没有字符串，则两边都转为数字相加。

javascript 复制代码

1 + '2'     // "12"
1 + true    // 2 (true 转为 1)
[1] + [2]   // "12" (数组先转原始值 "1" 和 "2"，再拼接)

B. 减号运算符 (-)

相比于加号的"摇摆不定"，减号运算符（-）的脾气非常直爽：它只认数字。

在 JavaScript 中，减号被定义为算术运算符。
只要它出现，JS 引擎就会尝试把符号两边的操作数都强制转换为 Number（数字）类型。
如果转换失败，结果就是 NaN。

** 减号的转换逻辑**

不看类型，先转数字：不管你是字符串、布尔值、null 还是对象，减号都会先调用 ToNumber 操作。
对象处理：如果是对象，先执行 ToPrimitive(obj, Number) 拿到原始值，再把原始值转成数字。
计算：执行纯数学意义上的减法。

不仅仅是减号（-），其他的 算术运算符 如乘号（*）、除号（/）、取模（%）以及自增/自减（++/--），逻辑都和减号完全一致：全员转数字。

javascript 复制代码

const obj = {
  valueOf: () => 10
};

console.log(obj - 5); 
// 1. ToPrimitive(obj, Number) 触发
// 2. 调用 valueOf() 得到 10
// 3. 10 - 5 = 5

C. 关系运算符 (>, <, ==)

逻辑：
- 除了 === 外，只要有一边是数字，另一边就转数字。
- 当 == 两边类型不一致时，转换的优先级是：**数字 > 字符串 > 布尔值。 **
特殊：如果两边都是字符串，则按字符编码顺序（Unicode）比较。

javascript 复制代码

'10' > 2    // true (10 > 2)
'10' > '2'  // false (按位比较，字符 "1" 小于 "2")

D. 重写对象 valueOf 与 toString方法

javascript 复制代码

const obj = {
  valueOf: () => {
    console.log("调用了 valueOf");
    return 10;
  },
  toString: () => {
    console.log("调用了 toString");
    return "Hello";
  }
};

// 1. 算术运算（期望数字）
console.log(obj - 1); 
// 输出:
// 调用了 valueOf
// 9

// 2. 字符串拼接（obj 先转原始值，由于不是 Date，默认先尝试 valueOf）
console.log(obj + " world");
// 输出:
// 调用了 valueOf
// "10 world" 

// 3. 强制转字符串
console.log(String(obj));
// 输出:
// 调用了 toString
// "Hello"

3. 常见的"坑"与注意点

NaN 的特殊性：NaN 不等于任何值，包括它自己。

javascript 复制代码

NaN == NaN // false

null 和 undefined：它们在 == 下相等，但与其它任何值都不相等（不会尝试转为数字）。

javascript 复制代码

null == 0         // false (注意！null 不会转为 0 进行比较)
undefined == 0    // false
null == undefined // true

数组的转换：空数组 [] 转为字符串是 ""，再转数字是 0。

javascript 复制代码

[] == 0  // true
![] == 0 // true (![] 先变为布尔值 false，false 再变数字 0)

4. 经典面试题解析

Q1：为什么 [] == ![] 是 true？

之所以先执行右边，是因为逻辑非运算符（!）的优先级比相等运算符（==）高得多。

右侧 ![]：[] 是真值（对象皆为真），取反得到 false。
左侧 []：对象与原始值比较，执行 ToPrimitive([]) 得到 ""。
当前等式："" == false。
两边转数字：0 == 0。
结果：true。

Q2：如何让 a == 1 && a == 2 && a == 3 成立？

利用 ToPrimitive 原理，重写对象的 valueOf 或 toString 方法：

javascript 复制代码

const a = {
  i: 1,
  valueOf: function() {
    return this.i++;
  }
};

if (a == 1 && a == 2 && a == 3) {
  console.log("成立！");
}

Q3：判断输出结果

javascript 复制代码

'5' - '2'   // 3 (减号强制转数字)
'5' + '2'   // "52" (加号遇到字符串则拼接)
true + 1    // 2 (true 转为 1)
[] + {}     // "[object Object]" (空字符串 + 对象序列化字符串)
{} + []     // 0 (在某些控制台中 {} 被视为代码块，实际执行的是 +[])

JavaScript `==` vs `===` 深度对比表

在 JavaScript 中，==（宽松相等）和 ===（严格相等）的区别是前端面试的"必考题"。理解它们的关键在于：是否允许隐式转换 和 类型检查。

特性	`==` (宽松相等 / Loose Equality)	`===` (严格相等 / Strict Equality)
类型检查	不检查。如果类型不同，会尝试进行隐式转换。	检查。如果类型不同，直接返回 `false`。
转换逻辑	遵循 `ToNumber`、`ToPrimitive` 等内部抽象操作规则。	不存在转换逻辑，直接比对。
性能	略慢。因为在比较前可能需要处理类型转换逻辑。	略快。直接比对值和类型，无需额外操作。
结果判定	值相等即为 `true`（允许不同类型）。	值和类型都必须完全相等才为 `true`。

💡 使用场景建议

优先使用 === ：

这是业界公认的最佳实践。它可以规避几乎所有因隐式转换产生的意外行为（如 0 == false 为 true 的坑），使代码逻辑更清晰、可预测。

== 的唯一推荐场景 ：

用于同时判断 null 和 undefined。这种写法比严格相等更简洁。

javascript 复制代码

// 这种写法可以同时拦截 null 和 undefined
if (obj == null) {
  // 当 obj 是 null 或 undefined 时，都会进入这里（相当于 if (obj === null || obj === undefined)）
}

⚠️ 面试核心考点

NaN 的特殊性 ：无论是 == 还是 ===，NaN 都不等于它自己。
引用类型比较 ：对于对象、数组、函数，== 和 === 比较的都是内存地址 。即使两个对象内容完全一样，只要地址不同，结果就是 false。
布尔值转数字 ：在 == 中，布尔值会先被 ToNumber 转换为 0 或 1。

Q1：基础辨析

javascript 复制代码

1 == '1'   // true  (字符串 '1' 转为数字 1)
1 === '1'  // false (类型不同)

null == undefined  // true  (特殊规则：它们互相宽松相等)
null === undefined // false (类型不同)

Q2：布尔值的陷阱

javascript 复制代码

'1' == true  // true  (true 变 1，'1' 变 1)
'2' == true  // false (true 变 1，'2' 变 2，不相等)
// 很多人以为 '2' 是真值就会等于 true，但在 == 中，它是转数字比！

Q3：对象比较

javascript 复制代码

[] == []   // false (引用地址不同)
[] == ''   // true  ([].toString() 得到 "")
[] == 0    // true  ([].toString() 得到 ""，"" 变数字得到 0)

Q4：最著名的 NaN

javascript 复制代码

NaN == NaN   // false
NaN === NaN  // false
// NaN 不等于任何值，哪怕是它自己。

Js 隐式类型转换、JavaScript `==` vs `===` 深度对比表

文章目录

JavaScript 隐式转换（Implicit Coercion）详解

1. 底层原理：三大转换规则

① ToPrimitive(input, PreferredType)

② ToNumber

③ ToString

④ ToBoolean

2. 常见运算符的转换逻辑

A. 加号运算符 (+) ------ 最复杂

B. 减号运算符 (-)

C. 关系运算符 (>, <, ==)

D. 重写 对象 valueOf 与 toString方法

3. 常见的"坑"与注意点

4. 经典面试题解析

Q1：为什么 [] == ![] 是 true？

Q2：如何让 a == 1 && a == 2 && a == 3 成立？

Q3：判断输出结果

JavaScript == vs === 深度对比表

💡 使用场景建议

⚠️ 面试核心考点

Q1：基础辨析

Q2：布尔值的陷阱

Q3：对象比较

Q4：最著名的 NaN

D. 重写对象 valueOf 与 toString方法

JavaScript `==` vs `===` 深度对比表