iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >你可能不知道的JavaScript位运算符详解
  • 291
分享到

你可能不知道的JavaScript位运算符详解

2024-04-02 19:04:59 291人浏览 独家记忆
摘要

目录概览位操作符概览位操作支持多少位?负数的无符号右移-2 >>> 1为什么输出2147483647?状态控制权限控制判断奇偶数交换两个变量的值判断整数是否相等判断

概览

本文详细剖析JavaScript的位运算符,其涉及的计算机原理和操作效果。

然后从实战的角度出发,罗列相关的应用场景。

位操作符概览

运算符描述示例
按位与(AND)两个操作数对应的比特位都是1时,结果才为1,否则为01011 & 0111 = 0011
按位或(OR)两个操作数对应的比特位至少有一个1时,结果为1,否则为01011 | 0111 = 1111
按位异或(XOR)两个操作数对应的比特位有且只有一个1时,结果为1,否则为01011 ^ 0111 = 1100
按位非(NOT)逐个反转操作数的比特位,即0变成1,1变成0~1011 = 0100
左移通过从右推入零向左位移,并使最左边的位脱落。1011 << 1 = 10110
有符号右移通过从左推入最左位的拷贝来向右位移,并使最右边的位脱落。01011 >> 1 = 00101
无符号右移通过从左推入零来向右位移,并使最右边的位脱落。01011 >>> 1 = 00101

位操作支持多少位?

js只支持32位二进制数的位操作,也即能处理的最大十进制数字是 4294967295

parseInt('11111111111111111111111111111111', 2);  // 4294967295

验证下超过32位二进制数的位操作:

// 33位二进制数,得到十进制数字 8589934591
parseInt('111111111111111111111111111111111', 2); // 8589934591
  
// 对数字进行无符号位右移
8589934591 >>> 0; // 4294967295
4294967295 >>> 0; // 4294967295

可以看出,数字 85899345914294967295 进行 无符号位右移0位 操作,得到的结果是一样的。

产生这样结果的原因,是js的位操作实现,只支持32位

注意:ECMAScript 中的所有数值都以IEEE754 64位格式存储,只是在位操作的时候 ,需要转换成32位进行操作。

负数的无符号右移

-2 >>> 1为什么输出2147483647?

-2在运算中,是用补码表示,即1 1111111111111111111111111111110

其中,第1位是符号位。 符号位1代表当前数字是负数。

-2无符号右移1位,则最右边的0脱落,剩下31位1111111111111111111111111111111,接着,在左侧补0,得到01111111111111111111111111111111

01111111111111111111111111111111代表十进制数2147483647

状态控制

场景:

以下使用React+typescript,实现游戏状态机的状态流转,根据状态渲染对应的操作按钮。

// 游戏状态定义
export enum GAME_STATE{
   INIT = 1 << 0,      // 二进制表示:00001
   JOIN = 1 << 1,      // 二进制表示:00010
   PREPARE = 1 << 2,   // 二进制表示:00100
   PLAY = 1 << 3,      // 二进制表示:01000
}
// 根据状态渲染按钮
function RenderButton({state, changeState}){
	if((state & GAME_STATE.PLAY) === GAME_STATE.PLAY){
		return null;
	}
	
	if((state & GAME_STATE.INIT) === GAME_STATE.INIT){
		return <button 
				onClick={() => changeState(GAME_STATE.JOIN)}
		    >加入游戏</button>
	}
	
	if((state & GAME_STATE.JOIN) === GAME_STATE.JOIN){
		return <button 
				onClick={() => changeState(GAME_STATE.PREPARE)}
			>准备游戏</button>
	}

	if((state & GAME_STATE.PREPARE) === GAME_STATE.PREPARE){
		return <button 
				onClick={() => changeState(GAME_STATE.PLAY)}
			>开始游戏</button>
	}

	return null;
}
  
// 渲染游戏页面
function Page(){
	const state = useRef(GAME_STATE.INIT);

	const changeState = useCallback((newState) => {
		state.current = newState;
	}, [state]);

	return (<div>
		// ....other code
		<RenderButton state={state.current} changeState={changeState} />
	</div>);
}

权限控制

设计一个权限控制,用于不同角色对网站文章的权限分配。

