一文总结JS中逻辑运算符的特点

2024-12-02 17:33:08

Js中的逻辑运算符

JavaScript中有三个逻辑运算符，&&与、||或、!非，虽然他们被称为逻辑运算符，但这些运算符却可以被应用于任意类型的值而不仅仅是布尔值，他们的结果也同样可以是任意类型。

描述

如果一个值可以被转换为true，那么这个值就是所谓的truthy，如果可以被转换为false，那么这个值就是所谓的falsy。会被转换为false的表达式有: null、NaN、0、空字符串、undefined。

尽管&&和||运算符能够使用非布尔值的操作数，但它们依然可以被看作是布尔操作符，因为它们的返回值总是能够被转换为布尔值，如果要显式地将它们的返回值或者表达式转换为布尔值，可以使用双重非运算符即!!或者Boolean构造函数。

&&: AND，逻辑与，expr1 && expr2，若expr1可转换为true则返回expr2，否则返回expr1。
||: OR，逻辑或，expr1 || expr2，若expr1可转换为true则返回expr1，否则返回expr2。
!: NOT，逻辑非，!expr，若expr可转换为true则返回false，否则返回true。

JS逻辑运算符的特点

首先说一下，其他数据类型转换为布尔类型的规则: null、undefined、0、NaN、空字符串转换为false，其他转化为 true。

1. 取反 !

首先把数据转化为布尔值，然后取反，结果为 true 或 false。

<script type="text/javascript">
var a = [1,2,3];
var b = "hello";
var obj = new Object();
var d;

console.log(!"");   //true
console.log(!d);    //true
console.log(!a);    //false
console.log(!b);    //false
console.log(!obj);  //false
</script>

2. 逻辑与 &&

JavaScript 中逻辑与和其他语言不太一样，如果第一个操作数是 true(或者能够转为 true)，计算结果就是第二个操作数，如果第一个操作数是 false，结果就是 false（短路计算），对于一些特殊数值不遵循以上规则。(个人理解为:如果运算的第一个操作数为true,则返回第二个操作数,反之则返回第一个操作数)

<script type="text/javascript">
var a = [1,2,3];
var b = "hello";
var obj = new Object();
var d;

console.log(true && 10);            //第一个操作数是true，结果是第二个操作，也就是10
console.log(false && b);            //第一个操作数是false，结果flase
console.log(100 && false);          //第一个操作数是100，结果flase
console.log(undefined && false);    //第一个操作数是undefined，结果undefined
console.log(NaN && false);          //第一个操作数是NaN，结果NaN
console.log(null && false);         //第一个操作数是null，结果null
console.log('' && false);           //第一个操作数是空串，结果空串
console.log(0 && 100);              //结果是0
console.log(5 && 100);              //100
console.log(a && b);                //hello
console.log(obj && 200);            //200
</script>

3. 逻辑或 ||

如果第一个操作数不是 false，结果就是第一个操作数，否则结果是第二个操作数。如果第一个操作数能够转为 true，结果就是第一个操作数(个人理解为:如果运算的第一个操作数为 true,则返回第一个操作数,反之则返回第二个操作数)

<script type="text/javascript">
var a = [1,2,3];
var b = "hello";
var obj = new Object();
var d;

console.log(true || 10);        //第一个操作数是true，结果是第一个操作，也就是true
console.log(false || b);        //第一个操作数是false，结果是第二个操作数b
console.log(100 || false);      //第一个操作数是100，结果100
console.log(undefined || 9);    //第一个操作数是undefined转false，结果9
console.log(NaN || false);      //第一个操作数是NaN转false，结果第二个操作数
console.log(null || a);         //第一个操作数是null转false，结果a
console.log('' || false);       //第一个操作数是空串转false，结果第二操作数
console.log(0 || 100);          //结果是100
console.log(5 || 100);          //5
console.log(a || b);            //a
console.log(obj || 200);        //obj
</script>

总结

到此这篇关于JS中逻辑运算符特点的文章就介绍到这了,更多相关JS逻辑运算符特点内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

深入了解JavaScript的逻辑运算符（与、或）

十二月已经过半,冬季是一个美妙的季节,寒冷的空气逼得人们不得不躲在安逸舒适的环境里生活.冬季会给人一种安静祥和的氛围,让人沉浸在其中,仿佛是一个旧的阶段的结束,同时也是一个新的阶段的开始.这么说来,西方和中国的圣诞节和春节都选择在了冬季也不是没有道理,在一年中最寒冷的时候,人们拥簇在温暖的环境里,彼此诉说着过去一年里自己的成就,展望着新的一年里美好的愿望,相互挂念的人团聚,天气的寒冷和人情的温暖形成了强烈的对比.而在天寒地冻之中,仿佛更有利于人们思考,去探寻知识的真谛. 这次想分享的是 JS 当
js比较和逻辑运算符的介绍

比较和逻辑运算符用于测试 true 或 false. 比较运算符比较运算符在逻辑语句中使用,以测定变量或值是否相等. 给定 x=5,下面的表格解释了比较运算符: 运算符描述例子 == 等于 x==8 为 false === 全等(值和类型) x===5 为 true:x==="5" 为 false != 不等于 x!=8 为 true > 大于 x>8 为 false < 小于 x<8 为 true >= 大于或等于 x>=8 为 false &
JS逻辑运算符短路操作实例分析

本文实例分析了JS逻辑运算符短路操作.分享给大家供大家参考,具体如下: js逻辑运算符有三个:逻辑非!.逻辑与&&.逻辑或||. 所谓短路操作就是,当&&的第一个操作数的值是false时,直接返回第一个操作数的值,不再对第二个操作数进行计算: <script> var bar1 = 0&&c; console.log('bar1====='+bar1); //bar1=====0 var foo1 = 5&&c; console.
js的逻辑运算符 ||

