首页 > 编程语言 >位运算符在 Javascript 中的运用

位运算符在 Javascript 中的运用

时间:2024-05-23 16:18:00浏览次数:23  
标签:console log Javascript 运算符 let user 运用 权限 0b010

零、资料

一、权限

在权限设计时,每一个基础权限单元都是二进制数形式,有且只有一位值是 1,其余全部是 0,即权限码是  2^n 。 所以,在这套设计中:
  •   |   可以用来赋予权限
  •   &   可以用来校验权限
比如:Linux 的文件权限分为读、写和执行,有字母和数字等多种表现形式:
权限 字典表示 数字表示 二进制
r 4 0b100
w 2 0b010
执行 x 1 0b001

权限的添加

let r = 0b100
let w = 0b010
let x = 0b001

// 给用户赋全部权限(使用前面讲的 | 操作)
let user = r | w | x;

console.log(user) // 7
console.log(user.toString(2)) // 111

// r = 0b100
// w = 0b010
// r = 0b001
// r|w|x = 0b111

权限的校验

let r = 0b100
let w = 0b010
let x = 0b001

// 给用户赋 r w 两个权限
let user = r | w
// user = 6
// user = 0b110 (二进制)

console.log((user & r) === r) // true 有 r 权限
console.log((user & w) === w) // true 有 w 权限
console.log((user & x) === x) // false 没有 x 权限

 

权限的删除

删除权限的本质其实是将指定位置上的 1 重置为 0。如何操作?
  • 使用 异或
    let r    = 0b100
    let w    = 0b010
    let x    = 0b001
    let user = 0b110 // 有 r w 两个权限
    
    // 执行异或操作,删除 r 权限
    user = user ^ r
    
    console.log((user & r) === r) // false 没有 r 权限
    console.log((user & w) === w) // true  有 w 权限
    console.log((user & x) === x) // false 没有 x 权限
    
    console.log(user.toString(2)) // 现在 user 是 0b010
    
    // 再执行一次异或操作
    user = user ^ r
    
    console.log((user & r) === r) // true  有 r 权限
    console.log((user & w) === w) // true  有 w 权限
    console.log((user & x) === x) // false 没有 x 权限
    
    console.log(user.toString(2)) // 现在 user 又变回 0b110
    但是,异或实际上执行的是 toggle 操作,即有则删除、无则添加,并不是纯粹的删除操作
  • 联合使用 取反 & 与 操作
    let r    = 0b100
    let w    = 0b010
    let x    = 0b001
    let user = 0b110 // 有 r w 两个权限
    
    // 删除 r 权限
    user = user & (~r)
    
    console.log((user & r) === r) // false 没有 r 权限
    console.log((user & w) === w) // true  有 w 权限
    console.log((user & x) === x) // false 没有 x 权限
    
    console.log(user.toString(2)) // 现在 user 是 0b010
    
    // 再执行一次
    user = user & (~r)
    
    console.log((user & r) === r) // false 没有 r 权限
    console.log((user & w) === w) // true  有 w 权限
    console.log((user & x) === x) // false 没有 x 权限
    
    console.log(user.toString(2)) // 现在 user 还是 0b010,并不会新增

局限

这种方式的局限在于权限单元的是有数量上限的,即  1, 2, 4, 8,...,1024,... ,不过在 Javascript 中很难用尽就是了,问题倒是也不算大

二、属性集的构建

这样的例子比较多,比如在 巧用JS位运算 文章中作者就用来判断弹窗与视口的重叠情况:
// 边界判断,总共有3种超出情况:右、上、左,并且可能会叠加,如鼠标在左上角的时候会导致左边和上面同时超出。需要记录超出的情况进行调整,用001表示右边超出,010表示上方超出,100表示左边超出,如下代码计算:
let postFlag = 0;

if(pos.right < maxLen) posFlag |= 1; // 右边超出
if(pos.top < maxLen) posFlag |= 2; //上面超出
if(pos.left < maxLeftLen) posFlag |= 4; // 左边超出

//对超出的情况进行处理,代码略
switch(posFlag){
  case 1: //右
  case 2: //上
  case 3: //右上
  case 4: //左
  case 6: //左上
}

 

VUE3 中对 vNode 的类型的设置,也是运用的这套思路

三、奇偶性判断

偶数 & 1 = 0 奇数 & 1 = 1

四、取整

~~11.71 // 11
11.71 >> 0 // 11
11.71 << 0 // 11
11.71 | 0 // 11
11.71 >>> 0 // 11

