Js中的逻辑运算符
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
。
短路计算
由于逻辑表达式的运算顺序是从左到右,是适用于短路计算的规则的,短路意味着下面表达式中的expr
部分不会被执行,因此expr
的任何副作用都不会生效。造成这种现象的原因是,整个表达式的值在第一个操作数被计算后已经确定了。
(some falsy expression) && (expr)
短路计算的结果为假。(some truthy expression) || (expr)
短路计算的结果为真。
逻辑与&&
示例
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && (3 === 4)); // false
console.log("Cat" && "Dog"); // "Dog"
console.log(false && "Cat"); // false
console.log("Cat" && false); // false
console.log("" && false); // ""
console.log(false && ""); // false
寻找第一个falsy的值
&&
逻辑与运算符的一个很重要的用法就是寻找第一个falsy
的值,并利用短路运算可以避免一些异常。
// 寻找第一个falsy的值
var val0 = 0, val1 = 1, val2 = 2;
var result = val1 && val2 && val0;
console.log(result); // 0
// 配合短路运算
var f0 = () => {
console.log("Call f0");
return 0;
}
var f1 = () => {
console.log("Call f1");
return 1;
}
var f2 = () => {
console.log("Call f2");
return 2;
}
var result = f1() && f0() && f2(); // Call f1 // Call f0 // f2未被调用
console.log(result); // 0
// 避免一些异常
var obj = {f: void 0}
// obj.f(); // Uncaught TypeError: obj.f is not a function
obj && obj.f && obj.f(); // 未抛出异常 // 当有一段链式调用时这很有用
obj?.f?.(); //当然使用ES2020的?.操作符也可以
逻辑或||
示例
console.log(true || true); // true
console.log(false || true); // true
console.log(true || false); // true
console.log(false || (3 === 4)); // false
console.log("Cat" || "Dog"); // "Cat"
console.log(false || "Cat"); // "Cat"
console.log("Cat" || false); // "Cat"
console.log("" || false); // false
console.log(false || ""); // ""
寻找第一个truthy的值
||
逻辑或运算符的一个很重要的用法就是寻找第一个truthy
的值,这个操作的使用频率非常高,通常用来赋值默认值。
// 寻找第一个truthy的值
var val0 = 0, val1 = 1, val2 = 2;
var result = val0 || val1 || val2;
console.log(result); // 1
// 设定默认值
var v1 = void 0;
var result = val0 || 1;
console.log(result); // 1
逻辑非!
示例
console.log(!true); // false
console.log(!false); // true
console.log(!""); // true
console.log(!"Cat"); // false
强制转换类型
使用双重非运算符能够显式地将任意值强制转换为其对应的布尔值,这种转换是基于被转换值的truthyness
和falsyness
的。
console.log(!!true); // true
console.log(!!{}); // true // 任何对象都是truthy的
console.log(!!(new Boolean(false))); // true // 此为对象而不是字面量
console.log(!!false); // false
console.log(!!""); // false
console.log(!!Boolean(false)); // false // 调用构造函数生成字面量
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://juejin.cn/post/6844903991139123208
https://www.cnblogs.com/yf2196717/p/10867864.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators
Js中的逻辑运算符的更多相关文章
- JS中的逻辑运算符&&、||
原文:JS中的逻辑运算符&&.|| 1.JS中的||符号: 运算方法: 只要"||"前面为false,不管"||"后面是true还是false, ...
- js中的逻辑运算符详解(||、&&、!)
视频地址:https://www.bilibili.com/video/BV1Y7411K7zz?p=1 一直以来都没弄清楚js中的逻辑运算符是怎么回事 , 一直都以为他们的用法和java一样 , 今 ...
- JS中的逻辑运算符&&、||,位运算符|,&
1.JS中的||符号: 运算方法: 只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值. 只要“||”前面为true,不管“||”后面是true还是fals ...
- JavaScript基础&实战(2)js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符
文章目录 1.强制类型转换Number 1.1 代码 1.2 测试结果 2.进制表示 2.1 代码 2.2 测试结果 3.强制类型转换为Boolea 3.1 代码 3.2 测试结果 4.运算符 4.1 ...
- js中的逻辑与(&&)和逻辑或(||)
之前有一个同事去面试,面试过程中碰到这样一个问题: 在js中写出如下的答案 : var a = 2; var b = 3; var andflag = a && b ; var orf ...
- js中的运算符和条件语句
js中的运算符大体上可以分为4类:1算术运算符.2一元操作符.3比较运算符.4逻辑运算符. 算术运算符一般指的是加减乘除求余这五种操作符:+,-,*,/,%.通过算术运算符可以对js中的变量进行操作. ...
- js中三目运算符和&& || 符的个人浅见
这两天看到别人写的代码,感觉很牛逼,如下,大神请忽视 $(".lgn").on("click", function() { var a = {}; a.logi ...
- Javascript开发技巧(JS中的变量、运算符、分支结构、循环结构)
一.Js简介和入门 继续跟进JS开发的相关教程. <!-- [使用JS的三种方式] 1.HTML标签中内嵌JS(不提倡使用): 示例:<button onclick="javas ...
- JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构
JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...
- 关于JS中涉及的常用类型转换及运算符表达式
JS中的常用类型转换(一般用强制转换):1.强制转为整数:parseInt:写法:x = parseInt(x); 2.强制转换位小为:parseFloat:写法:x = parseFloat(x); ...
随机推荐
- [转帖]linux查看端口及端口详解
https://www.cnblogs.com/the-tops/p/6126941.html 今天现场查看了TCP端口的占用情况,如下图 红色部分是IP,现场那边问我是不是我的程序占用了tc ...
- [转帖]查询机器序列号--Linux/esxi/windows
https://www.jianshu.com/p/6abaea79e0c3 Ipmitool--Linux&Esxi&Windows # ipmitool fru list|grep ...
- [转帖]Linux:页表中PGD、PUD、PMD、TLB等概念介绍
1.PGD: Page Global Directory Linux系统中每个进程对应用户空间的pgd是不一样的,但是linux内核 的pgd是一样的.当创建一个新的进程时,都要为新进程 ...
- [转帖]发布即巅峰!万字长文:Java性能调优六大工具:MAT内存分析工具
jianshu.com/p/4ed3dd8b7b83 MAT是MemoryAnalyzerTool的简称,它是一款功能强大的Java堆内存分析器,可以用于查找内存泄漏以及查看内存消耗情况.MAT是 基 ...
- [转帖]“高密度核心”的角逐 —— AMD Bergamo SoC & Zen 4c 前瞻
https://zhuanlan.zhihu.com/p/585469720 最近这段时间一直在关注Bergamo和Zen 4c,但遗憾的是Genoa的发布会并没有提到太多的Bergamo细节.不过这 ...
- [转帖]【redis】redis各稳定版本特性(更新到6.0版本)
1.Redis2.6 Redis2.6在2012年正是发布,经历了17个版本,到2.6.17版本,相对于Redis2.4,主要特性如下: 1)服务端支持Lua脚本. 2)去掉虚拟内存相关功能. 3)放 ...
- 【译文】IEEE白皮书 6G 太赫兹技术的基本原理 2023版
第一章 简介 太赫兹波是介于微波和光波之间的光谱区域,频率从 0.1THz ~ 10THz 之间,波长在 3mm ~ 30μm 之间.提供大块连续的频带范围以满足对 Tbit/s 内极高数据传输速率的 ...
- js解析上传APK文件的详细信息
前端解析APK版本信息 需要安装这个包,可以使用cnpm或者npm npm 安装 app-info-parser ( 命令:npm install app-info-parser) APKInfo为i ...
- 【笔记】macbook m2 芯片中使用 gcc docker 镜像来交叉编译
作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 一个 c 程序,如何在 macbook m2 芯片的笔记本 ...
- VictoriaMetrics 1.80版本中值得关注的新特性
作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 change log请看:https://github.c ...