js中比较运算符隐式类型转换

2019-03-25 admin

前言 相信大家在代码中经常看见 ‘==’ 和 ‘===’,但大家真的弄懂了比较运算符和其中的隐式转换嘛? 今天就重新认识下比较运算符。

全等运算符 ===

说明: 严格匹配,不会类型转换,必须要数据类型和值完全一致

先判断类型,如果类型不是同一类型的话直接为false;

1 对于基本数据类型(值类型): Number,String,Boolean,Null和Undefined:两边的值要一致,才相等
      console.log(null === null)   // true
      console.log(undefined === undefined)  // true
   注意: NaN: 不会等于任何数,包括它自己
   console.log(NaN === NaN)  // false 

2 对于复杂数据类型(引用类型): Object,Array,Function等:两边的引用地址如果一致的话,是相等的
     arr1 = [1,2,3];
     arr2 = arr1;
     console.log(arr1 === arr2)   // true

相等运算符 ==

非严格匹配: 会类型转换,但是有前提条件一共有五种情况 (接下来的代码以 x == y 为示例)

  1. x和y都是null或undefined: 规则: 没有隐式类型转换,无条件返回true

    console.log ( null == undefined );//true
    console.log ( null == null );//true
    console.log ( undefined == undefined );//true
    
  2. x或y是NaN : NaN与任何数字都不等 规则:没有隐式类型转换,无条件返回false

    console.log ( NaN == NaN );//false
    
  3. x和y都是string,boolean,number 规则:有隐式类型转换,会将不是number类型的数据转成number

    console.log ( 1 == true );//true    (1) 1 == Number(true)
    console.log ( 1 == "true" );//false   (1) 1 == Number('true')
    console.log ( 1 == ! "true" );//false  (1) 1 == !Boolean('true')  (2) 1 == !true  (3) 1 == false  (4)1 == Number(false)
    console.log ( 0 == ! "true" );//true
    console.log(true == 'true') // false
    
  4. x或y是复杂数据类型 : 会先获取复杂数据类型的原始值之后再左比较 复杂数据类型的原始值: 先调用valueOf方法,然后调用toString方法 valueOf:一般默认返回自身 数组的toString:默认会调用join方法拼接每个元素并且返回拼接后的字符串

    console.log ( [].toString () );//空字符串
    console.log ( {}.toString () );//[object Object]
    注意:  空数组的toString()方法会得到空字符串,
          而空对象的toString()方法会得到字符串[object Object] (注意第一个小写o,第二个大写O哟)
    
    console.log ( [ 1, 2, 3 ].valueOf().toString());//‘1,2,3’
    console.log ( [ 1, 2, 3 ] == "1,2,3" );//true  (1)[1,2,3].toString() == '1,2,3'  (2)'1,2,3' == '1,2,3'
    console.log({} == '[object Object]');//true
    
  5. x和y都是复杂数据类型 : 规则只比较地址,如果地址一致则返回true,否则返回false

    var arr1 = [10,20,30];
    var arr2 = [10,20,30];
    var arr3 = arr1;//将arr1的地址拷贝给arr3
    
    console.log ( arr1 == arr2 );//虽然arr1与arr2中的数据是一样,但是它们两个不同的地址
    console.log ( arr3 == arr1 );//true  两者地址是一样
    
    console.log ( [] == [] );//false
    console.log ( {} == {} );//false
    

经典面试题

注意:八种情况转boolean得到false: 0 -0 NaN undefined null '' false document.all()

console.log([] == 0); //true 
  // 分析:(1) [].valueOf().toString() == 0  (2) Number('') == 0  (3) false == 0  (4) 0 == 0
console.log(![] == 0); //true
  // 分析: 逻辑非优先级高于关系运算符 ![] = false (空数组转布尔值得到true)

console.log([] == []); //false
// [] 与右边逻辑非表达式结果比较
//(1) [] == !Boolean([])   (2) [] == !true  (3)[] == false  (4) [].toString() == false  (5)'' == false   (6)Number('0') == Number(false)
console.log([] == ![]); //true

onsole.log({} == {}); //false
// {} 与右边逻辑非表达式结果比较
//(1){} == !{} (2){} == !true  (3){} == false  (4){}.toString() == false  (5)'[object Object]' == false  (6)Number('[object Object]') == false
console.log({} == !{}); //false

变态面试题

 var  a = ???
  if(a == 1 && a == 2 && a == 3 ){
      console.log(1)
  }

//如何完善a,使其正确打印1

//答案
var a = {
  i : 0,    //声明一个属性i
    valueOf:function ( ) {
     return ++a.i;    //每调用一次,让对象a的i属性自增一次并且返回
    }
 }
 if (a == 1 && a == 2 && a == 3){  //每一次运算时都会调用一次a的valueOf()方法
  console.log ( "1" );
 }

[转载]原文链接:https://segmentfault.com/a/1190000018637123

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-58720.html

文章标题:js中比较运算符隐式类型转换

相关文章
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
回到顶部