首页/文章/javascript

为什么[ ] == [ ] 为false, [ ] == ![ ] 为true?

2024-03-12
12475 分钟
...

这两个表达式涉及到 JS 中类型转换和比较操作符的行为。JS 是一种灵活的动态语言,它有一套自己的类型转换规则,有时会导致一些看似奇怪的结果。在理解这两个表达式的行为时,需要深入了解 JS 的类型转换机制以及比较操作符的工作方式。

首先介绍一下 JS 中的类型转换机制,JS 中的类型转换通常发生在两种情况下:隐式类型转换显式类型转换。隐式类型转换是 JS 自动执行的类型转换,通常发生在需要不同类型的值的运算或比较时。而显式类型转换是通过一些内置函数(如parseInt()parseFloat()String()Number()等)来显式地进行类型转换。

== 的隐式类型转换

特例:

  • null == undefined 为 true;
  • NaN不与任何值相等,包括它自己;
  • null和undefined不会进行数据转换;

1.数值和非数值类型比较

  • 数值和字符串
console.log('Ywis' == 1)
console.log('' == 0)
console.log('1' == 1)
console.log('000' == 0)

当一个数据类型是数值,另一个是字符串,会将字符串转换为数值,再与之比较。比如其中'Ywis'会转换为数字NaN,所以返回false

  • 数值和布尔值
console.log(true == 1);  
console.log(true == 2);  
console.log(false == 0); 
console.log(false == 1); 

很容易就能看出,这样的比较,会将true转化成数值1false转化为0

  • 数值和数组
console.log([] == 1); 
console.log([] == 0); 
console.log(['Ywis'] == 1); 
console.log([1,2] == 2); 

在这里,数组会先通过调用toString()转换为字符串后再转化为数值。比如['Ywis']先转化为字符串'Ywis'后再转化为数值NaN,所以返回false

拓展:数组、对象和函数在与其他基本数据类型进行比较时都会先转换为字符串,然后再转换为相应的数据类型。

2. 布尔值和非布尔值类型比较

console.log(true == 1); 
console.log(true == '00001'); 
console.log(false == []); 
console.log(true == ['Ywis']); 

当布尔值和非布尔类型比较,会将true转换为 1,false转换为 0。将非布尔值类型统统转化成数值,这里的类型转换规则和上面提到的相同。

3. 对象和原始值的比较

console.log({} == 0); 
console.log([] == 1); 

当对象与原始值进行比较时,JS 会先尝试通过调用对象的valueOf()方法来获取原始值。如果valueOf()方法返回的是一个原始值,JS 会将其转换成与待比较的原始值相同的类型,然后进行比较。如果valueOf()方法返回的还是一个对象,则会继续调用对象的toString()方法,将其返回值转换为原始值,然后再进行比较。

比如{} == 0,对于空对象{}它的valueOf() 方法返回的是对象本身,因此 JS 会继续调用 toString() 方法,返回得到一个字符串 "[object Object]",再转换为数值NaN,所以返回false

逻辑非 ---

在操作非布尔值类型时,会进行两步操作:

  1. 将该数据类型先转换成布尔值类型。
  2. 再进行取反操作。
console.log(!""); 
console.log(![]); 
console.log(!{}); 
console.log(!(-4)); 

注意:

  1. false:布尔值 false
  2. undefined:未定义的值
  3. null:空值
  4. 0:数字 0
  5. -0:负零
  6. NaN:非数字值
  7. '':空字符串

除了以上七个值外,其他值(包括对象、数组、函数等)在转换为布尔值时都会返回 true。这种规则使得 JS 中的大多数值被视为真值(truthy)。

这是很好理解的,在 JS 中对象(包括数组)的比较是基于它们的引用地址,而不是它们的内容。即使两个对象的内容相同,它们的引用地址也不同,所以比较结果是 false

过程:

  1. 因为的优先级高于==,首先将空数组转换为true,再取反得false
  2. 接着是[] == false,这是布尔值和非布尔值类型比较,首先将false转换为0,然后调用对象的toString方法,返回一个空对象''
  3. 最后空对象转换为数值0,即 0 == 0,结果返回true。

 

