JavaScript中=、==和===三种不同操作符的用法详解

更新时间：2026年01月22日 15:52:35 作者：全栈小5

在JavaScript面试中,难免会碰到一些面试题,有些可能还是一些比较基础的知识点,在JavaScript中,=、==和===是三种不同的操作符,用途和含义完全不同,下面就一起看下三种等号的区别吧

前言

最近博主又要开始面试了。面试过程中，难免会碰到一些面试题，有些可能还是一些比较基础的知识点，时间久了可能一时半会给忘记了，或者压根就没有太注意用法和却别。

在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相等操作符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

location.hash保存页面状态的技巧
hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。接下来通过本文给大家介绍location.hash保存页面状态的相关内容，感兴趣的朋友一起学习吧
2016-04-04
JS实现点击表头表格自动排序（含数字、字符串、日期）
这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序，其中包含数字排序、字符串排序以及日期格式的排序，文中给出了完整的示例代码，相信对大家具有一定的参考价值，感兴趣的朋友们一起来看看吧。
2017-01-01
canvas绘制爱心的几种方法总结(推荐)
下面小编就为大家带来一篇canvas绘制爱心的几种方法总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
JavaScript+CSS无限极分类效果完整实现方法
这篇文章主要介绍了JavaScript+CSS无限极分类效果完整实现方法,涉及JavaScript针对页面元素节点遍历与动态操作技巧,需要的朋友可以参考下
2015-12-12
利用javascript移动div层-javascript 拖动层
利用javascript开发在界面上随意拖动以下html code中的div层
2009-03-03
JS实现跟随鼠标的链接文字提示框效果
这篇文章主要介绍了JS实现跟随鼠标的链接文字提示框效果,涉及javascript鼠标事件及页面元素样式操作的相关技巧,非常简单实用,需要的朋友可以参考下
2015-08-08
简述JS控制台的使用
本文给大家介绍了js控制台的使用，非常不错，具有一定的参考借鉴借鉴价值，需要的朋友参考下吧
2018-07-07
微信小程序中如何实现动态改变SVG颜色和尺寸
SVG可被非常多的工具读取和修改SVG与JPEG和GIF图像比起来,尺寸更小,且可压缩性更强,下面这篇文章主要给大家介绍了关于微信小程序中如何实现动态改变SVG颜色和尺寸的相关资料,需要的朋友可以参考下
2022-07-07
让微信小程序支持ES6中Promise特性的方法详解
微信更新自家的Web开发工具后无法使用原生 Promise，下面这篇教程教你引入第三方库来使用 Promise，文中通过图文介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
2017-06-06
前端实现Token刷新机制的几种方法
本文探讨Token过期时的无痛刷新方案,包括定时器、请求拦截器、响应拦截器,建议优先采用后两者以兼顾效率与场景适配性,感兴趣的可以了解一下
2025-08-08