前言:

  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处理,返回给前端的话如下:

  

  1. {
  2. alarm1: true,
  3. alarm2: false,
  4. alarm3: true,
  5. alarm4: false,
  6. alarm5: true,
  7. alarm6: false,
  8. alarm7: true,
  9. }

  从结果中,前端可以判定设备产生了4中报警:alarm1,alarm3,alarm5,alarm7。。。

  回到我现在的问题中去,前端需要将后台返回的10进制数字转为2进制数字(8个bit位),然后去判断1的位置,如果某一位的值为1,则包含对应的报警. 

  方法一:非CS专业出身笨办法

  1. let type = alarm.toString(2).padStart(8, '0').split('').reverse()
  2. const arr = [] // 用来存储包含的报警类型
  3. for (var i = 0; i < type.length; i++) {
  4. if (type[b] === '1') {
  5. switch (i) {
  6. case 0:
  7. alarm.push[i]
  8. break
  9. case 1:
  10. alarm.push[i]
  11. break
  12. case 2:
  13. alarm.push[i]
  14. break
  15. case 3:
  16. alarm.push[i]
  17. break
  18. case 4:
  19. alarm.push[i]
  20. break
  21. case 5:
  22. alarm.push[i]
  23. break
  24.  
  25. default:
  26. break
  27. }
  28. }
  29. }
  30. console.log(arr.toString()) // 打印出所有的报警类型

  方法二:利用位操作判断(对于js按位操作不熟悉的同学,请自行补充相关知识)

  

  1. const arr = [] // 用来存储包含的报警类型
  2. for (let i = 0; i < 7; i++) {
  3. if (alarm >> i & 1) {
  4. arr.push(i)
  5. }
  6. }
  7. console.log(arr.toString()) // 打印出所有的报警类型

  按照这个实现,虽然看着舒服,但是简洁加执行效率高,还是很帅的。

  最后来说下,我google的实现结果,感觉更好理解:

  1. // 预先定义不同报警类型
  2. const alarm1 = 1; // 0000 0001
  3. const alarm2 = 1 << 1; // 0000 0010
  4. const alarm3 = 1 << 2; // 0000 0100
  5. const alarm4 = 1 << 3; // 0000 1000
  6. const alarm5 = 1 << 4; // 0001 0000
  7. const alarm6 = 1 << 5; // 0010 0000
  8. const alarm7 = 1 << 6; // 0100 0000
  9.  
  10. const arr = [] // 用来存储包含的报警类型
  11. const alarm = 7 // 后台返回的10进制数字
  12.  
  13. // 是否包含alarm1
  14. if (alarm & alarm1) {}
  15.  
  16. // 是否包含alarm1和alarm2中的任意一个
  17. if (alarm & (alarm1 | alarm2)) {}
  18.  
  19. // 是否只包含alarm1和alarm2
  20. if (alarm === (alarm1 | alarm2)) {}
  21.  
  22. // 是否同时包含alarm1和alarm2
  23. if (alarm === (alarm | (alarm1 | alarm2)) ) {}

参考资料:

https://codeburst.io/using-javascript-bitwise-operators-in-real-life-f551a731ff5

JS中的位操作在实际项目中的应用的更多相关文章

  1. 项目中使用express,只是单纯项目中使用

    安装express npm install express --save-dv 建议安装到dev依赖里面 安装body-parse npm install body-parser --save-dev ...

  2. iOS中AOP与Method Swizzling 项目中的应用

    引子:项目中需要对按钮点击事件进行统计分析,现在项目中就是在按钮的响应代码中添加点击事件,非常繁琐.所以使用了AOP(面向切面编程),将统计的业务逻辑统一抽离出来. 项目中添加的开源库:https:/ ...

  3. Eclipse中定位当前文件在项目中的位置

    点击红色框内的按钮,就能定位当前文件在项目中的位置, 另外, 找到位置后记得再点击一下这个按钮, 要不然每次打开一个文件都会自动定位

  4. idel 中 生成 jar包 和项目中自己需要的包

    一.首先在自己的项目中创建一个类类中创建一个构造方法构造方法中传入一个字符串参数(这个字符串参数是为了传入路径) 在方法体内通过file类创建文件夹(换而言之就是项目中的包) 二 .就是对这个项目中的 ...

  5. JQuery复制内容到剪切板-jquery.zclip.js的使用,在公司项目中

    公司项目中有一个复制粘贴的内容,也试图找其他插件但都是浏览器兼容问题,在网上找这个插件挺不错的,FLASH,兼容各个浏览器,测试时要在服务器环境下,点击参考,参考这个网址,或者搜下标题这个插件,性能不 ...

  6. 将Ext JS 5应用程序导入Web项目中

    相关资料:http://docs.sencha.com/extjs/5.1/getting_started/welcome_to_extjs.html 原文地址: https://blog.csdn. ...

  7. Eclipse中使用maven构建web项目中遇到的问题

    构建过程参考: http://blog.csdn.net/smilevt/article/details/8215558/ http://www.cnblogs.com/dcba1112/archiv ...

  8. 理解css中Grid布局,在项目中如何实现grid页面布局

    简介 CSS中Grid是一种二维网格式布局方式.我们常规使用table.float.position.inline-block等布局,但它们遗漏了很多功能,例如垂直居中.后来css3中flexbox的 ...

  9. 通过iframe引入另外一个项目中的html片段到项目中,解决样式,高度,兼容等问题的策略

     <!--尾部开始--> <iframe src="http://172.16.24.11:9000/cartoon-web/footer_new"    m ...

随机推荐

  1. BackGround

  2. jsonpCallback: xx is not a function

    参考文献: https://www.cnblogs.com/lenghan/p/5777588.html 根据原理解读,发现同一个页面如果多个ajax请求调用的jsonpCallback名字相同的话, ...

  3. echarts Map(地图) 不同颜色区块显示

    以河南地图为例: 代码如下: <h3>天翼日必达完成率</h3> <div id="map" style="height:340px; te ...

  4. 0426JavaSE01day02.txt=========正则、Object、包装类详解

    正则表达式 基本正则表达式:正则表达式简介.分组(). "^"和"$" String正则API:matches方法.split方法.replaceAll方法 O ...

  5. AForge调用摄像头拍照时设置分辨率

    简单记录下AForge2.2.5.0版本调用摄像头拍照时设置分辨率的方法. FilterInfo info = _videoDevices[0];//获取第一个摄像头 _cameraDevice = ...

  6. mac下chrome 长截图(不使用插件)

    1. command + option + i (打开windows下的f12): 2. command + shipt + p ; 3. 输入命令: Capture full size screen ...

  7. css-reset 代码

    最常用 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:bef ...

  8. 3、if和while语句

    a=1 b=2 if a<b: print("Yes") print("Yes") print("Yes") print(" ...

  9. IMDB-二分类问题

    from keras.datasets import imdb from keras.utils.np_utils import to_categorical import numpy as np f ...

  10. Maven - <Profile>详解

    转载自:https://www.cnblogs.com/wxgblogs/p/6696229.html Profile能让你为一个特殊的环境自定义一个特殊的构建:profile使得不同环境间构建的可移 ...