前端面试题库

双等号与三等号的区别

7分钟阅读

== 和 === 是JavaScript中两种不同的比较运算符，它们的主要区别在于类型转换。

基本区别

== (相等运算符)

  • 宽松相等：会进行类型转换
  • 如果两个操作数类型不同，会尝试转换为相同类型再比较

=== (严格相等运算符)

  • 严格相等：不进行类型转换
  • 必须类型和值都相同才返回true

具体示例对比

1. 数字与字符串

console.log(5 == "5");   // true  - 字符串"5"转换为数字5
console.log(5 === "5");  // false - 类型不同(number vs string)
 
console.log(0 == "0");   // true  - 字符串"0"转换为数字0
console.log(0 === "0");  // false - 类型不同
 
console.log(42 == "42"); // true
console.log(42 === "42"); // false

2. 布尔值比较

console.log(true == 1);   // true  - true转换为1
console.log(true === 1);  // false - 类型不同(boolean vs number)
 
console.log(false == 0);  // true  - false转换为0
console.log(false === 0); // false - 类型不同
 
console.log(true == "1");  // true  - true转换为1，"1"转换为1
console.log(true === "1"); // false - 类型不同

3. null和undefined

console.log(null == undefined);  // true  - 特殊规则，它们相等
console.log(null === undefined); // false - 类型不同
 
console.log(null == 0);   // false - null不转换为0
console.log(null === 0);  // false - 类型不同
 
console.log(undefined == 0); // false
console.log(undefined === 0); // false

4. 空字符串和falsy值

console.log("" == 0);     // true  - 空字符串转换为0
console.log("" === 0);    // false - 类型不同
 
console.log("" == false); // true  - 都转换为0
console.log("" === false); // false - 类型不同
 
console.log(" " == 0);    // true  - 空格字符串转换为0
console.log(" " === 0);   // false - 类型不同

5. 数组比较

console.log([] == 0);     // true  - 空数组转换为0
console.log([] === 0);    // false - 类型不同
 
console.log([1] == 1);    // true  - [1]转换为"1"，再转换为1
console.log([1] === 1);   // false - 类型不同
 
console.log([1,2] == "1,2"); // true  - 数组转换为字符串"1,2"
console.log([1,2] === "1,2"); // false - 类型不同

== 的类型转换规则

转换优先级

// 1. 如果类型相同，直接比较值
console.log(5 == 5);     // true
console.log("a" == "a"); // true
 
// 2. null和undefined特殊处理
console.log(null == undefined); // true
 
// 3. 数字和字符串：字符串转数字
console.log(123 == "123"); // true
 
// 4. 布尔值：转换为数字
console.log(true == 1);   // true (true → 1)
console.log(false == 0);  // true (false → 0)
 
// 5. 对象：调用valueOf()或toString()
const obj = {
  valueOf() { return 42; }
};
console.log(obj == 42);   // true

复杂转换示例

// 多步转换
console.log(true == "1");  // true
// 步骤：true → 1，"1" → 1，1 == 1 → true
 
console.log(false == "0"); // true
// 步骤：false → 0，"0" → 0，0 == 0 → true
 
console.log(false == "");  // true
// 步骤：false → 0，"" → 0，0 == 0 → true
 
// 意外的结果
console.log("0" == false); // true
console.log("0" == 0);     // true
console.log(0 == false);   // true
// 但是：
console.log("0" == "");    // false - 都是字符串，直接比较

常见陷阱

1. 看起来应该相等但不相等

console.log("" == 0);      // true
console.log("0" == 0);     // true
console.log("" == "0");    // false - 为什么？
 
// 解释：字符串直接比较，""和"0"是不同的字符串

2. 数组比较的意外

console.log([] == []);     // false - 不同的对象引用
console.log([] == 0);      // true  - 空数组转换为0
console.log([] == "");     // true  - 空数组转换为空字符串
console.log([] == false);  // true  - 都转换为0

3. NaN的特殊性

console.log(NaN == NaN);   // false
console.log(NaN === NaN);  // false
// NaN不等于任何值，包括它自己
 
// 检查NaN
console.log(Number.isNaN(NaN)); // true
console.log(isNaN("hello"));    // true - 会尝试转换
console.log(Number.isNaN("hello")); // false - 不转换

最佳实践

1. 优先使用 ===

// 推荐
if (value === null) {
  // 处理null
}
 
if (typeof value === "string") {
  // 处理字符串
}
 
if (array.length === 0) {
  // 处理空数组
}

2. 明确的类型转换

// 不好的做法
if (userInput == 0) {
  // 可能匹配 0, "0", false, "", []
}
 
// 好的做法
if (Number(userInput) === 0) {
  // 明确转换为数字再比较
}
 
if (userInput === "0") {
  // 明确比较字符串
}

3. 处理null/undefined

// 检查null或undefined
if (value == null) {  // 这是==的合理用法
  // value是null或undefined
}
 
// 等价于
if (value === null || value === undefined) {
  // 更明确但更冗长
}
 
// 现代方法
if (value ?? false) {  // 使用空值合并运算符
  // value不是null或undefined
}

4. 表单验证示例

function validateInput(input) {
  // 不好的做法
  if (input == "") {
    return false; // 会匹配 "", 0, false, []
  }
  
  // 好的做法
  if (input === "" || input == null) {
    return false; // 明确检查空字符串和null/undefined
  }
  
  // 更好的做法
  if (!input || input.trim() === "") {
    return false; // 检查falsy值和空白字符串
  }
  
  return true;
}

性能考虑

// === 通常更快，因为不需要类型转换
const iterations = 1000000;
 
console.time('===');
for (let i = 0; i < iterations; i++) {
  5 === 5;
}
console.timeEnd('===');
 
console.time('==');
for (let i = 0; i < iterations; i++) {
  5 == "5";  // 需要类型转换
}
console.timeEnd('==');

总结

特性=====
类型转换是否
性能较慢较快
可预测性低高
推荐使用少数情况大多数情况

建议：

  • 默认使用 ===，除非你明确需要类型转换
  • 只在检查 null/undefined 时使用 ==：value == null
  • 进行类型转换时要明确，不要依赖隐式转换
  • 使用ESLint规则强制使用 ===