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

lanffy 发布于2019-08-23 16:21 / 2342人阅读

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

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

全等运算符 ===

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

先判断类型,如果类型不是同一类型的话直接为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 为示例)

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

console.log ( null == undefined );//true
console.log ( null == null );//true
console.log ( undefined == undefined );//true

x或y是NaN : NaN与任何数字都不等
规则：没有隐式类型转换，无条件返回false

console.log ( NaN == NaN );//false

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

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

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

{{BANNED}}面试题

 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" );
 }

云服务器 GPU云服务器隐式类型转换 js中数据类型转换 js 中各种数据类型的比较 php中比较运算符

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102942.html

聊一聊 JS 中的『隐式类型转换』

摘要：具体的行为取决于参数的类型。说到，就不得不提一下方法，方法自带隐式类型转换，该方法在测试其参数之前，会先调用方法将其转换为数字。全等运算符会先进行数据类型判断，并且不会发生隐式类型转换。类型转换还不行？还非得隐式？这是什么高级玩意？废话不多说，我们先上一盘?，额，不对，先看一个例子吧。 3 + true 实际上在大多数编程语言中，都会认为上面这个表达式是错误的。因为布尔表达式与算术...

Jenny_Tong 2019-08-19 17:39 评论0 收藏0
深入js隐式类型转换

摘要：结合实际中的情况来看，有意或无意中涉及到隐式类型转换的情况还是很多的。此外当进行某些操作时，变量可以进行类型转换，我们主动进行的就是显式类型转换，另一种就是隐式类型转换了。前言相信刚开始了解js的时候，都会遇到 2 ==2，但 1+2 == 1+2为false的情况。这时候应该会是一脸懵逼的状态，不得不感慨js弱类型的灵活让人发指，隐式类型转换就是这么猝不及防。结合实际中的情况来看...

tomato 2019-08-22 17:27 评论0 收藏0
17道面试题彻底理解 JavaScript 中的类型转换

摘要：隐式类型转换通常在逻辑判断或者有逻辑运算符时被触发。一元加号执行字符串的类型转换。逻辑运算符和将值转为型，但是会返回原始值不是。计算从表达式开始，该表达式通过方法转换为空字符串，然后转换为。总结查看原文关注每日一道面试题详解类型转换是将值从一种类型转换为另一种类型的过程（比如字符串转数字，对象转布尔值等）。任何类型不论是原始类型还是对象类型都可以进行类型转换，JavaScript 的...

SKYZACK 2019-08-26 10:36 评论0 收藏0
掌握 Javascript 类型转换：隐式转换救救孩子

摘要：看下面的代码和会对操作数执行条件判断，如果操作数不是布尔值，会先执行类型转换后再执行条件判断。大家记住这个规则布尔值如果与其他类型进行抽象比较，会先用将布尔值转换为数字再比较。在上一篇中我们聊过了 JS 类型转换的规则和我发现的一些常见书籍中关于类型转换的一些小错误，当碰到显示类型转换的时候大家可以按照这些规则去拆解出答案。但 JS 中存在一些很隐晦的隐式类型转换，这一篇就来谈下我对...

weapon 2019-08-23 18:05 评论0 收藏0