• 作者:老汪软件技巧
  • 发表时间:2024-08-31 17:02
  • 浏览量:

简单介绍

在JavaScript中,==(相等运算符)和 ===(恒等运算符)都用来比较两个值是否相等,但它们之间有一个重要的区别:类型处理。

1."==" 只判断等号两边的值是否相等,而不判断类型是否相同。值相同则返回 true

2."===" 既要判断值是否相等,也要判断类型是否相同,即全等才能返回 true

==

先把等号两侧的值转化为基本数据类型,如果两侧的值基本数据类型不同,转化为数字再进行比较,如果相同,直接比较

下面是一些基本数据类型转化为Number的结果


 // 字符串转数字
let str = "123";
let numStr = Number(str); // 123
console.log(numStr); // 输出: 123
// 布尔值转数字
let boolTrue = true;
let numBoolTrue = Number(boolTrue); // 1
console.log(numBoolTrue); // 输出: 1
let boolFalse = false;
let numBoolFalse = Number(boolFalse); // 0
console.log(numBoolFalse); // 输出: 0
// 数字本身不需要转换
let num = 123;
let numNum = Number(num); // 123
console.log(numNum); // 输出: 123
// 空字符串和包含空格的字符串
let emptyStr = "";
let numEmptyStr = Number(emptyStr); // 0
console.log(numEmptyStr); // 输出: 0
let spaceStr = " ";
let numSpaceStr = Number(spaceStr); // 0
console.log(numSpaceStr); // 输出: 0
// 包含非数字字符的字符串
let invalidStr = "abc123";
let numInvalidStr = Number(invalidStr); // NaN
console.log(numInvalidStr); // 输出: NaN

注意:null 和 undefined 比较特殊,要比较相等性之前,不能将 null 和 undefined 转换成其他任何值

undefined 和 null 互相比较返回 true,和自身比较也返回 true,其他情况返回 false


    undefiend == undefined  // true
  undefined == null  // true
  null == null  // true
  undefined == 其他值  // false
  null == 其他值  // false

null == undefined第一种情况: == 两边都是基本数据类型,两边都转化为数字然后进行比较字符串与数字比较(等号两侧转化为数字,再比较)

  
  100 == "100"  ==>  100 == 100  // true
  100 == "99"  ==>  100 == 99  // false
  100 == "abc"  ==>  100 == NaN  // false
  1 == "abc"  ==>  1 == NaN  // false
  1 == ""  ==>  1 == 0  // false

2.字符串与布尔值比较(等号两侧转换为数字,再比较)


    
  "abc" == true  ==>  NaN == 1  // false
  "abc" == false  ==>  NaN == 0  // false
  "" == true  ==>  0 == 1  // false
  "" == false  ==>  0 == 0  // true

3.数字与布尔值比较(等号两侧转换为数字,再比较)


     1 == true  ==>  1 == 1  // true
  0 == true  ==>  0 == 1  // false
  100 == true  ==>  100 == 1  // false
  1 == false  ==>  1 == 0  // false
  0 == false  ==>  0 == 0  // true
  100 == false  ==>  100 == 0  // false

第二种情况:== 两边都是引用数据类型1.等号两侧都为引用类型时

(由于引用类型保存的是对象(包括数组,函数)的地址值,所以地址值不同的,返回的都是 false)

等号两侧为相同的引用数据类型时

[1,2] == [1,2]//false

[1,2] == [2,3]//false

{x:1} == {x:1}//false

{x:1} == {y:1}//false

等号两侧为不同的引用数据类型时

[1,2] == {y:1}//false

两边都是引用数据类型的时候,比的是地址,地址,地址(重要的事情说三遍)是否相同第三种情况:== 两边一边是基本数据类型,一边是是引用数据类型拿数组来举例子


    [] == 0  ==>  0 == 0  // true  
  [] == '0'  ==>  '' == '0'  // false
  [] == ''  ==>  '' == ''  // true

因为数组没有value of 方法,所以会调用toString()方法,[]调用toString()得到 ' '

第一个判断: '' == 0 ,

_两转化g_数据的基本类型

这个时候两边都是基本数据类型,所以会发生隐式类型转换,变成 0 ==0 true

第二个判断: '' == '0',一个空字符串,一个字符串0fasle第三个判断: '' == '',两个一摸一样true拿对象来举例

当一个基本数据类型与一个引用数据类型(如对象)进行比较时,也是如此


  let objNum = { value: 42 };