export enum ARTICLE_RULE{
	VIEW = 1 << 0,     // 查看文章
	EDIT = 1 << 1,     // 编辑文章
	PUBLISH = 1 << 2,  // 发布文章
	DELETE = 1 << 3,   // 删除文章
} 

export enum ROLE{
	GUEST = ARTICLE_RULE.VIEW,    // 访客
	ADMIN = ARTICLE_RULE.VIEW | ARTICLE_RULE.EDIT | ARTICLE_RULE.PUBLISH | ARTICLE_RULE.DELETE,  // 超级管理员
	OPERATOR = ARTICLE_RULE.VIEW | ARTICLE_RULE.EDIT | ARTICLE_RULE.PUBLISH,  // 运营
}
if(user.role === 'admin'){ 
	console.log("user拥有admin权限");
	user.rule = ROLE.ADMIN; // 赋予角色权限
}

if((user.rule & ARTICLE_RULE.DELETE) === ARTICLE_RULE.DELETE){
	console.log("user拥有删除文章权限"); 
}

判断奇偶数

奇数,最末尾1位,一定是1

所以将数字与1(二进制表示为:00000000000000000000000000000001)作位操作&

如果等于1,则是奇数。

function isOdd(number){
	return number & 1 === 1;
}

交换两个变量的值

let a = 1;
let b = 2;

a = a ^ b;  // 这一步,a缓存了 a ^ b 的结果
b = a ^ b;  // 等价为: b = a ^ b ^ b, 其中 b ^ b = 0; 所以 b = a ^ 0 = a
a = a ^ b;  // 同上

判断整数是否相等

function isEqual(number1, number2){
	return (number1 ^ number2) === 0;
}

判断是否为负数

如果是负数,则对数字进行 无符号右移 位操作,会变成一个新的数字。

所以,如果是负数,则两个数字不相等。

function isMinus(number){
	return number !== (number >>> 0);
}

正浮点数取整

function toInt(floatNumber){
	return floatNumber >>> 0;
}

正负浮点数取整

function toInt(floatNumber){
	return floatNumber | 0;
}
function toInt(floatNumber){
	return ~~floatNumber;
}
function toInt(floatNumber){
	return floatNumber >> 0;
}

十进制转换成二进制

function dec2bin(dec){
	return (dec).toString(2);
}

二进制转换成十进制

function bin2dec(bin){
	return parseInt(`${bin}`, 2)
}

参考

  • 聊聊javascript中的7种位运算符,看看在实战中如何妙用?
  • 负数的二进制表示方法(正数:原码、负数:补码)

到此这篇关于JavaScript位运算符的文章就介绍到这了,更多相关JS位运算符内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 你可能不知道的JavaScript位运算符详解