如果您觉得这篇文章有帮助,请点个赞吧~

分享文章

相关文章

更多文章 →
javascript2025-09-18
JavaScript 的多线程能力:Worker
如果你写过一些计算量稍大的 JavaScript 代码,比如图像处理、大量数据排序或者复杂的算法,你几乎肯定遇到过浏览器“卡死”的现象。点击页面没反应,动画也停了,就像整个世界都静止了。 这就是主线程被阻塞的典型后果。因为主线程既要负责执行 JavaScript,又要负责渲染页面、响应用户操作,一旦它被繁重的计算任务占满,就无暇顾及其他,用户体验便直线下降。 这个问题的根源,正是“主线程是单线程的”。那么,如何解决呢? 答案很简单:把这...
学习面试
javascript2025-09-10
手把手教你实现一个EventEmitter
你是不是也遇到过这种情况:代码里各种事件监听和触发,回调函数套了一层又一层,最后自己都理不清哪个事件先触发、哪个后触发了? 别担心,今天我就带你从零开始实现一个自己的事件触发器(EventEmitter),让你彻底掌握事件驱动的精髓,代码清晰度直接提升200%! 为什么要懂EventEmitter? 先说说为什么我们要关心这个。Node.js的核心就是事件驱动,比如文件读写、网络请求,都是通过事件来处理的。不会EventEmitter,...
学习面试
javascript2025-08-09
Web Worker 多线程魔法
你是否曾遇到过网页因为复杂计算而卡顿的情况?今天,让我们一起探索Web Worker的神奇世界,看看如何用多线程技术解决性能瓶颈,并实现流畅的图片压缩功能! 为什么需要Web Worker? 想象一下,你在一个繁忙的餐厅里,只有一位服务员(主线程)负责点餐、上菜、结账所有工作。当客人突然暴增时,这位服务员就会手忙脚乱,其他客人只能干等着… 这就是JavaScript的现状—— 单线程 !所有任务都在一个线程中排队执行,一旦遇到复杂计算(...
学习面试
javascript2025-08-07
🌐AST抽象语法树
AST 是前端开发中一个非常重要的概念,它就像是代码的“编译器”,能够帮助我们理解和操作代码。本文将深入探讨 AST 的原理和应用,带你从零开始了解 AST。 一、什么是 AST? AST(抽象语法树)是一种树形结构,用于表示程序代码的语法结构。它将代码分解为一系列的节点,每个节点代表代码中的一个元素,如变量、函数、表达式等。AST 是编译器和解释器的基础,也是代码分析和转换的关键工具。 1\. AST 的结构 AST 的结构通常包括以...
学习面试
javascript2025-08-05
打字机效果是如何实现的
分析效果 使用 AI 对话的时候,文字是一个字一个字蹦出来的?它不是等所有内容生成完毕后一次性展示,而是以一种流畅、实时的“打字机”效果呈现,这种体验的背后,隐藏着一种高效的Web技术。它就是 服务器推送事件(Server Sent Events,简称 SSE) 什么是 SSE 从根本上说,SSE 是一种允许服务器 单向 、 持续 地向客户端(浏览器)推送数据的Web技术。 可以把它想象成一个 电台广播 : 服务器 是广播电台,持续不断...
学习面试
javascript2025-08-04
Promise 从原理到实现
前言 是 异步编程的核心概念之一,它为我们提供了一种更优雅的方式来处理异步操作。 本文将全面剖析 的工作原理,并逐步实现一个符合 规范的 。 正文 一、Promise 基础概念 代表一个异步操作的最终完成(或失败)及其结果值。它有 种状态: 1. pending : ,既不是成功,也不是失败状态 2. fulfilled :意味着操作 完成 3. rejected :意味着操作 状态一旦改变就不能再变,只能从 变为 ,或从 变为 。 二...
学习面试

评论

请登录后发表评论

去登录
加载评论中...

目录