🌹欢迎来到《小5讲堂》🌹
🌹这是《前端》系列文章，每篇文章将以博主理解的角度展开讲解。🌹
🌹温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！🌹
目录
- 前言
- [1. `=` (赋值操作符)](#1.
=(赋值操作符)) - [2. `==` (相等操作符，宽松相等)](#2.
==(相等操作符，宽松相等)) - [3. `===` (严格相等操作符)](#3.
===(严格相等操作符)) - 关键区别总结
- 实际开发建议
- 面试题
- 文章推荐
前言
最近博主又要开始面试了。
面试过程中，难免会碰到一些面试题，有些可能还是一些比较基础的知识点，
时间久了可能一时半会给忘记了，或者压根就没有太注意用法和却别。
下面就一起看下三种等号的区别？
在JavaScript中，=、==和===是三种不同的操作符，用途和含义完全不同。
1. = (赋值操作符)
- 用途：用于给变量赋值
- 示例：
javascript
let x = 10; // 将值10赋给变量x
const name = "Alice"; // 将字符串"Alice"赋给常量name2. == (相等操作符，宽松相等)
- 用途 ：比较两个值是否相等，会进行类型转换
- 特点：比较前会尝试将两边的值转换为相同类型
- 示例：
javascript
5 == "5" // true (字符串"5"转换为数字5)
0 == false // true (false转换为数字0)
null == undefined // true
"" == 0 // true
3. === (严格相等操作符)
- 用途 ：比较两个值是否严格相等 ，不进行类型转换
- 特点：类型和值都必须完全相同
- 示例：
javascript
5 === "5" // false (类型不同：数字 vs 字符串)
0 === false // false (类型不同：数字 vs 布尔值)
null === undefined // false (类型不同)
"" === 0 // false (类型不同)
5 === 5 // true (类型和值都相同)
关键区别总结
| 操作符 | 名称 | 是否类型转换 | 推荐使用场景 |
|---|---|---|---|
= |
赋值 | - | 给变量赋值 |
== |
宽松相等 | ✅ 会转换 | 一般不推荐使用 |
=== |
严格相等 | ❌ 不转换 | 推荐使用 |
实际开发建议
-
推荐总是使用
===和!==- 避免因类型转换导致的意外行为
- 代码更清晰，意图更明确
-
避免使用
==的情况
javascript
// 可能产生意外结果
"0" == false // true
[] == false // true
"\t" == 0 // true- 特殊情况
javascript
NaN === NaN // false (特殊情况，使用 isNaN() 判断)
+0 === -0 // true
Object.is() // ES6更精确的比较方法最佳实践 ：在JavaScript中，除非有特殊原因，否则总是使用 === 进行相等比较，这可以减少错误并使代码意图更明确。
面试题
基础概念题
1. 三者的基本区别
题目 ：请简述 =、== 和 === 在JavaScript中的主要区别。
2. 类型转换题
题目：以下代码输出什么？为什么？
javascript
console.log(0 == false);
console.log(0 === false);
console.log("" == false);
console.log("" === false);代码输出题
3. 比较运算
javascript
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. 对象比较
javascript
const obj1 = { name: "John" };
const obj2 = { name: "John" };
const obj3 = obj1;
console.log(obj1 == obj2); // ?
console.log(obj1 === obj2); // ?
console.log(obj1 === obj3); // ?5. 数组比较
javascript
console.log([] == false); // ?
console.log([] === false); // ?
console.log([1,2] == "1,2"); // ?
console.log([1,2] === "1,2"); // ?6. 特殊值比较
javascript
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. 类型转换陷阱
题目：找出以下代码中的问题并修复：
javascript
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. 代码审查
题目：以下代码有什么潜在问题？如何改进？
javascript
function processInput(input) {
if (input == null) {
return "输入为空";
}
if (input.id == undefined) {
return "缺少ID";
}
if (input.value == 0) {
return "值为0";
}
return "处理成功";
}高级题
12. 抽象相等算法
题目 ：解释 == 操作符的类型转换规则（抽象相等比较算法）的主要步骤。
13. Object.is() 比较
题目：
javascript
console.log(Object.is(NaN, NaN)); // ?
console.log(Object.is(0, -0)); // ?
console.log(Object.is([], [])); // ?
// 与 === 的区别是什么？14. 隐式类型转换
题目：分析以下表达式的执行过程：
javascript
"5" + 3 == 53; // ?
"5" - 3 == 2; // ?
true + false == 1; // ?
[] + {} == "[object Object]"; // ?文章推荐
【前端】在JavaScript中，=、==和===是三种不同的操作符，用途和含义完全不同，一起瞧瞧
【前端】Vue 3 + TypeScript 中 var 与 let 的区别，面试可能会问到，你知道怎么回答吗
【前端】使用Vue3过程中遇到加载无效设置点击方法提示不存在的情况，原来是少加了一个属性
【前端】Vue3+elementui+ts，TypeScript Promise转string错误解析，习惯性请出DeepSeek来解答
【前端】Vue3+elementui+ts，给标签设置样式属性style时，提示type check failed for prop，再次请出DeepSeek来解答
【前端】Layui的表格常用功能，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件
【Echarts】曲线图上方显示数字以及自定义值，标题和副标题居中，鼠标上显示信息以及自定义信息
【Echarts】柱状图上方显示数字以及自定义值，标题和副标题居中，鼠标上显示信息以及自定义信息