Home Web Front-end JS Tutorial Detailed explanation of the usage and function of js operators single and vertical bars '|' and '||'

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

Dec 07, 2016 pm 03:43 PM

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)!


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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Dec 17, 2023 pm 06:55 PM

Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price

Recommended: Excellent JS open source face detection and recognition project Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages ​​and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side

How to create a stock candlestick chart using PHP and JS How to create a stock candlestick chart using PHP and JS Dec 17, 2023 am 08:08 AM

How to use PHP and JS to create a stock candle chart. A stock candle chart is a common technical analysis graphic in the stock market. It helps investors understand stocks more intuitively by drawing data such as the opening price, closing price, highest price and lowest price of the stock. price fluctuations. This article will teach you how to create stock candle charts using PHP and JS, with specific code examples. 1. Preparation Before starting, we need to prepare the following environment: 1. A server running PHP 2. A browser that supports HTML5 and Canvas 3

PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts Dec 18, 2023 pm 03:39 PM

With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese

Mind map of Python syntax: in-depth understanding of code structure Mind map of Python syntax: in-depth understanding of code structure Feb 21, 2024 am 09:00 AM

Python is widely used in a wide range of fields with its simple and easy-to-read syntax. It is crucial to master the basic structure of Python syntax, both to improve programming efficiency and to gain a deep understanding of how the code works. To this end, this article provides a comprehensive mind map detailing various aspects of Python syntax. Variables and Data Types Variables are containers used to store data in Python. The mind map shows common Python data types, including integers, floating point numbers, strings, Boolean values, and lists. Each data type has its own characteristics and operation methods. Operators Operators are used to perform various operations on data types. The mind map covers the different operator types in Python, such as arithmetic operators, ratio

Analysis of the meaning and usage of += operator in C language Analysis of the meaning and usage of += operator in C language Apr 03, 2024 pm 02:27 PM

The += operator is used to add the value of the left operand to the value of the right operand and assign the result to the left operand. It is suitable for numeric types and the left operand must be writable.

The relationship between js and vue The relationship between js and vue Mar 11, 2024 pm 05:21 PM

The relationship between js and vue: 1. JS as the cornerstone of Web development; 2. The rise of Vue.js as a front-end framework; 3. The complementary relationship between JS and Vue; 4. The practical application of JS and Vue.

Python entry to proficiency: from zero basics to project development Python entry to proficiency: from zero basics to project development Feb 20, 2024 am 11:42 AM

1. Introduction to Python Python is a general-purpose programming language that is easy to learn and powerful. It was created by Guido van Rossum in 1991. Python's design philosophy emphasizes code readability and provides developers with rich libraries and tools to help them build various applications quickly and efficiently. 2. Python basic syntax The basic syntax of Python is similar to other programming languages, including variables, data types, operators, control flow statements, etc. Variables are used to store data. Data types define the data types that variables can store. Operators are used to perform various operations on data. Control flow statements are used to control the execution flow of the program. 3.Python data types in Python

See all articles