JS中的位操作在实际项目中的应用
前言:
Linux中的文件管理子系统的权限管理,想必大家都知道:rwx分别代表read(可读),write(可写), execute(可执行,如果是可执行程序的话),其中rxw可以按照数字表示:
r ------------- 4
w ------------- 2
x ------------- 1
如果有可读,可写,可执行权限,则用7表示...
在最近的项目中,就遇到了这样的问题:我们做是IOT的硬件报警设备,现在一共有7种报警类型,每种设备报警的可能有:1种,多种或者0种,后台返回一个10进制数字来表示这种可能,前端需要根据后台返回的数字判断包含的报警。
其实这个就跟linux文件权限一样,后台用bit位来存储设备报警结果,一共有7种报警类型,8个bit位就够了,每一个bit位对应一种报警类型,如果包含某种报警,对应的位置为1,反之置为0,然后后台将bit转位10进制的数字传给前端。其实表示这7种报警类型常规的做法是:后台为这报警类型alarm字典,将这7种报警类型存入alarm字典中,每一种报警类型是否包含的话用true和false处理,返回给前端的话如下:
{
alarm1: true,
alarm2: false,
alarm3: true,
alarm4: false,
alarm5: true,
alarm6: false,
alarm7: true,
}
从结果中,前端可以判定设备产生了4中报警:alarm1,alarm3,alarm5,alarm7。。。
回到我现在的问题中去,前端需要将后台返回的10进制数字转为2进制数字(8个bit位),然后去判断1的位置,如果某一位的值为1,则包含对应的报警.
方法一:非CS专业出身笨办法
let type = alarm.toString(2).padStart(8, '0').split('').reverse()
const arr = [] // 用来存储包含的报警类型
for (var i = 0; i < type.length; i++) {
if (type[b] === '1') {
switch (i) {
case 0:
alarm.push[i]
break
case 1:
alarm.push[i]
break
case 2:
alarm.push[i]
break
case 3:
alarm.push[i]
break
case 4:
alarm.push[i]
break
case 5:
alarm.push[i]
break
default:
break
}
}
}
console.log(arr.toString()) // 打印出所有的报警类型
方法二:利用位操作判断(对于js按位操作不熟悉的同学,请自行补充相关知识)
const arr = [] // 用来存储包含的报警类型
for (let i = 0; i < 7; i++) {
if (alarm >> i & 1) {
arr.push(i)
}
}
console.log(arr.toString()) // 打印出所有的报警类型
按照这个实现,虽然看着舒服,但是简洁加执行效率高,还是很帅的。
最后来说下,我google的实现结果,感觉更好理解:
// 预先定义不同报警类型
const alarm1 = 1; // 0000 0001
const alarm2 = 1 << 1; // 0000 0010
const alarm3 = 1 << 2; // 0000 0100
const alarm4 = 1 << 3; // 0000 1000
const alarm5 = 1 << 4; // 0001 0000
const alarm6 = 1 << 5; // 0010 0000
const alarm7 = 1 << 6; // 0100 0000 const arr = [] // 用来存储包含的报警类型
const alarm = 7; // 后台返回的10进制数字 // 是否包含alarm1
if (alarm & alarm1) {} // 是否包含alarm1和alarm2中的任意一个
if (alarm & (alarm1 | alarm2)) {} // 是否只包含alarm1和alarm2
if (alarm === (alarm1 | alarm2)) {} // 是否同时包含alarm1和alarm2
if (alarm === (alarm | (alarm1 | alarm2)) ) {}
参考资料:
https://codeburst.io/using-javascript-bitwise-operators-in-real-life-f551a731ff5
JS中的位操作在实际项目中的应用的更多相关文章
- 项目中使用express,只是单纯项目中使用
安装express npm install express --save-dv 建议安装到dev依赖里面 安装body-parse npm install body-parser --save-dev ...
- iOS中AOP与Method Swizzling 项目中的应用
引子:项目中需要对按钮点击事件进行统计分析,现在项目中就是在按钮的响应代码中添加点击事件,非常繁琐.所以使用了AOP(面向切面编程),将统计的业务逻辑统一抽离出来. 项目中添加的开源库:https:/ ...
- Eclipse中定位当前文件在项目中的位置
点击红色框内的按钮,就能定位当前文件在项目中的位置, 另外, 找到位置后记得再点击一下这个按钮, 要不然每次打开一个文件都会自动定位
- idel 中 生成 jar包 和项目中自己需要的包
一.首先在自己的项目中创建一个类类中创建一个构造方法构造方法中传入一个字符串参数(这个字符串参数是为了传入路径) 在方法体内通过file类创建文件夹(换而言之就是项目中的包) 二 .就是对这个项目中的 ...
- JQuery复制内容到剪切板-jquery.zclip.js的使用,在公司项目中
公司项目中有一个复制粘贴的内容,也试图找其他插件但都是浏览器兼容问题,在网上找这个插件挺不错的,FLASH,兼容各个浏览器,测试时要在服务器环境下,点击参考,参考这个网址,或者搜下标题这个插件,性能不 ...
- 将Ext JS 5应用程序导入Web项目中
相关资料:http://docs.sencha.com/extjs/5.1/getting_started/welcome_to_extjs.html 原文地址: https://blog.csdn. ...
- Eclipse中使用maven构建web项目中遇到的问题
构建过程参考: http://blog.csdn.net/smilevt/article/details/8215558/ http://www.cnblogs.com/dcba1112/archiv ...
- 理解css中Grid布局,在项目中如何实现grid页面布局
简介 CSS中Grid是一种二维网格式布局方式.我们常规使用table.float.position.inline-block等布局,但它们遗漏了很多功能,例如垂直居中.后来css3中flexbox的 ...
- 通过iframe引入另外一个项目中的html片段到项目中,解决样式,高度,兼容等问题的策略
<!--尾部开始--> <iframe src="http://172.16.24.11:9000/cartoon-web/footer_new" m ...
随机推荐
- Python机器学习第一章
1. 机器学习 (Machine Learning, ML) 1.1 概念:多领域交叉学科,涉及概率论.统计学.逼近论.凸分析.算法复杂度理论等多门学科.专门研究计算机怎样模拟或 ...
- 怎么添加在安装好的nvidia-docker上面根据Dockerfile构建自己所需要的运行环境
在已经创建好nvidia-docker环境之后,对于新手小白来说,又有一个问题了,就是如何根据Dockerfile来构建试验所需要的docker环境 主要是以下几个步骤 首先创建一个mydocker文 ...
- 【tensorflow】学习笔记
1.tensorflow中dynamic_rnn和rnn有什么区别? 在tensorflow中没有找到rnn这个方法难道是废弃掉了? rnn是静态图,比如有10个时间序列,那么它将全部展开,并且 ...
- npm_config_
npm script时会带一些参数变量,例如: "test": "node scripts/tools/test.js --name=test111" 平常我们 ...
- $refs的用法及作用
获取DOM元素,一般用document.querySelector获取这个dom节点,然后在获取input的值 但是用ref绑定之后,就不需要在获取dom节点了,直接在上面的input上绑定input ...
- Swagger UI及 Swagger editor教程 API文档搭配 Node使用
swagger ui 是一个在线文档生成和测试的利器,目前发现最好用的.为啥好用呢?打开 demo,支持API自动生成同步的在线文档些文档可用于项目内部API审核方便测试人员了解 API这些文档可作为 ...
- 利用LI标签仿照a中Link进行页面跳转?
点击LI时仿照A标签进行页面跳转html: <ul> <li link="/school/schooldetail/success_detail?case_id=<! ...
- 错误: ‘shared_ptr’ in namespace ‘std’ does not name a type的解决方法。
这是因为要使用C++11的标准编译,而catkin_make时无法识别出来. 修改方法是在CMakeLists.txt文件里面添加: set(CMAKE_CXX_FLAGS "${CMAKE ...
- parallels desktop for mac安装虚拟机 之parallelsdesktop密钥 以及 parallels desktop安装win10的办公推荐可以提高办公效率
大家好我是一个老程序员了. 用惯了 mac , 平时工作都是在 mac安装虚拟机,之后就是mac 安装 win10. 因为很多办公软件 mac 都不好用,主要是跟同事沟通不方便,当然mac 的软件还 ...
- Linux配置环境变量
自己mark一下 gedit ~/.bashrc 后面记得要 source ~/.bashrc 使之马上生效(其中波浪线 ~ 代表用户主目录,即home/XX,XX是用户的用户名) Linux下配置环 ...