温故js系列（9）-相等==&严格相等===&代码里的那些判断

libin19890520 发布于2019-08-20 10:22 / 3037人阅读

摘要：业务越复杂，逻辑就越复杂，判断就越多比较判断比较判断是比较两个值，返回一个布尔值，表示是否满足比较条件。对于非布尔值的数据，取反运算符会自动将其转为布尔值。

前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总

欢迎提issues斧正：==========

JavaScript-判断

代码中，多多少少会有判断语句。业务越复杂，逻辑就越复杂，判断就越多

比较判断

比较判断是比较两个值，返回一个布尔值，表示是否满足比较条件。JavaScript一共提供了8个比较运算符，参考我另一篇文章：JavaScript-运算符浅析。

这里主要说一下严格相等运算符和相等运算符的区别：

==相等运算符比较两个值的时候会判断两个值的类型，如果不是同一类型，会强制转换为同一类型进行比较（类型转换参考温故js系列第一篇文章：类型转换）。

而===比较两个值的时候先判断两个值的类型，如果不是同一类型，直接返回false，值类型相同再进行值的比较。

所以，从性能上来说，==会比===多走一条类型转换的路，稍逊一点。从结果上来说，有时候类型转换会给你带来你不想要的比较结果。这也就是为什么都推崇使用===的原因。当然，==在合适的业务场景下使用也是必要的。

严格相等运算符===

        判断                        返回
两个值类型不同                       false
两个值都是null/undefined/true/false  true      
两个值其中之一为NaN                  false
两个值都为数值且值相等                true
两个值都为字符串且值相等              true
两个值都指向同一个引用类型            true

1 === "1" // false
true === true // true
undefined === undefined // true
null === null // true
1 === 1 // true
NaN === NaN  // false
+0 === -0 // true
({} === {}) // false
[] === [] // false
(function (){} === function (){}) // false
var v1 = {};
var v2 = v1;  //两个值引用同一个对象
v1 === v2 // true

严格相等运算符有一个对应的严格不相等运算符（!==），两者的运算结果正好相反

相等运算符==

规则： 

if 相等运算符比较相同类型的数据时，同严格相等运算符
else if 相等运算符比较不同类型的数据时：
原始类型的数据会转换成数值类型，把字符串和布尔值都转为数值，再进行比较
null == undefined  返回true
一个是对象，另一个是数字或者字符串，把对象转成基本类型值再比较
else false

123 == 123; //true
"123" == 123; //true，"123"会转成成数值123
false == 0; //true，false 转成数值就是0
"a" == "A"; //false，转换后的编码不一样
123 == {}; //false，执行toString()或valueOf()会改变
123 == NaN; //false，只要有NaN，都是false
{} == {}; //false，比较的是他们的地址，每个新创建对象的引用地址都不同

null == undefined //true
"NaN" == NaN //false
123 == NaN //false
NaN == NaN //false
false == 0 //true
true == 1 //true
true == 2 //false
undefined == 0 //false
null == 0 //false
"123" == 123 //true
"123" === 123 //false

相等运算符有一个对应的不相等运算符（!=），两者的运算结果正好相反

!!判断

!!相当于Boolean，写代码时用!!转化为Boolean类型做判断非常好用

!!"xzavier";   // true
!!"";          // false
!!"0";         // true
!!"1";         // true
!!"-1"         // true
!!0            // false
!!undefined    // false
!!null         // false
!!NaN          // false
!!{};          // true
!!{name:"xz"}  // true
!![];          // true
!![1,2,3];     // true
!!true;        // true

!判断

取反运算符 ! 用于将布尔值变为相反值，即true变成false，false变成true。对于非布尔值的数据，取反运算符会自动将其转为布尔值。规则是，以下六个值取反后为true，其他值取反后都为false

undefined  null  false  0(包括+0和-0)  NaN  空字符串("")

!undefined    // true
!null         // true
!false        // true
!0            // true
!NaN          // true
!""           // true    
!54           // false
!"hello"      // false
![]           // false
![1,2,3]      // false
!{}           // false
!{name:"xz"}  // false

[]和{}判断

对于[]和{}，我们在业务代码中肯定会对其做判断，如上

!!{};          // true
!!{name:"xz"}  // true
!![];          // true
!![1,2,3];     // true

不能用!!和!做判断，对于数组，我们用它的length属性做判断

[].length       // 0 false
[1,2,3].length  // 3 true

对象的话，可以采用jQuery的方法$.isEmptyObject(obj)，也可以js封装一个方法，就模仿jQuery 写一个

function isEmptyObject(obj) {
    var name;
    for ( name in obj ) {
        return false;
    }
    return true;
}
isEmptyObject({});  //true
isEmptyObject({name: "xzavier"});  false

推荐一个工具库underscore，它也有个方法isEmpty(object)

const _ = require("underscore");
_.isEmpty({});  // true

&&判断

用在条件表达式中，规则是：

num1 && num2
true    true    true
true    false   false
false   true    false
false   false   false

用在语句中，规则是：

result = expression1 && expression2

如果expression1的计算结果为false，则result为expression1。否则result为expression2

(1 - 1) && ( x += 1)  // 0
(2 > 1) && ( 5 + 5)   // 10
(2 + 1) && ( 5 + 5)   // 10

||判断

用在条件表达式中，规则是：

num1 || num2
true    true     true
true    false    true
false   true     true
false   false    false

用在语句中，规则是：

如果第一个运算子的布尔值为true，则返回第一个运算子的值，且不再对第二个运算子求值
如果第一个运算子的布尔值为false，则返回第二个运算子的值

||运算符一般在业务代码中做条件表达式判断和容错处理，我们在取数据时取不到的情况下，又不能影响后面的业务代码，就需要进行容错。||就是一个非常好的容错写法，相当于提供一个备用数据。

var data = undefined || backup_data;  //请求出错，数据为undefined时，就去备用数据backup_data

三目判断

规则：

condition ? expression1 : expression2;

function absN(xzavier) {
    return xzavier > 0 ? xzavier : -xzavier;
}
absN(-123);  //123
absN(123);  //123

如果第一个表达式的布尔值为true，则返回第二个表达式的值，否则返回第三个表达式的值。

判断暂时写到这儿，判断是我们代码生涯中时时刻刻接触的，更多的attention在接触研究过会更新于此...

休息一刻，约好要去打篮球了。。。

云服务器 GPU云服务器 js判断数据相等相等判断问题 jquery判断相等 jquery判断值相等

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

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

温故js系列（18）-对象&amp;对象使用

摘要：对象创建字面量方式构造函数方式也可以这样不过这样的话，为何不选择字面量方式字面量方式和方式的写法是等价的，返回的结果是同种类的对象。构造函数产生实例时，实例通过其对应原型对象的访问对应的构造函数对象。前端学习：教程&模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试资源汇总欢迎提issues斧正：对象&对象使用 Object对象在 JavaScript 中，对...

keke 2019-08-22 10:49 评论0 收藏0
解析JavaScript判断两个值相等的方法

　　本篇文章主要是讲述在JavaScript中判断两个值相等，不要认为很简单，要注意的是在JavaScript中存在4种不同的相等逻辑。　　ECMAScript 是 JavaScript 的语言规范，在ECMAScript 规范中存在四种相等算法，如下图所示：　　上图中每个依次写下来，很多前端应该熟悉严格相等和非严格相等，但对于同值零和同值却不熟悉，现在就依次下面四种方法。　　同值　　同值零　　非...

3403771864 2022-11-19 17:08 评论0 收藏0
温故js系列（1）-基本数据类型和引用数据类型判断&amp;存储访问&amp;类型转换

摘要：引用数据类型引用数据类型值指保存在堆内存中的对象。访问方式是按引用访问。数据类型检测操作符是检测基本类型的最佳工具。未定义布尔值字符串数值对象或函数用于检测引用类型，可以检测到它是什么类型的实例。前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总欢迎提issues斧正：数据类型回味，无穷！数据类型定义数据类型分类基本数据...

jone5679 2019-08-19 18:41 评论0 收藏0
JavaScript中让x==1&&x==2&&x==3等式成立演示

　　要是别人问您：如何让 x 等于 1 且让 x 等于 2 且让 x 等于 3 的等式成立？　　咋地，知道如何实现？想骂人有不　　现在我们一起来分解思路：　　我们先来讲讲宽松相等== 和严格相等 ===，这两个都能用来判断两个值是否相等，但们明确上文提到的等于指的是哪一种，二者的区别看下：　　(1) 这两个基础直接的区别：　　(1.1) 不同类型间比较，== 比较转化成同一类型后的值看值是否相等，...

3403771864 2022-10-16 17:23 评论0 收藏0
魔幻语言 JavaScript 系列之 a == true &amp;&amp; a == fals

摘要：稍后我们再详细剖析，接下来先看一个问题。还内建了一些在之前没有暴露给开发者的，它们代表了内部语言行为。使用，可能有不少朋友一开始就想到这种方式，简单贴一下阅读更多在 JavaScript 环境下，可以让表达式 a == true && a == false 为 true 吗？就像下面这样，可以在控制台打印出 ’yeah: // code here if (a == true && ...

BDEEFE 2019-08-22 16:00 评论0 收藏0