• JavaScript位运算的妙用


    位运算的妙用: 奇偶数, 色值换算,换值, 编码等

    位运算的基础知识:

    1. 操作数是32位整数
    2. 自动转化为整数
    3. 在二进制下进行运算

    一.按位与&

    判断奇偶数:

    1. 奇数: num & 1 == 1
    2. 偶数: num & 1 == 0

    基本知识:

    1. 用法:操作数1 & 操作数2
    2. 规则:有 0 则为 0,双 1 则为 1
    3. 原理:先将操作数1操作数2转为二进制数,按照第2步进行计算
     
    

    二.按位或|

    按位或|取整

    1. num | 0

            eg: 5.23 | 0 => 5.23 | 0的结果是5

    按位或|

    1. 自身|自身=自身,可以比较数值相等(仅限于整数)

    三.按位非~

    按位非远算符(~),反转操作数的位. 表象是对数字为负, 然后减去1(-x-1)

            eg: ~9 = -9 -1 = -10

    按位非~: 判断数组中是否包含某个元素

    1. 不存在, indexOf返回-1
    2. ~-1 = -(-1)-1=1-1=0
    3. ~arr.indexOf(val) => 数组中存在val这个值时~arr.indexOf(val) !==0;  数组中不存在这个元素时 ~arr.indexOf(val)===0;
    4. if(~arr.indexOf(val)) {} // 如果数组中存在val

    按位非~取整

    1. ~~x 

            eg: ~~5.5677878 // 5

    四.按位异或^

    按位异或^ 归零律,恒等律,自反,集合律

    1. 归零律: a^a=0; 自己异或自己,位数上的值肯定相同
    2. 恒等律:a^0=a; 自己异或自己, 自己是啥结果是啥
    3. 自反: a^a^a=0^a = a; a三次^等于它自己
    4. 集合律: a^b^c == c^b^a, 与顺序无关

    按位异或^ 值交换

    1. 变量值为数字,完成值的交换(不用增加临时变量)

    示例: 

    1. let a = 10
    2. let b = 20
    3. a^=b //=> a = b^a => a^b
    4. b^=a //=> b = a^b => (a^b) ^b => a ^ (b^b) => a ^ 0 => a => 结果是b=a
    5. a^=b //=> a = b^a => b^b^b ^ (a^a) => b ^ 0 => b =>结果是: a = b
    6. console.log('a:', a) // 20
    7. console.log('b:', b) // 10

    五.左移运算符<<

    << 运算符执行左移位运算

    在移位运算过程中,符号位始终保持不变。

    如果右侧空出位置,则自动填充为 0;

    超出 32 位的值,则自动丢弃

    console.log(5 << 2); // 20

    基本知识:

    1. 用法:操作数1 << 左移位数
    2. 规则:符号位不变,按位左移,右边补0
    3. 原理:先把操作数1转换为二进制数

    六.右移运算符:>>

    >> 运算符执行有符号右移位运算。

    与左移运算操作相反,它把 32 位数字中的所有有效位整体右移,再使用符号位的值填充空位。

    移动过程中超出的值将被丢弃。

    console.log(1000 >> 8); // 3

    基本知识:

    1. 用法:操作数1 >> 右移位数
    2. 规则:符号位不变,按位右移,左边补0
    3. 原理:先把操作数1转换为二进制数


    七.二进制和十进制互转方法:

    因为计算机很多运算都直接或间接涉及二进制, 所以提一下相关知识:

    7-1: 人工计算法则:

    7-1-1: 二进制转十进制:

    1. 小数点: 从右到左用二进制的每个数乘以2的相应次方递增
    2. 小数点后: 从左到右用二进制的每个数乘以2的相应负次方递增

    eg: 将1001.011转换为十进制?

    整数部分(从右向左): 1*2^0 + 0*2^1+0*2^2+1*2^3=1+0+0+8=9

    小数部分(从左到右): 0*2^-1+1*2^-2+1*2-3=0+1/4+1/8=0+0.25+0.125=0.375

    注意: 这里的^不是位移符,是代表数字里的某某次方,比如2^3代表2的3次方

    所以1001.011转换为十进制的数字是9.375

    7-1-2: 十进制转换二进制:

    1. 整数: 除2取余,逆序排列
    2. 乘2取整,顺序排列

    比如9.375

    整数部分:

    9 / 2 => 商4, 余1

    4 / 2=> 商2, 余0

    2 / 2=> 商1, 余0

    1/2=> 商0, 余1

    小数部分: 0.375

    0.375 * 2 => 0.75 => Math.floor => 0(小于1, 所以继续)

    0.75 * 2 => 1.5 => Math.floor => 1(但是余下0.5,继续)

    0.5 * 2 => 1 => Math.floor => 1 (如果得到整数1, 没有小数部分就结束)

    所以9.375转化为二进制数字是1001.011

    7-2: JavaScript提供的二进制与十进制互转方法:

    1. 二进制转十进制方法: parseInt

    parseInt(string, radix) 

    eg: console.log(parseInt(1010,2)); // 10

    如果是小数, 没有现成的方法, 需要代码:

    1. // 小数部分 => 数字*(2index次方)
    2. function eachBinaryDigitPartToDecimal(binaryDigitPartArr) {
    3. return binaryDigitPartArr.map((currentValue, index) => {
    4. return Number(currentValue) * Math.pow(2, (-(index + 1)))
    5. })
    6. }
    7. // 如果该二进制只有整数部分则直接用 parseInt(string, radix) 处理
    8. function eachBinaryIntPartToDecimal(binaryDigit) {
    9. return parseInt(binaryDigit, 2)
    10. }
    11. /**
    12. * 将二进制小数(包含整数部分和小数部分)转换为十进制数
    13. * @param binaryDigit 二进制数(可能是整数,也可能是小数)
    14. */
    15. function floatToDecimal(binaryDigit) {
    16. // 如果该二进制只有整数部分则直接用 parseInt(string, radix) 处理
    17. if (Number.isInteger(binaryDigit)) {
    18. return eachBinaryIntPartToDecimal(binaryDigit)
    19. } else {
    20. // 将整数和小数部分的数字分开组成一个数组, 第一个元素是整数部分的数字, 第二个元素是小数部分的数字
    21. const binaryDigitNumArr = binaryDigit.toString().split(".")
    22. // 将二进制整数转换为十进制数
    23. const binaryIntParStr = binaryDigitNumArr[0]
    24. const decimalIntPartNum = eachBinaryIntPartToDecimal(binaryIntParStr)
    25. // 将二进制小数部分转换为十进制数
    26. const binaryDigitPartArr = binaryDigitNumArr[1].split("") // 将数字split成小数部分的每个数字作为元素的一元数组
    27. const eachDecimalFloatPartNum = eachBinaryDigitPartToDecimal(binaryDigitPartArr) // 数组的数字变成item * 2^(-index)
    28. const deciamlFloatPartNum = eachDecimalFloatPartNum.reduce((val, currentVal) => val + currentVal) // 数组元素相加
    29. return decimalIntPartNum + deciamlFloatPartNum
    30. }
    31. }

    2. 十进制转二进制: 字符串.toString(2)

    同理: 十进制转16进制是: 字符串.toString(16)

    eg: 

    const number = 10
    console.log(number.toString(2)); // 1010

    运用场景:

    rgb和16进制颜色相互转换:

    1. function colorRGBToHex(rgb) {
    2. // split的参数可以是正则
    3. const rgbArr= rgb.split(/[^\d]+/)
    4. // ['', '数字1', '数字2', '数字3', '']
    5. const color = rgbArr[1] << 16 | rgbArr[2] << 8 | rgbArr[3];
    6. return `#${color.toString(16)}`
    7. }
    8. console.log(colorRGBToHex('rgb(204, 0, 255)'))
    9. // 16进制转rgb格式
    10. function colorHexToRGB(hex) {
    11. // 转为6位的16进制, 0x??????
    12. let newHex = hex.replace('#', '0x'),
    13. r = newHex >> 16,
    14. g = newHex >> 8 & 0xff,
    15. b = newHex & 0xff
    16. return `rgb(${r},${g},${b})`
    17. }
    18. console.log(colorHexToRGB('#CC00FF'))

  • 相关阅读:
    【网络编程】第一章 网络基础(协议+OSI+TCPIP+网络传输的流程+IP地址+MAC地址)
    Kanzi Shader入门
    云原生存储解决方案
    zip-zip(子函数调用)
    html图片控制处理放大缩小移动多种案例(附源码)
    使用ElementUI结合Vue完善主页的导航菜单和书籍管理的后台数据分页查询
    【C++】常用排序算法
    精读A Study of Face Obfuscation in ImageNet
    如何根据自身的需求来选择合适的工控触摸平板电脑?
    vue echarts图表自适应屏幕变化
  • 原文地址:https://blog.csdn.net/qq_42750608/article/details/133348892