// 没有 valueOf 或 toString 方法
console.log(num == objNum); // false
// 实现 valueOf 方法
objNum.valueOf = function() {
return this.value;
};
console.log(num == objNum); // true
// 删除 valueOf 方法,实现 toString 方法
delete objNum.valueOf;
objNum.toString = function() {
return this.value.toString();
};
console.log(num == objNum); // true
// 没有 valueOf 和 toString 方法
delete objNum.toString;
console.log(num == objNum); // false

下面是一些例子


 let num = 42;
// 示例对象
let obj1 = {};
let obj2 = { value: 42 };
let obj3 = { value: 42, valueOf: function() { return this.value; } };
let obj4 = { value: 42, toString: function() { return this.value.toString(); } };
let obj5 = { value: 42, valueOf: function() { return this.value; }, toString: function() { return this.value.toString();
} };
// 基本数据类型
let num = 42;
let str = "42";
let bool = true;
// 比较
console.log(num == obj1); // false
console.log(str == obj1); // false
console.log(bool == obj1); // false
console.log(num == obj2); // false
console.log(str == obj2); // false
console.log(bool == obj2); // false
console.log(num == obj3); // true
console.log(str == obj3); // true
console.log(bool == obj3); // false
console.log(num == obj4); // true
console.log(str == obj4); // true
console.log(bool == obj4); // false
console.log(num == obj5); // true
console.log(str == obj5); // true
console.log(bool == obj5); // false

1. 没有valueOf和toString方法

当对象没有自定义 valueOf 和 toString 方法时,默认情况下会调用 toString 方法。

let obj1 = {};
console.log(num == obj1); // false
console.log(str == obj1); // false
console.log(bool == obj1); // false
// obj1.toString() 默认返回 "[object Object]"
console.log(obj1.toString()); // "[object Object]"
console.log(num == "[object Object]"); // false
console.log(str == "[object Object]"); // false
console.log(bool == "[object Object]"); // false

2. 只有value属性

当对象只有 value 属性时,默认情况下会调用 toString 方法。


let obj2 = { value: 42 };
console.log(num == obj2); // false
console.log(str == obj2); // false
console.log(bool == obj2); // false
// obj2.toString() 默认返回 "[object Object]"
console.log(obj2.toString()); // "[object Object]"
console.log(num == "[object Object]"); // false
console.log(str == "[object Object]"); // false
console.log(bool == "[object Object]"); // false

3. 实现valueOf方法

当对象实现了 valueOf 方法时,会优先调用 valueOf 方法,并使用其返回的基本类型值进行比较。

 let obj3 = { value: 42, valueOf: function() { return this.value; } };
console.log(num == obj3); // true
console.log(str == obj3); // true
console.log(bool == obj3); // false
// obj3.valueOf() 返回 42
console.log(obj3.valueOf()); // 42
console.log(num == 42); // true
console.log(str == 42); // true
console.log(bool == 42); // false

4. 实现toString方法

如果对象没有 valueOf 方法,但实现了 toString 方法,则会调用 toString 方法,并使用其返回的字符串进行比较。


 let obj4 = { value: 42, toString: function() { return this.value.toString(); } };
console.log(num == obj4); // true
console.log(str == obj4); // true
console.log(bool == obj4); // false
// obj4.toString() 返回 "42"
console.log(obj4.toString()); // "42"
console.log(num == "42"); // true
console.log(str == "42"); // true
console.log(bool == "42"); // false

实现valueOf和toString方法

当对象同时实现了 valueOf 和 toString 方法时,会优先调用 valueOf 方法,并使用其返回的基本类型值进行比较。如果 valueOf 方法返回的不是基本类型,则会调用 toString 方法。

 let obj5 = { value: 42, valueOf: function() { return this.value; }, toString: function() { return this.value.toString();
} };
console.log(num == obj5); // true
console.log(str == obj5); // true
console.log(bool == obj5); // false
// obj5.valueOf() 返回 42
console.log(obj5.valueOf()); // 42
console.log(num == 42); // true
console.log(str == 42); // true
console.log(bool == 42); // false

===

首先,会对两边的类型进行判断,如果两边数据类型不相同,直接返回false

因为 === 不会发生隐式转换,所以很容易判断,这里就不过多解释

在这里就强调一点

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

=== 不仅比较值,还比较类型。undefined 和 null 的类型不同:

因此,尽管它们在某些上下文中被认为是等价的,但在严格比较下,它们的类型不同,所以 null === undefined 返回 false。

总结

在JavaScript中,==(非严格等于)和===(严格等于)运算符用于比较两个值是否相等。它们之间的主要区别在于是否进行类型转换以及如何处理不同类型的值。== 在比较时会进行类型转换,而 === 要求值和类型都必须完全相同。