Detailed explanation of '&' and '|' in Javascript

1. Foreword:

Before starting the article, let me give you a few questions for everyone to take a look at:

var num1 = 1 & 0;
console.log(num1); // 0
var num2 = 'string' & 1;
console.log(num2); // 0
var num3 = true & 1;
console.log(num3); // 1
var num4 = undefined | false;
console.log(num4); // 0
var num5 = undefined | true;
console.log(num5); // 1
var num6 = 23 & 5;
console.log(num6); // 5
var num7 = 23 | 5;
console.log(num7); // 23

Did everyone do the above questions correctly? We have previously summarized "A Brief Talk on "&&" and "||" in JavaScript". "&&" and "||" are operators in logical operation expressions. So what does an “&” or a “|” mean? What are the characteristics? Next, we will reveal the secrets one by one.

First of all, we must understand that "&" and "|" are bitwise operators.

Bitwise operators are used to operate on values ​​at the most basic level, based on the bits in memory that represent the value. All values ​​in ECMAScript are stored in IEEE-754 64-bit format, but bit operators do not directly operate on 64-bit values. Instead, it first converts the 64-bit value to a 32-bit integer, then performs the operation, and finally converts the result to 64 bits. For developers, since the 64-bit storage format is transparent, the entire process appears as if only 32-bit integers exist.

For signed integers, the first 31 bits of the 32 bits are used to represent the value of the integer. Bit 32 represents the sign of the value: 0 represents a positive number, 1 represents a negative number. This bit representing the sign is called the sign bit, and the value of the sign bit determines the format of the other bits. Where positive numbers are stored in pure binary format, each of the 31 bits represents a power of 2. The first bit (called bit 0) represents 20, the second bit represents 21, and so on. Unused bits are represented by 0 and are ignored. For example, the binary representation of the value 18 is 0000 0000 0000 0000 0000 0000 0001 0010, or more concisely 10010. These are 5 significant bits, and these 5 bits alone determine the actual value.

Negative numbers are also stored in binary code, but the format used is two's complement. To calculate the two's complement of a value, you need to go through the following three steps:

(1) Find the binary code of the absolute value of this value (for example, if you require the two's complement of -18, first find the binary code of 18) ;

(2) Find the binary complement, that is, replace 0 with 1, and replace 1 with 0;

(3) Add 1 to the binary complement obtained.

In this way, the binary representation of -18 is obtained, that is, 1111 1111 1111 1111 1111 1111 1110 1110.

......In ECMAScript, when bit operators are applied to values, the following conversion process occurs in the background: the 64-bit value is converted into a 32-bit value, then the bit operation is performed, and finally Convert the 32-bit result back to a 64-bit value. This way, it appears on the surface that you are operating on a 32-bit value, just as binary operations are performed in a similar manner in other languages. But this conversion process also leads to a serious side effect, that is, when applying bit operations to the special NaN and Infinity values, these two values ​​​​will be treated as 0.

If bit operators are applied to non-numeric values, the Number() function will be used to convert the value to a numeric value (completed automatically), and then the bit operations will be applied. The result will be a numeric value. ...... (Intercepted from "Javascript Advanced Programming")

2. "&" (bitwise AND):

The bitwise AND operator consists of an ampersand character (&) means that it has two operator numbers. Essentially, the bitwise AND operation is to align each bit of two values ​​and perform an AND operation on two numbers at the same position.

Bitwise AND operation rules: 1 is returned only when the corresponding bits of the two values ​​are both 1. If any bit is 0, the result is 0.

I have talked too much about theoretical things before, but I think theory is very necessary. Next, let’s analyze the examples directly!

Let’s first look at num1, num2, num3 and num6 in the above question. We try to combine the above theory to analyze why the final result is output.

// num1是1和0进行“按位与”操作后的返回值。1的二进制码简写为1，0的二进制码简写为0，根据上面的规则，第二个操作符数为0，结果是0
var num1 = 1 & 0;
console.log(num1); // 0
// 第一个操作符数是字符串，按照前言里面的理论，对于非数值的操作符数，先使用Number()函数处理，结果返回NaN，NaN又会被当成0来处理。所以最终结果也是0
var num2 = 'string' & 1;
console.log(num2); // 0
// true是布尔类型值，同样使用Number()函数处理，处理后得到数值1，于是表达式就相当于“1 & 1” 进行位运算，当两个数值都为1的时候，结果返回1
var num3 = true & 1;
console.log(num3); // 1
// 23的二进制码是：...10111，5的二进制码是：...00101。然后每一位进行对齐处理，结合上面的规则，可以得出10111&00101的结果是：00101。00101就是5
var num6 = 23 & 5;
console.log(num6); // 5
// 再加个例子：24的二进制码为...11000，7的二进制码为...00111，相同位置的两个数执行AND操作，结果发现结果是...00000。所以最终结果是0，你算对了吗？
var add1 = 24 & 7;
console.log(add1); // 0

3. "|" (bitwise OR):

The bitwise OR operator is represented by a vertical bar symbol (|) and also has two operator numbers. Essentially, the bitwise OR operation also aligns each bit of the two values ​​and performs an OR operation on the two numbers at the same position.

Bitwise OR operation rules: 1 is returned as long as one of the corresponding bits of the two values ​​is 1, and 0 is returned only when both bits are 0.

Let’s take the top example and look at it!

// 第一个操作符数为undefined，第二个操作符数是false，均不是数值，所以都要先使用Number()函数处理，处理结果都是返回NaN，NaN又会被当成0处理，于是最终结果是0
var num4 = undefined | false;
console.log(num4); // 0
// 第一个操作符数相当于0，第二个操作符数相当于1，结合按位或的规则，最终结果是1
var num5 = undefined | true;
console.log(num5); // 1
// 23的二进制码是：...10111，5的二进制码是：...00101。然后每一位进行对齐处理，结合上面的规则，可以得出10111|00101的结果是：10111。10111就是23
var num7 = 23 | 5;
console.log(num7); // 23
// 再加个例子：24的二进制码为...11000，7的二进制码为...00111，相同位置的两个数执行AND操作，结果发现结果是...11111。所以最终结果是31，你算对了吗？
var add2 = 24 | 7;
console.log(add2); // 31

4. Others:

I believe there will be some friends who don’t know how to convert the numerical value into a standard binary code. Is there a quick way? Woolen cloth? The answer is yes.

I randomly found the address of an online conversion tool on the Internet: numerical to decimal conversion (click me to view). (Of course, you can also use other tools you find. In any case, achieving the effect is our ultimate goal)

Finally, I attach the regular chart I summarized in the process of converting binary by handwriting, still You can quickly convert numerical values ​​into binary codes, which is very powerful!

For more detailed explanations of “&” and “|” in Javascript, please pay attention to the PHP Chinese website!