因而查询一下js的介绍: 1.逻辑或运算符||: 当运算符||的两个运算数都是布尔值,它对这两个运算数执行布尔OR操作. 它先计算第一个运算数,如果这个表达式的值可以被转换成true,那么它就返回左边这个表达式的值.否则计算第二个运算数即使||运算符的运算数不是布尔值,任然可以将它看作布尔OR运算,因为无论它返回的值是什么类型,都可以被转换为布尔值. 而且另一方面,对非布尔型的运算数使用了||,这是利用了它对非布尔型的值会将其返回的特性.该运算符的这一用法通常是选取一组备选值中的第一个定义了的
一文总结JS中逻辑运算符的特点

目录 Js中的逻辑运算符描述 JS逻辑运算符的特点 1.取反! 2.逻辑与&& 3.逻辑或|| 总结 Js中的逻辑运算符 JavaScript中有三个逻辑运算符,&&与.||或.!非,虽然他们被称为逻辑运算符,但这些运算符却可以被应用于任意类型的值而不仅仅是布尔值,他们的结果也同样可以是任意类型. 描述如果一个值可以被转换为true,那么这个值就是所谓的truthy,如果可以被转换为false,那么这个值就是所谓的falsy.会被转换为false的表达式有: null.
js中的 || 与 && 运算符详解

js中逻辑运算符在开发中可以算是比较常见的运算符了,主要有三种:逻辑与&&.逻辑或||和逻辑非!. 当&&和|| 连接语句时,两边的语句会转化为布尔类型(Boolean),然后再进行运算,具体的运算规则如下: 1.&& 1.1两边条件都为true时,结果才为true: 1.2如果有一个为false,结果就为false: 1.3当第一个条件为false时,就不再判断后面的条件注意:当数值参与逻辑与运算时,结果为true,那么会返回的会是第二个为真的值:如果结
一文详解JS中的事件循环机制

目录前言 1.JavaScript是单线程的 2.同步和异步 3.事件循环前言我们知道JavaScript 是单线程的编程语言,只能同一时间内做一件事,按顺序来处理事件,但是在遇到异步事件的时候,js线程并没有阻塞,还会继续执行,这又是为什么呢?本文来总结一下js 的事件循环机制. 1.JavaScript是单线程的 JavaScript 是一种单线程的编程语言,只有一个调用栈,决定了它在同一时间只能做一件事.在代码执行的时候,通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行.在
一文带你搞懂JS中六种For循环的使用

目录一.各个 for 介绍 1.for 2.for ... in 3.for ... of 4.for await...of 5.forEach 6.map 二.多个 for 之间区别 1.使用场景差异 2.功能差异 3.性能差异三.for 的使用 for 循环在平时开发中使用频率最高的,前后端数据交互时,常见的数据类型就是数组和对象,处理对象和数组时经常使用到 for 遍历,因此下班前花费几分钟彻底搞懂这 5 种 for 循环.它们分别为: for for ... in for ... o
如何在JS中实现相互转换XML和JSON

开发中有时候会遇到XML和JSON相互转换,要求在JS中使用,网上找了好多,竟然每一个好用的,要么缺胳膊少腿,要么词不达意,太没天理了,果断自己实现一个. JSON与XML的区别比较 1.定义介绍 (1).XML定义扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言. XML使用DTD(document type definition)文档类
JS中Eval解析JSON字符串的一个小问题

之前写过一篇关于 JSON 的介绍文章,里面谈到了 JSON 的解析.我们都知道,高级浏览器可以用 JSON.parse() API 将一个 JSON 字符串解析成 JSON 数据,稍微欠妥点的做法,我们可以用eval() 函数. JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包. JSON的规则很简单:
JS中Location使用详解

javascript中location地址对象描述的是某一个窗口对象所打开的地址.要表示当前窗口的地址,只需要使用"location"就行了:若要表示某一个窗口的地址,就使用"<窗口对象>.location". 一.JS中Location的含义 1.Location 对象存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址.它的 href 属性存放的是文档的完整 URL,其他属性则分别描述了 URL 的各个
浅谈js中几种实用的跨域方法原理详解

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 一.通过jsonp跨域在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同
浅谈js中字符和数组一些基本算法题

最近在刷 fcc的题,跟升级打怪一样,一关一关的过,还挺吸引我的.今天抽时间把 Basic Algorithm Scritping 这部分题做了,根据一些提示,还是比较简单的.有些题的处理方式方法,我想值得借鉴.比如在项目中有时候要处理一个字符,如果想不到一些相关的方法,还挺费事的,所以,在此记录下来,如果以后遇到一些字符或者数组处理,可以来翻翻这篇文章,希望以此得到一些提示而不是去翻文档. 看到此博文的博友,有更好更简单的代码或者好的想法,请留言交流(我一直觉得只有学习别人的优秀代码才能进
JS中的三个循环小结

一.for循环四部曲: 1.设置初始值 var i = 0 2.设置循环执行条件 i < 5 3.执行循环体中的内容{ [循环体] } 包起来的部分 4.每一轮循环完成后都执行我们的i++累加操作 for(var i = 0;i<5;i++){ console.log(i) } break/continue:在循环体中遇到这两个关键字,循环体中的后面的代码就不在执行了 break:在循环体中,出现break,整个循环就直接的结束了,i++最后的这个累加的操作也不执行了 continue:在循