LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

JavaScript中:|、||、?、?? 运算符的用法及使用场景

admin
2024年6月1日 17:5 本文热度 289

前言

大家好,今天我们来学习一下JavaScript中的几个容易混淆的运算符,它们分别为|||???运算符,并通过一些例子和场景说明他们的用法,避免在项目开发中混淆它们的用法。

位运算符或(|

按位或( | )运算符在其中一个或两个操作数对应的二进制位为 1 时,该位的结果值为 1

例子:

const a = 3// 11
const b = 5// 101

console.log(a | b); // 111

在以上例子中,十进制3的二进制值为11,十进制5的二进制值为101,那么对ab使用|运算符计算的结果为111。简单来说,其实有点像是在对应二进制位为1的并集。

 11
101
// 保持位数一致,合并1
111

使用场景——合并权限:

const PERMISSION_READ = 1//    0001
const PERMISSION_WRITE = 2//   0010
const PERMISSION_EXECUTE = 4// 0100
const PERMISSION_ADMIN = 8//   1000

// 将READ和WRITE权限合并
const readAndWritePermissions = PERMISSION_READ | PERMISSION_WRITE;
console.log(readAndWritePermissions); // 输出:3 (0011)

权限合并如何判断是否具备合并后的权限?首先还得了解一下&运算符。

前面我们说了|像是求对应二进制位为1的并集,那么&想必大家也能猜到一点,那就是求对应位数为1的交集,只有两个都为1时,对应位才为1,否则为0

下面开始接着判断前面合并的权限:

// 按规律设置权限值
const PERMISSION_READ = 1//    0001
const PERMISSION_WRITE = 2//   0010
const PERMISSION_EXECUTE = 4// 0100
const PERMISSION_ADMIN = 8//   1000

// 将READ和WRITE权限合并
const readAndWritePermissions = PERMISSION_READ | PERMISSION_WRITE;
console.log(readAndWritePermissions); // 输出:3 (0011)

// 判断readAndWritePermissions是否有可读权限
consoloe.log(readAndWritePermissions & PERMISSION_READ)  // 0001 = PERMISSION_READ
// 计算过程
readAndWritePermissions:0011
PERMISSION_READ:        0001
result:                 0001
// 以上缩进为了让大家便于阅读计算交集

consoloe.log(readAndWritePermissions & PERMISSION_WRITE)  // 0010 = PERMISSION_WRITE
// 计算过程
readAndWritePermissions:0011
PERMISSION_WRITE:       0010
result:                 0010

如何一句话记住|和&的用法: 求对应二进制位数为1并集交集

逻辑或运算符(||

JavaScript中,认为一个值不属于真值的有以下情况:

  • false
  • 0
  • ''(空字符串)
  • null
  • undefined
  • NaN

逻辑或运算符||,用于判断至少一个操作值是否为真。如果左侧操作值为真,则返回它。如果为假,则计算并返回右侧操作值。

测试例子:

// 由于没有真值,所以a返回0
var a = false || 0  // a = 0
var b = '' || 0 || 1  // b = 1
var c = 1 || 2  // c = 1

场景例子:

let mobile = "152****5086";
let nickname = null;
let name = nickname || mobile;  // "152****5086"

由于nickname用户昵称为null,j即为假值,因此name的计算结果为mobile的值"152****5086"

三元运算符?

三元条件运算符JavaScript中唯一使用三个操作数的运算符。一个条件后跟一个问号(?),如果条件为真值则执行冒号(:)前的表达式;若条件为假值,则执行最后的表达式。该运算符经常当作if...else语句的简捷形式来使用。

基本用法:

const age = 20;
const persion = age >= 18 ? "成年人" : "未成年人";
console.log(persion); // 输出:成年人

进阶用法:

const num = -1;
const result = num > 0 ? "正数" : num < 0 ? "负数" : "零";
console.log(result); // 输出:负数

在以上例子中,首先判断num是否大于零,条件不满足,继续执行冒号:右边的表达式判断num < 0,发现满足条件,直接返回结果负数

空值合并运算符(??

空合并运算符 (??) 也是一个逻辑运算符,当其左侧操作值为null或者undefined时,它返回其右侧操作值,否则返回其左侧操作值。它与||运算符不同,它不会将其他虚假值(false0''NaN)视为触发回退。

例子1:

const name = null;
const name2 = 'vilan';

const result = name ?? name2;
console.log(result); // 输出:vilan

在这个例子中,由于name的值为null,所以打印结果为vilan

例子2:

const age = 0;
const age2 = 18;

const result = age ?? age2;
console.log(result); // 输出:0

在这个例子中,即使age0(被认为是假的),??操作符也不会将其视为回退的触发器,因为0不是nullundefined。因此,result结果年龄的值为0

总结

逻辑或运算符 (||) 和空合并运算符 (??)这两个运算符经常会被混淆或误解,所以我们在使用时要特别注意它们的内部原理及用法,避免出现意料之外的错误。


该文章在 2024/6/1 17:07:08 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved