javascript中!=、!==、==、===操作符总结

转载:https://www.cnblogs.com/weiqinl/p/9049745.html

JavaScript 有两种比较方式:严格比较运算符和转换类型比较运算符。
在相等运算符中对应 === 、!==和 ==!=

先举个栗子

var str = ‘1‘
var num0 = 0
var num1 = 1
var blT = true
var blF = false
var nul = null
var und = undefined
console.log(str == num1) // true
console.log(str == blT) // true
console.log(blT == num1) // true
console.log(blF == num0) // true
console.log(nul == und) // true

console.log(str === num1) // false
console.log(str === blT) // false
console.log(blT === num1) // false
console.log(blF === num0) // false
console.log(nul === und) // false

相等操作符(==)会为两个不同类型的操作数进行类型转换,然后进行严格比较。
严格相等操作符(===),一般也叫做全等操作符。会先判断类型,再比较值是否相等。

类型转换

类型转换的途径:

类型(x) 类型(y) 结果
undefined null true
字符串 数字 toNumber(x) == y
布尔值 数字 toNumber(x) == y
对象 字符串/数字 toPrimary(x) == y

对于两个类型不同的操作数比较。

  • 字符串、布尔值都会先转换成数字类型,再做比较。toNumber(x)
  • 对于复杂数据类型,会先将其转换为原始值,之后,再根据上一个规则比较。
    x = toPrimary(obj) ==> toNumber(x)
    而,如何转成原始类型值呢,一般都会自动通过自带的valueOf()方法或者toString()方法实现。如果转换之后非原始值,比较操作会报类型错误。
具体过程:
先执行`valueOf`方法,如果该方法返回一个原始值,则将这个原始值转换为数字,并返回这个数字,转换过程结束。如果返回非原始值,继续下一步。
否则,执行`toString`方法,如果该方法返回一个原始值,则将这个原始值转换为数字,并返回这个数字,转换过程结束。如果返回非原始值 ,继续下一步。
以上都没有成功转换为原始值,则抛出一个类型转换错误的异常。
tips: 每个方法只执行一次。不会将方法返回的非原始类型值继续转换。

举个例子说明下,参考于知乎:

原始数据类型(string,number,boolean,null, undefined,symbol)。
复杂数据类型(Object, Function, Array, Date, ...)
基础数据类型的比较,是值的比较,Object对象的比较,则是引用的比较

相等操作符(==),经过类型转换之后,才比较他们的值或者对象值。
对于全等操作符(===),等号两边的值和类型,必须完全相等。

为什么建议使用 ===

1. review代码时候,增加理解时间

在使用了 ==的表达式中,我们需要先理解作者的意图。

  • 想当然的以为都可以。
  • 确实需要通过类型转换来判断。
  • 不应该类型转换,但是写错了。

2. 会判断错误

let num = 2
let obj = {
  valueOf: function() {
    return 2
  }
}
console.log(obj == 2)

输出true
我们本意是这两者!=,而这里得到的结果是==,这不是我们想要的结果。

3. 会产生异常

let num = 2
let obj = {
  valueOf: function() {
    return {}
 },
 toString: function() {
  return {}
 }
}
console.log(obj === 2)
console.log(obj == 2)

第一行输出:false
第二行输出错误提示:Uncaught TypeError: Cannot convert object to primitive value

通过前面类型转换,可以得知,一般情况下,对象会先转换为原始值。
而其过程是通过自带的valueOf()/toString()先转换为primitive value,再和其他值做比较。
而在这里,我们手动将obj对象的valueOf()/toString()覆盖了,导致无法实现转换为原始值。

一般情况下,建议使用=== ,除非你了解,确实需要类型转换,才使用 ==

条件表达式语句(if、三目运算等)

if (condition) {
    statement1
} else {
    statement2
}

以上是if语句的基础用法。通过判断condition的布尔值,来决定执行statement1代码块1,还是执行statement2代码块2。
先看下面的例子:

var s = ‘str‘
var blT = true
var blF = false
if (s) {
    console.log(‘正确‘)
} else {
    console.log(‘错误‘)
}
console.log(s == blT)

以上语句,得到的结果是

正确
false

为什么if语句,会执行第一个代码块。而s == blT 却是false呢?
其实,这个就涉及到类型转换的问题了。
输出“正确”

  • if语句的条件表达式,会自动调用Boolean()转换函数,将这个表达式的结果转换为一个布尔值。
  • Boolean(‘str‘) = true

输出false

  • 根据在上面类型转换那部分所讲,会先调用Number()转换函数转换为数值,之后再比较。
  • Number(‘str‘) = NaN
  • Number(true) = 1

图表举例列出常见对象相等情况

普通相等
完全相等

【完】

原文地址:https://www.cnblogs.com/BluceLee/p/9050260.html

时间: 2024-11-09 00:45:55

javascript中!=、!==、==、===操作符总结的相关文章

JavaScript中+操作符的特殊性