注意

  • 对正数使用位运算符,效果等同于 Math.floor,对负数,效果则等同于 Math.ceil
  •  >>> 不可对负数取整

五、代替 Math.round()

  • 对于正数: A + 0.5 | 0 
  • 对于负数: A - 0.5 | 0
 

六、检查数字是否不相等(取个反就是相等判断)

if (a !== 1171) {...};
// 等价于
if (a ^ 1171) {...};

// 取反进行相等判断
if (!(a ^ 1171)) { ... }

 

标签:console,log,Javascript,运算符,let,user,运用,权限,0b010
From: https://www.cnblogs.com/cc-freiheit/p/18208786

相关文章

  • 使用-HTML5-和-JavaScript-开发-Windows-商店应用-全-
    使用HTML5和JavaScript开发Windows商店应用(全)原文:zh.annas-archive.org/md5/8F13EC8AC7BDB8535E7218C5DDB48475译者:飞龙协议:CCBY-NC-SA4.0序言使用HTML5和JavaScript开发WindowsStore应用是一本实践性强的指南,涵盖了WindowsStore应用的基本重要特性以及......
  • 精通-JavaScript-高性能-全-
    精通JavaScript高性能(全)原文:zh.annas-archive.org/md5/582AFDEF15013377BB79AB8CEA3B2B47译者:飞龙协议:CCBY-NC-SA4.0序言欢迎来到精通JavaScript高性能。在这本书中,我们已经以帮助任何JavaScript开发者,无论他们是新手上路还是经验丰富的老手的方式,覆盖了JavaScrip......
  • PHP函数 算术运算符
    <?phpheader('Content-Type:text/html;charset=utf-8');define('ROOT',$_SERVER['DOCUMENT_ROOT']);includeROOT.'/assets/php/head.php';//算术运算符/***+$a:标识;根据情况将$a转化为int或float。*-$a:取反;$a的负值。*$a+$b:加法;$a......
  • PHP函数 赋值运算符
    <?phpheader('Content-Type:text/html;charset=utf-8');define('ROOT',$_SERVER['DOCUMENT_ROOT']);includeROOT.'/assets/php/head.php';//赋值运算符/***例子等同于操作*$a+=$b等同于$a=$a+$b加法*$a-=$b等同于$a=$a-$......
  • PHP函数 比较运算符
    <?phpheader('Content-Type:text/html;charset=utf-8');define('ROOT',$_SERVER['DOCUMENT_ROOT']);includeROOT.'/assets/php/head.php';//比较运算符/***$a==$b等于true,如果类型转换后$a等于$b。*$a===$b全等true,如果$a等于$b,......
  • PHP函数 递增递减运算符
    <?phpheader('Content-Type:text/html;charset=utf-8');define('ROOT',$_SERVER['DOCUMENT_ROOT']);includeROOT.'/assets/php/head.php';//递增/递减运算符/***递增/递减运算符例子名称效果*++$a前加$a的值加一,然后返回$a。*$a++......
  • PHP函数 逻辑运算符
    <?phpheader('Content-Type:text/html;charset=utf-8');define('ROOT',$_SERVER['DOCUMENT_ROOT']);includeROOT.'/assets/php/head.php';//逻辑运算符/***$aand$b:And(逻辑与)true;如果$a和$b都为true。*$aor$b:O......
  • [ES2024] Improve Application-wide Error Handling rethrowing JavaScript Error wit
    Thenew cause datapropertythatyoucanaddtoathrown Error canbeusedtoretainaccesstotheoriginalerrorcaughtinapromiserejection. constsendLog=(...args)=>console.log(...args);asyncfunctionfetchStuff(){awaitfetch('h......
  • 面向孩子们的-JavaScript-项目-全-
    面向孩子们的JavaScript项目(全)原文:zh.annas-archive.org/md5/9C2A1F6AA0F3566A2BF5430895525455译者:飞龙协议:CCBY-NC-SA4.0前言从书名中您可以猜到,这本书是为孩子们设计和设置的,以便他们可以自学JavaScript,并使用JavaScript创建一些项目。通过以一种无与伦比的方式......
  • 写给-Python-开发者的-JavaScript-实用指南-全-
    写给Python开发者的JavaScript实用指南(全)原文:zh.annas-archive.org/md5/3cb5d18379244d57e9ec1c0b43934446译者:飞龙协议:CCBY-NC-SA4.0前言在学习Python时,您通过学习Python的基础知识、其优雅和编程原则,迈出了软件工程职业生涯的第一步。在您职业生涯的下一个阶段......