Home > Web Front-end > JS Tutorial > body text

Detailed explanation of the usage and function of js operators single and vertical bars '|' and '||'

高洛峰
Release: 2016-12-07 15:43:39
Original
1844 people have browsed it

In js development applications, we usually encounter "|" and "||", so what do "|" and "||" mean in operations?

In js integer operation, it is equivalent to removing the decimal point, parseInt. When it is a positive number, it is equivalent to Math.floor(), when it is a negative number, it is equivalent to Math.ceil() Note:

1. Math.ceil() is used to round up.
2. Math.floor() is used to round down.
3. Math.round() Rounding is commonly used in our mathematics.

console.log(0.6|0)//0
console.log(1.1|0)//1
console.log(3.65555|0)//3
console.log(5.99999|0)//5
console.log(-7.777|0)//-7
Copy after login


Operation rules for single vertical bars

After reading the above example, we generally know that single vertical bars can be rounded, that is, only the positive part is retained, and the decimal part is removed, but "|0 ", how is the operation performed? Why can "|0" achieve the purpose of rounding? If the horizontal and vertical bar is not 0, what could it be?

With these questions, let’s look at the following example:

console.log(3|4); //7
console.log(4|4);//4
console.log(8|3);//11
console.log(5.3|4.1);//5
console.log(9|3455);//3455
Copy after login


This mentions the single vertical bar "|" but there is no javascript.

Okay, let me announce the answer here. In fact, the single vertical bar "|" is the result of the addition after converting to binary. For example, let’s take a simple example:

3|4

After converting to binary, 011|100 is added to get 111=7

4|4

After being converted to binary, 100|100 is added to get 100=4

8|3

After converting to binary, 1000 |011 is added to get 1011=11

and so on. I will not list them one by one here. The single vertical bar "|" operation is after converting to binary. Add the result!

JS double vertical bar operator

1. JS double vertical bar operator: yes or comparison. For example, null||'1', returns '1'; '2'||'1', returns '2'. That is, in the OR operator, the first one is true, and the subsequent ones do not need to be calculated. So we get '2'.

2. Use the double vertical bar operator "||" in js to return the first valid value

var objOne = undefined || 1 || null || new Date();
var objTwo = new Date();
var objThree = objOne || objTwo;
alert(objThree.toString()); //out put "1"
Copy after login


Summary

Performance comparison

In logical operator && ||, if && If the first operand of || is false, the second operand will not be considered and false will be returned directly; if the first operand of || is true, the second operand will not be considered and true will be returned directly. This is not the case with the & and | operators. They always have to compare two operands to get the result, so the performance of && and || will be better than & and |.

Function Usage

&& and || can only perform logical operations, while & and | can not only perform "logical operations", but also perform bit operations

Bit operations

& and | are originally bit operators. Therefore, "logical operations" can be performed because JS is a typeless language and each data type can be freely converted. When using & and | to perform "logical operations", in fact, true is converted into 1 and false. is converted to 0, and then performed bitwise operation:

document.write(true & false); //JS,结果为0
Copy after login


The above sentence, the example is equivalent to the logical operation being converted into the following bit operation, and executed:

document.write(1 & 0); //JS,结果为0
Copy after login


is also exactly Since & and | are bitwise operators, what is mentioned in the first point appears. They always need to compare two operands to get the result, which leads to lower performance than && and ||.

The above is a detailed explanation of the usage and functions of the js operators single vertical bar "|" and "||". For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!