在JavaScript中+操作符有两个作用: (1)加法运算 (2)字符串连接 在使用+操作符进行运算时,当+操作符两边都是数值类型的时候,进行加法运算; 当+操作符两边有任意一边是字符串,则进行字符串连接操作.(在进行计算时,数字字符串不会自动转换为数字) 还有一点需要注意的是:表单里输入的任何内容都会被转换为字符串,即使输入的是数字,也会被转换成数字字符串,所以当我们拿到表单里的内容(这里仅说明数字字符串),需要显式的转换一下(比如:parseInt()等方式). 原文地址:https://

javascript中的操作符详解1

好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解或曲解他们的用途,本章将会带领初学者们一起来学习一下javascript的几个常用操作符:typeof.in.delete.new. 二.学习目标 1. 深入了解javascript操作符:typeof.in.delete.new的功能及用法. 2. 剖析根本,掌握这些常用的操作符的运用场景,活学活

为什么不要在 JavaScript 中使用位操作符?

如果你的第一门编程语言不是 JavaScript,而是 C++ 或 Java,那么一开始你大概会看不惯 JavaScript 的数字类型.在 JavaScript 中的数字类型是不区分什么 Int,Float,Double,Decimal 的.咳咳,我说的当然是在 ES6 之前的 JS,在 ES6 的新标准中提出了像 Int8Array 这样新的数据类型.不过这不是本文叙述的重点,暂且就不谈啦.本文将更着重地谈 JS 的数字类型以及作用于它的位操作符,而关于包装对象 Number 的更多了解可以

javascript 中 in操作符

in in 操作检查对象中是否有名为 property 的属性.也可以检查对象的原型,以便知道该属性是否为原型链的一部分. 对于一般的对象属性需要用字符串指定属性的名称 ? 1 2 3 var mycar = {make: "Honda", model: "Accord", year: 1998}; "make" in mycar  // returns true "model" in mycar // returns tru

javascript中的递增递减操作符

javascript中递增递减属于一元操作符,所谓一元操作符,即只能操作一个值的操作符. 递增和递减操作符各有两个版本:前置型和后置型.顾名思义,前置型应该位于要操作的变量之前,而后置型应该位于要操作的变量之后. 01.前置型操作符使用: var age=29; ++age; //等于30 等同于 var age=29; age=age+1; //等于30 执行前置递增和递减操作时,变量的值都是在语句被求值以前改变的. var num1=2; var num2=20; var num3=--nu

PHP和Javascript中的逻辑操作符&&和||的比较

几乎所有的语言都有&&(且)和||(或)的逻辑操作符,&&用于判断多个表达式的时候,如果为真(true),则继续判断下一个表达式,如果为假(false),则停止表达式解析,即只有当所有表达式都为真(true),才返回真(true),如果某一个表达式为假(false),则结果就(false):而||(或)恰好相反,也是对多个表达式依次判断,如果表达式为真(true),则终止表达式的逻辑判断,其结果为真(true).这两个逻辑操作符都存在短路这个行为: &&判断

javascript中神奇的(+)加操作符

javascript是一门神奇的语言,这没神奇的语言中有一个神奇的加操作符. 常用的加操作符我们可以用来做: 加法运算,例如:alert(1+2); ==>3 字符串连接,例如:alert(“a”+”b”);==>”ab” 高级一点的还有“+=”,也是做以上两种操作的. 昨天在javascript丛林群里问了问题:怎么把“2000-09-11 19:22”这个日期格式字符串转换成毫秒数? 斩梦人天天马上回答我: +new Date(‘2000-09-11 19:22′),试了一下不行,正确的应

【转载】在JavaScript中使用操作符void返回undefined

在JavaScript中使用操作符void返回undefined技术 maybe yes 发表于2014-12-30 18:45 原文链接 : http://blog.lmlphp.com/archives/53  来自 : LMLPHP后院 在 JavaScript 函数中返回 undefined 的同时执行一个表达式,可以使用 void 关键字.大家比较熟悉的 void 的用法一般都是在链接的 href 属性中,可以屏蔽<a>标签的默认行为.请看下面的代码片段: <script>

JavaScript中逻辑操作符“==”与“===”的区别

Summary JavaScript中,逻辑操作符“===”会先检查操作数的数据类型,对不同的数据类型会返回false. 而“==”对不同类型的操作数进行比较时,会进行类型转换后再比较. Description 在JavaScript中进行判断的两种逻辑操作符: == (相等) === (严格相等/全等) 由于JavaScript是弱类型的脚本语言(weakly typed),用于作比较的两个操作数的类型允许不一致.而这两个逻辑操作符最大的区别在于对操作数类型的容忍度. 即:如果两个操作数的数据

javascript中new操作符的原理

javascript中的new是一个语法糖,对于学过c++,java 和c#等面向对象语言的人来说,以为js里面是有类和对象的区别的,实现上js并没有类,一切皆对象,比java还来的彻底 new的过程实际上是创建一个新对象,把新象的原型设置为构造器函数的原型,在使用new的过程中,一共有3个对象参与了协作,构造器函数是第一个对象,原型对象是二个,新生成了一个空对象是第三个对象,最终返回的是一个空对象,但这个空对象不是真空的,而是已经含有原型的引用(__proto__) 步骤如下: (1)