【前端】在JavaScript中，=、==和===是三种不同的操作符，用途和含义完全不同，一起瞧瞧

🌹欢迎来到《小5讲堂》🌹
🌹这是《前端》系列文章，每篇文章将以博主理解的角度展开讲解。🌹
🌹温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！🌹

前言

最近博主又要开始面试了。
面试过程中，难免会碰到一些面试题，有些可能还是一些比较基础的知识点，
时间久了可能一时半会给忘记了，或者压根就没有太注意用法和却别。
下面就一起看下三种等号的区别？
在JavaScript中，=、==和===是三种不同的操作符，用途和含义完全不同。

1.=(赋值操作符)

• 用途：用于给变量赋值
• 示例：

letx=10;// 将值10赋给变量xconstname="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// trueObject.is()// ES6更精确的比较方法

最佳实践：在JavaScript中，除非有特殊原因，否则总是使用===进行相等比较，这可以减少错误并使代码意图更明确。

面试题

基础概念题

1. 三者的基本区别

题目：请简述=、==和===在JavaScript中的主要区别。

2. 类型转换题

题目：以下代码输出什么？为什么？

console.log(0==false);console.log(0===false);console.log(""==false);console.log(""===false);

代码输出题

3. 比较运算

leta=5;letb="5";letc=5;console.log(a==b);// ?console.log(a===b);// ?console.log(a===c);// ?console.log(null==undefined);// ?console.log(null===undefined);// ?

4. 对象比较

constobj1={name:"John"};constobj2={name:"John"};constobj3=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. 类型转换陷阱

题目：找出以下代码中的问题并修复：

functionvalidateAge(age){if(age==18){return"刚刚成年";}elseif(age>18){return"已成年";}else{return"未成年";}}console.log(validateAge("18"));// 期望输出："刚刚成年"console.log(validateAge(18));// 期望输出："刚刚成年"console.log(validateAge("17"));// 期望输出："未成年"

9. 深层比较

题目：实现一个deepEqual(obj1, obj2)函数，要求：

• 能进行深层对象比较
• 使用严格相等原则
• 考虑循环引用的情况

场景分析题

10. 实际应用场景

题目：在以下场景中，应该使用==还是===？为什么？

1. 从URL参数中获取数字并进行比较
2. 检查一个值是否为null或undefined
3. 比较用户输入的表单数据

11. 代码审查

题目：以下代码有什么潜在问题？如何改进？

functionprocessInput(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中，=、==和===是三种不同的操作符，用途和含义完全不同，一起瞧瞧

【前端】Vue 3 + TypeScript 中 var 与 let 的区别，面试可能会问到，你知道怎么回答吗

【前端】使用Vue3过程中遇到加载无效设置点击方法提示不存在的情况，原来是少加了一个属性

【前端】Vue3+elementui+ts，TypeScript Promise转string错误解析，习惯性请出DeepSeek来解答

【前端】Vue3+elementui+ts，给标签设置样式属性style时，提示type check failed for prop，再次请出DeepSeek来解答

【前端】layui table表格勾选事件，以及常见模块

【前端】Layui的表格常用功能，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件

【Echarts】曲线图上方显示数字以及自定义值，标题和副标题居中，鼠标上显示信息以及自定义信息

【Echarts】柱状图上方显示数字以及自定义值，标题和副标题居中，鼠标上显示信息以及自定义信息

【随笔】程序员如何选择职业赛道，目前各个赛道的现状如何，那个赛道前景巨大

【随笔】程序员的金三银四求职宝典，每个人都有最合适自己的求职宝典