js为什么[]==![]是成立的吗

 更新时间:2023年01月31日 14:35:47   作者:在下月亮有何贵干  
本文主要介绍了js为什么[]==![]是成立的吗,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

js是一门弱类型的语言,它的强制类型转换的迷惑性也被人诟病,例如标题提到的一个小例子,我想可能很难再找到其他的语言,允许我们觉到一个值似乎既为真也为假。

其实现在规范更推荐js开发者们避免使用 == 这种会产生强制类型转换的语法,大家尽可能会用 === 来代替,我在工作中也确实如此。

这里涉及到强制类型转换的问题,由于js的类型设计如此,它并不是难用,而是容易出现让人难以理解的内容,所以被很多人诟病。其实遇到任何问题,第一时间不应该是回避,而是应该试着去了解它,理解了也就不会迷惑了。

我想你也想解除一下自己的迷惑吧?本文就来给介绍一下关于==的类型转换问题。

== 与 === 的区别

这时候,如果你有经验,你肯定会说:这个我知道,== 只判断值,=== 会同时判断值和类型

这么理解也许可以,但是严格来说,这句话不够准确,真正的区别应该是:== 在比较两个不同类型的值时会发生强制类型转换,而 === 不会

强制类型转换

然后怎么转换呢?记一下以下几点就完了。

前置条件是两者类型不同,

  1. 两者如果是表达式,先计算表达式。
  2. 两者中有一个是对象类型,则该对象类型执行ToPrimitive后再进行比较。
  3. 两者都是基本类型,判断类型是否相同,不同,则同时执行ToNumber后再比较。
  4. 特殊情况,null == underfined,两者在 == 比较中只与对方和自己本身相等。

ToPimitive:执行该对象的valueOf函数,如果结果为基本类型则直接返回,否则返回该对象的toString函数的执行结果。

ToNumber:转化为数字类型。

例子

ok,知道了以上的内容,我们来看看[]==![]发生了什么。

[] == ![] // 右边是表达式,先进行计算,[]的boolean值为true,所以![]则为false

// ⬇⬇⬇

[] == false // 右边是基本类型,左边则是数组(对象类型),因此对左侧执行ToPrimitive

// ⬇⬇⬇

// ToPrimitive执行过程
[].valueOf() // 结果为[],valueOf返回的仍然是原数组对象,非基本类型,执行ToString
[].toString() // 结果为空字符串'',为字符串基本类型,返回

'' == false // 两边都为基本类型,类型仍然不同,两边同时执行ToNumber

// ⬇⬇⬇

// 两边同时ToNumber转化为数字类型
Number('') // 0
Number(false) // 0

0 == 0 // true

哈哈哈,虽然很扯淡,但是结果就是这样的。

练习

试试,根据上方学习到的知识,能不能尝试让自己理解以下的等式为什么是true呢?

console.log('0' == false) // true
console.log(0 == false) // true
console.log('' == false) // true
console.log([] == false) // true
console.log('' == 0) // true
console.log('' == []) // true
console.log(0 == []) // true

特殊情况undefined==null

虽然两者都是基本类型,可是遇到它们时要特殊处理,不可以使用Number进行转换,两者在==中只与彼此和自身相等,因此进行上方步骤判断时,不要忘了遇到null和undefined,不要再继续转换了。

而且根据这个特殊性质,当我们需要判断一个值为undefined或者null时,完全可以简化判断,这不是很好吗?

if (res === undefined || res === null) {
    // ...
}

// 等同于
if (res == null) {
    // ...
}

尾言

本文介绍了==的强制类型转换,虽然我知道这在工作中实用性不大,哈哈哈,不过就当是满足一下自己的求知欲吧。更多相关js []==![]内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现购物车商品数量加减

    js实现购物车商品数量加减

    这篇文章主要为大家详细介绍了js实现购物车商品数量加减,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JS事件循环机制event loop宏任务微任务原理解析

    JS事件循环机制event loop宏任务微任务原理解析

    这篇文章主要介绍了JS事件循环机制event loop宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • JavaScript this 深入理解

    JavaScript this 深入理解

    一直以来,对于JavaScript 中的this的理解都是很模糊的, 特别是对函数进行apply 与 call 调用。这两个操作如果没有很好的理解 JavaScript中this的概念,会越搞越迷糊。
    2009-07-07
  • 学习RxJS之JavaScript框架Cycle.js

    学习RxJS之JavaScript框架Cycle.js

    这篇文章主要介绍了学习RxJS之JavaScript框架Cycle.js ,它是一个极简的JavaScript框架(核心部分加上注释125行),提供了一种函数式,响应式的人机交互接口,需要的朋友可以参考下
    2019-06-06
  • layui数据表格重载实现往后台传参

    layui数据表格重载实现往后台传参

    今天小编就为大家分享一篇layui数据表格重载实现往后台传参,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 浅谈JS数组内置遍历方法有哪些和区别

    浅谈JS数组内置遍历方法有哪些和区别

    本文主要介绍了浅谈JS数组内置遍历方法有哪些和区别,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • uni-app和原生小程序混合开发的具体实现过程

    uni-app和原生小程序混合开发的具体实现过程

    最近项目中遇到了一些功能需要与原生进行混合开发,所以下面这篇文章主要给大家介绍了关于uni-app和原生小程序混合开发的具体实现过程,需要的朋友可以参考下
    2022-07-07
  • javascript中使用new与不使用实例化对象的区别

    javascript中使用new与不使用实例化对象的区别

    这篇文章主要介绍了javascript中使用new与不使用实例化对象的区别的相关资料,需要的朋友可以参考下
    2015-06-06
  • Js apply方法详解

    Js apply方法详解

    本文主要介绍了Js apply方法的相关知识,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 关于base64编码和解码的js工具函数

    关于base64编码和解码的js工具函数

    这篇文章主要介绍了关于base64编码和解码的js工具函数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02

最新评论