李仕臣

李仕臣的博客

183
文章
87
分类
136
标签

位运算符

  |  
 阅读次数

ECMAScript 位运算符

位运算符是在数字底层（即表示数字的 32 个数位）进行操作的。

重温整数

ECMAScript 整数有两种类型，即有符号整数（允许用正数和负数）和无符号整数（只允许用正数）。
在 ECMAScript 中，所有整数字面量默认都是有符号整数，这意味着什么呢？

有符号整数使用 31 位表示整数的数值，用第 32 位表示整数的符号，0 表示正数，1 表示负数。数值范围从 -2147483648 到 2147483647。

可以以两种不同的方式存储 二进制形式的有符号整数，一种用于存储正数，一种用于存储负数。

正数是以真二进制形式存储的，前 31 位中的每一位都表示 2 的幂，从第 1 位（位 0）开始，表示 20，第 2 位（位 1）表示 21。没用到的位用 0 填充，即忽略不计。例如，下图展示的是数 18 的表示法。

18 的二进制版本只用了前 5 位，它们是这个数字的有效位。把数字转换成二进制字符串，就能看到有效位：

1
2
var iNum = 18;
alert(iNum.toString(2));  //输出 "10010"

这段代码只输出 "10010"，而不是 18 的 32 位表示。其他的数位并不重要，因为仅使用前 5 位即可确定这个十进制数值。如下图所示：

(2^4 1) + (2^3 0) + (2^2 0) + (2^1 1) + (2^0 * 0)

负数也存储为二进制代码，不过采用的形式是二进制补码。计算数字二进制补码的步骤有三步：

  1. 确定该数字的非负版本的二进制表示（例如，要计算 -18的二进制补码，首先要确定 18 的二进制表示）

要确定 -18 的二进制表示，首先必须得到 18 的二进制表示，如下所示：

0000 0000 0000 0000 0000 0000 0001 0010

  1. 求得二进制反码，即要把 0 替换为 1，把 1 替换为 0

接下来，计算二进制反码，如下所示：

1111 1111 1111 1111 1111 1111 1110 1101

  1. 在二进制反码上加 1

最后，在二进制反码上加 1，如下所示：

1
2
3
4
1111 1111 1111 1111 1111 1111 1110 1101
                                      1
---------------------------------------
1111 1111 1111 1111 1111 1111 1110 1110

因此，-18 的二进制表示即 1111 1111 1111 1111 1111 1111 1110 1110。记住，在处理有符号整数时，开发者不能访问 31 位。

有趣的是，把负整数转换成二进制字符串后，ECMAScript 并不以二进制补码的形式显示，而是用数字绝对值的标准二进制代码前面加负号的形式输出。例如：

1
2
var iNum = -18;
alert(iNum.toString(2));	//输出 "-10010"

这段代码输出的是 "-10010"，而非二进制补码，这是为避免访问位 31。为了简便，ECMAScript 用一种简单的方式处理整数，使得开发者不必关心它们的用法。

另一方面，无符号整数把 最后一位 作为 另一个 数位 处理。

在这种模式中，第 32 位不表示数字的符号，而是值 2^31。由于这个额外的位，无符号整数的数值范围为 0 到 4294967295。对于小于 2147483647 的整数来说，无符号整数看来与有符号整数一样，而大于 2147483647 的整数则要使用位 31（在有符号整数中，这一位总是 0）。

把无符号整数转换成字符串后，只返回它们的有效位。

注意：所有整数字面量都默认存储为有符号整数。只有 ECMAScript 的位运算符才能创建无符号整数。

位运算 NOT(~)

位运算 NOT 由否定号（~）表示，它是 ECMAScript 中为数不多的与二进制算术有关的运算符之一。

位运算 NOT 是三步的处理过程：

  1. 把运算数转换成 32 位数字
  2. 把二进制数转换成它的二进制反码
  3. 把二进制数转换成浮点数

例如：

1
2
3
var iNum1 = 25;		//25 等于 00000000000000000000000000011001
var iNum2 = ~iNum1;	//转换为 11111111111111111111111111100110
alert(iNum2);		//输出 "-26"

位运算 NOT 实质上是对数字求负，然后减 1，因此 25 变 -26。用下面的方法也可以得到同样的方法：

1
2
3
var iNum1 = 25;
var iNum2 = -iNum1 -1;
alert(iNum2);	//输出 -26

位运算 AND(&)

位运算 AND 由和号（&）表示，直接对数字的二进制形式进行运算。它把每个数字中的数位对齐，然后用下面的规则对同一位置上的两个数位进行 AND 运算：

位运算 OR(|)

位运算 OR 由符号（|）表示，也是直接对数字的二进制形式进行运算。在计算每位时，OR 运算符采用下列规则：

位运算 XOR(^)

左移运算(<<)

有符号右移运算(>>)

无符号右移运算(>>>)

正数 与 有符号右移运算 相同;
负数 不同

语法逻辑判断

ProgrammingLang
  |  
 阅读次数

if语法的简单判断(以下语句等价)

1
2
3
if (this.state.interval) { window.clearInterval(this.state.interval) }
!!this.state.interval && window.clearInterval(this.state.interval)
demo: !!this.state.interval && console.log('%c 123','color:red;font-size:30px');

最大值算法

Algorithm
  |  
 阅读次数

最大值

1
2
3
4
5
6
7
8
9
/** 计算最大数算法 1*/
 let max = 0;
 for (let i = 1; i < dataLen; i++) {
   const item = ArrData[i];
   const preItem = ArrData[i - 1]
   item > preItem ?
     item > max ? max = item : null
     : preItem > max ? max = preItem : null
 }
1
2
3
4
5
6
/** 计算最大数算法 2*/
 let max = 0;
 for (let i = 0; i < dataLen; i++) {
   const item = ArrData[i];
   item > max ? max = item : null
 }

延迟判断算法

Algorithm
  |  
 阅读次数

延迟判断算法

延迟判断 为了 降低 [vue,react] 框架中的, [onChange,click…] 事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/** 组件内，函数外 缓存状态 */
this.state = {
  cacheValueArr: []
};

/** 核心思想是：
* 先缓存一次数据， 
* 定时器 2S 后 再缓存一次数据 
* 对比判断 值 是否 相等，代表没有改变
*/
onChange(e) {
  let cacheArr = this.state.cacheValueArr; // 先引用缓存的状态
  let len = cacheArr.push(e); // push方法 会返回 长度，改变原数组
  let lastOne = cacheArr.slice(-1); // 数组最后一位的 值

  setTimeout(() => {
    let lastLen = this.state.cacheValueArr.length; // 2S 后再缓存 长度有无变化
    let lastOnes = this.state.cacheValueArr.slice(-1); // 2S 后再缓存 值有无变化
    if (len === lastLen) {
      this.setState({
        curE: e
      })
      debugger
    }
  }, 2000);
}
```` 

# 函数防抖动

/**

  • Created by hjl on 2017/8/15.
    */
    var throttle = function (func, interval) {
    var self = func,
    timer,
    firstTime = true;

    return function () {
    var args = arguments,
    me = this;
    if (firstTime) {
    self.apply(me, args);
    return firstTime = false;
    }
    if (timer) {
    return false;
    }

    timer = setTimeout(function () {
    clearTimeout(timer);
    timer = null;
    self.apply(me, args);
    }, interval || 3000);
    };
    };

    1
    2

    **借鉴方法**

    /**

    • 函数防抖
      *
    • @param {any} method 方法名
      */
      function debounce(method) {
      clearTimeout(method.tId);
      method.tId = setTimeout(function() {
      method.call();
      }, 200);
      }
      ````