本文链接: https://www.lsjlt.com/news/150929.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 你可能不知道的JavaScript位运算符详解
    目录概览位操作符概览位操作支持多少位?负数的无符号右移-2 >>> 1为什么输出2147483647状态控制权限控制判断奇偶数交换两个变量的值判断整数是否相等判断是...
    99+
    2024-04-02
  • 你可能不知道的JavaScript之this指向详解
    目录前言默认绑定,全局对象点石成金,隐式绑定隐式绑定丢失指腹为婚,显式绑定内有乾坤,new 绑定军令如山,箭头函数this 绑定优先级总结相关文献引用链接前言 JavaScript ...
    99+
    2024-04-02
  • 你可能不知道的package.json属性详解
    目录概述nameversiondescriptionkeywordshomepagebugslicense和用户相关的属性: author, contributorsfilesmai...
    99+
    2024-04-02
  • Java中的运算符你知道多少
    目录1.算术运算符1.基本的算数运算符:+ - * / %2.增量运算符**+= -= /= = %=*3.自增自减运算符 ++ – --2.关系运算符3.逻辑...
    99+
    2024-04-02
  • python的变量和运算符你都知道多少
    目录python变量1. 定义变量 (创建变量)2.使用变量3.重新给变量赋值4. 同时定义多个变量5.定义变量和重新赋值变量的原理运算符1. 数学运算符2. 比较运算符:3. 逻辑...
    99+
    2024-04-02
  • 你所不知道的Windows7企业功能详解
      即将推出的Windows 7吸引了大量用户的眼球,各种预测和提前试用的文章不断见诸报端。但人们在讨论其给PC或者笔记本带来更酷更强大的功能时,往往忽略了微软还将推出一个企业版的Windows 7。前不久,微软Wind...
    99+
    2023-05-24
    详解 功能 企业 知道 Windows 用户 搜索 网络 桌面 R2
  • 你可能不知道的几个JavaScript原生方法是怎样的
    这篇文章将为大家详细讲解有关你可能不知道的几个JavaScript原生方法是怎样的,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。自ES6发行以来,许多新的,...
    99+
    2024-04-02
  • PHP8的运算符-PHP8知识详解
    运算符是可以通过给出的一或多个值(用编程行话来说,表达式)来产生另一个值(因而整个结构成为一个表达式)的东西。 PHP8的运算符有很多,按类型分有一元运算符、二元运算符、三元运算符。 一元运算符只对一个表达式执行操作,只能接受一个值,例如 ...
    99+
    2023-09-16
    PHP开发 php PHP教程 PHP8
  • 你可能不知道的CSS技巧有哪些
    这篇文章给大家介绍你可能不知道的CSS技巧有哪些,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。 1.box-sizing:border-box 设置此属性后...
    99+
    2024-04-02
  • 你可能不知道的typescript实用小技巧
    目录前言函数重载 映射类型 Partial, Readonly, Nullable, Required Pick, RecordExclude, Omit ReturnType 类型...
    99+
    2024-04-02
  • Linux系统中一些你可能不知道的事
    小编给大家分享一下Linux系统中一些你可能不知道的事,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Linux是一套免费使用和自由传播的类Unix操作系统,是一个...
    99+
    2023-06-10
  • 谈谈C语言中位运算你要知道的那些事儿
    目录一、概念说明1.概念1.1位运算1.2位运算符2.举例及补充2.1位运算2.2位运算符二、问题实战1.问题描述(开放题)2.输入输出三、源码实现(+详细注释)1.注释版2.纯源码...
    99+
    2024-04-02
  • JavaScript展开运算符和剩余运算符的区别详解
    目录什么是剩余运算符?剩余运算符在JavaScript函数中是如何工作的?注意!不能在包含剩余参数的函数体中使用"use strict"剩余运算符在参数解构中是如...
    99+
    2024-04-02
  • 一文了解你不知道的JavaScript异步篇
    目录事件循环任务队列回调嵌套回调promisepromise调度技巧错误处理promise.all([...])promise.race([...])all和race的变体无法取消的...
    99+
    2022-11-13
    JavaScript 异步
  • 一文了解你不知道的JavaScript闭包篇
    目录前言理解闭包升级版闭包循环和闭包模块小结前言 JavaScript语言中有一个非常重要又难以掌握,近似神话的概念-闭包。对于有一点JavaScript使用经验但从未真正理解闭包概...
    99+
    2022-11-13
    JavaScript 闭包
  • javascript中instanceof运算符的用法详解
    概述 instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上 语法 obj instanceof Object;//t...
    99+
    2024-04-02
  • JavaScript中的编程算法:有哪些你不知道的技巧?
    JavaScript是一门广泛应用于网页开发的编程语言。它可以用来实现各种功能,从简单的表单验证到复杂的交互式动画。在使用JavaScript开发时,编程算法是非常重要的一部分。在本篇文章中,我们将介绍一些你可能不知道的JavaScript...
    99+
    2023-08-12
    git 编程算法 javascript
  • 一文了解你不知道的JavaScript生成器篇
    目录前言了解生成器for...ofiterable(可迭代)生成器+promiseasync与await小结前言 在没有JavaScript的生成器概念之前,我们几乎普遍依赖一个假定...
    99+
    2022-11-13
    JavaScript生成器 JS 生成器
  • react 源码中位运算符的使用详解
    位运算符基本使用 按位与(&):a & b对于每一个比特位,两个操作数都为 1 时, 结果为 1, 否则为 0按位或(|):a | b对于每一个比特位,两个操作数都为...
    99+
    2024-04-02
  • 你一定不知道的Java Unsafe用法详解
    目录Unsafe是什么如何正确地获取Unsafe对象Unsafe实现CAS锁使用Unsafe创建对象Unsafe加载类总结Unsafe是什么 首先我们说Unsafe类位于rt.jar...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作