JavaScript中=、==和===三种不同操作符的用法详解
作者：全栈小5
前言
最近博主又要开始面试了。面试过程中，难免会碰到一些面试题，有些可能还是一些比较基础的知识点，时间久了可能一时半会给忘记了，或者压根就没有太注意用法和却别。
在JavaScript中，=、==和===是三种不同的操作符，用途和含义完全不同。下面就一起看下三种等号的区别？
1. = (赋值操作符)
用途：用于给变量赋值
示例：
let x = 10; // 将值10赋给变量x const name = "Alice"; // 将字符串"Alice"赋给常量name
2. == (相等操作符，宽松相等)
用途：比较两个值是否相等，会进行类型转换
特点：比较前会尝试将两边的值转换为相同类型
示例：
5 == "5" // true (字符串"5"转换为数字5) 0 == false // true (false转换为数字0) null == undefined // true "" == 0 // true
3. === (严格相等操作符)
用途：比较两个值是否严格相等，不进行类型转换
特点：类型和值都必须完全相同
示例：
5 === "5" // false (类型不同：数字 vs 字符串) 0 === false // false (类型不同：数字 vs 布尔值) null === undefined // false (类型不同) "" === 0 // false (类型不同) 5 === 5 // true (类型和值都相同)
关键区别总结
| 作符 | 名称 | 是否类型转换 | 推荐使用场景 |
|---|---|---|---|
| = | 赋值 | - | 给变量赋值 |
| == | 宽松相等 | ✅ 会转换 | 一般不推荐使用 |
| === | 严格相等 | ❌ 不转换 | 推荐使用 |
实际开发建议
1.推荐总是使用 === 和 !==
- 避免因类型转换导致的意外行为
- 代码更清晰，意图更明确
2.避免使用 == 的情况
// 可能产生意外结果 "0" == false // true [] == false // true "\t" == 0 // true
3.特殊情况
NaN === NaN // false (特殊情况，使用 isNaN() 判断) +0 === -0 // true Object.is() // ES6更精确的比较方法
最佳实践：在JavaScript中，除非有特殊原因，否则总是使用 === 进行相等比较，这可以减少错误并使代码意图更明确。
面试题
基础概念题
1. 三者的基本区别
题目：请简述 =、== 和 === 在JavaScript中的主要区别。
2. 类型转换题
题目：以下代码输出什么？为什么？
console.log(0 == false);
console.log(0 === false);
console.log("" == false);
console.log("" === false);
代码输出题
3. 比较运算
let a = 5; let b = "5"; let c = 5; console.log(a == b); // ? console.log(a === b); // ? console.log(a === c); // ? console.log(null == undefined); // ? console.log(null === undefined); // ?
4. 对象比较
const obj1 = { name: "John" };
const obj2 = { name: "John" };
const obj3 = obj1;
console.log(obj1 == obj2); // ?
console.log(obj1 === obj2); // ?
console.log(obj1 === obj3); // ?
5. 数组比较
console.log([] == false); // ? console.log([] === false); // ? console.log([1,2] == "1,2"); // ? console.log([1,2] === "1,2"); // ?
6. 特殊值比较
console.log(NaN == NaN); // ?
console.log(NaN === NaN); // ?
console.log(0 == -0); // ?
console.log(0 === -0); // ?
console.log(Number("abc") == NaN); // ?
编程题
7. 实现一个严格相等函数
题目：不使用 ===，实现一个 strictEqual(a, b) 函数，要求：
- 返回布尔值
- 行为与 === 一致
- 处理特殊情况（NaN、+0/-0等）
8. 类型转换陷阱
题目：找出以下代码中的问题并修复：
function validateAge(age) {
if (age == 18) {
return "刚刚成年";
} else if (age > 18) {
return "已成年";
} else {
return "未成年";
}
}
console.log(validateAge("18")); // 期望输出："刚刚成年"
console.log(validateAge(18)); // 期望输出："刚刚成年"
console.log(validateAge("17")); // 期望输出："未成年"
9. 深层比较
题目：实现一个 deepEqual(obj1, obj2) 函数，要求：
- 能进行深层对象比较
- 使用严格相等原则
- 考虑循环引用的情况
场景分析题
10. 实际应用场景
题目：在以下场景中，应该使用 == 还是 ===？为什么？
- 从URL参数中获取数字并进行比较
- 检查一个值是否为 null 或 undefined
- 比较用户输入的表单数据
11. 代码审查
题目：以下代码有什么潜在问题？如何改进？
function processInput(input) {
if (input == null) {
return "输入为空";
}
if (input.id == undefined) {
return "缺少ID";
}
if (input.value == 0) {
return "值为0";
}
return "处理成功";
}高级题
12. 抽象相等算法
题目：解释 == 操作符的类型转换规则（抽象相等比较算法）的主要步骤。
13. Object.is() 比较
题目：
console.log(Object.is(NaN, NaN)); // ? console.log(Object.is(0, -0)); // ? console.log(Object.is([], [])); // ? // 与 === 的区别是什么？
14. 隐式类型转换
题目：分析以下表达式的执行过程：
"5" + 3 == 53; // ?
"5" - 3 == 2; // ?
true + false == 1; // ?
[] + {} == "[object Object]"; // ?
到此这篇关于JavaScript中=、==和===三种不同操作符的用法详解的文章就介绍到这了,更多相关JavaScript相等操作符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！