Uncommon but useful operators in JavaScript

foreword

If I were to ask you what are the most common operators you use in JavaScript, you might answer the following:

+、 -、 *、/、 %、 =、 ?、 !、 &&、 ||、 >、 <

If I ask you about operators that you know but are not commonly used or will not be used, you may answer the following:

&、 |、 ~、 ^、 ,

But none of the above is what this article wants to talk about. This article wants to talk about other kinds.

double exclamation point!!

It's not really a special kind of operator, but 非运算符!two consecutive calls to it.

There is nothing to say about it, and I understand everything. Because JavaScript has implicit conversion types, like '', 0, null, undefinedwill be converted to false.

However, in some source codes, in order to understand better, it may also make the code more rigorous. Usually, double exclamation marks are used to 空force-convert a state into booleana type for subsequent more rigorous judgments.

null coalescing operator??

His usage and ||similarity are used for judgment when taking values.

The difference is that  when the previous value is false, the subsequent value ||will be calculated .  Instead, the subsequent value is calculated only when  the  ||preceding?? value is  summed. That's why he called the null coalescing operator.undefinednull

console.log(null ?? 'default string');  //  "default string"
console.log(undefined ?? 33); // 33
console.log(false ?? 22); // false
console.log("" ?? 11); // ""
console.log(0 ?? 42); // 0

Everyone should be able to imagine the usage scenarios, which are ||somewhat similar to , except that they are ||more detailed. It is somewhat similar to the usage of the default assignment equal sign in the ES6 function parameter.

It is also equivalent to an omission of the three purposes, which looks more concise and clear.

// let person = data.xx ? data.xx : {name: 'NiGuang'}; 三目
let person = data.xx ?? {name: 'NiGuang'};

It should be noted that it cannot be shared with && or || operators, because the operation priority/operation order between the null value coalescing operator and other logical operators is undefined) In this case, [ ] will be thrown SyntaxError.

optional chaining operator?.

The first thing to note is that this operator is not a question mark ?but ?.an extra dot after it. There is an essential difference between the two.

The optional chaining operator (  ?. ) allows reading the value of properties located deep in the chain of connection objects without having to explicitly verify that each reference in the chain is valid. ?. The operator functions similarly to  . the chained operator, except that instead of causing an error in the case of a reference to null (nullish) ( null or  undefined), the expression short-circuits the return value  undefined. When used with a function call, returns if the given function does not exist  undefined.

The optional chaining operator will make expressions shorter and more concise when trying to access object properties that may not exist. The optional chaining operator is also helpful when exploring the contents of an object if you are not sure which properties must be present.

After reading the introduction of MDN, you still don’t understand? Give a small example to tell you how to use it!

let grade = {
    data: {
        productList: []
    },
    resp: 'success',
    code: 1000
}

// 以前获取层级深得数据，需要先用if判断每一层是否存在，不然会报错。
console.log(grade.data.productList[0].name);
 // VM2765:9 Uncaught TypeError: Cannot read properties of undefined (reading 'name') at <anonymous>:9:39
 
 let grade1 = {
    data: {},
    resp: 'success',
    code: 1000
}

/** 使用了可选链式运算符之后直接写，如果在其中一层没找到会自动赋值为undefined，不再向 后查找，避免了使用if进行一层层判断。
*  当接口未按规定返回时，也不会报错阻塞程序导致白屏。
*  当然代价是你要对使用这个值进行判空处理，不然在用的时候undefined还是会报错。
*/
console.log(grade1.data?.productList[0]?.name); // undefined

~~

That's it, that's it? I have seen what you said before, and I have already used it.

Have you seen this one?

It's the same as the preceding double exclamation mark, and it's not a special operator either. Rather, it is two consecutive repeated calls to a single operator, that is, ~two calls to a bitwise operator. We don't often use bit operations, and we don't go deep into them, so we mainly look at ~~their functions.

effect

It can be used to round down decimals.

That's it, that's it? Slipped, slipped, and after talking for a long time, I thought it was something, so I just finished Math.floor().

Don't go, brother, if Math.floor() can solve it, then of course I won't talk about this. Let me tell you about my experience with him.

experience

Recently, when brushing leetcode, I encountered such a question, find the square root of a number, and round down if there is a decimal. For example, the square root of 8 is 2.

This made me very happy.  1 + 1What is the difference between implementing it in JavaScript and equaling it? So I submitted Math.floor(Math.sqrt(x)).

After submitting, it shows that the running time is 68 ms, beating 79.59% of the people, and most people have adopted this method. Looking at this figure close to 80%, I was wondering what method was used by the 20% to be faster than this? With curiosity, I clicked on the code with the least time, and I saw it ~~(Math.sqrt(x)).

Similarities and differences with Math.floor()

quick

I said earlier that he did two bit operations in a row, and then I introduced my experience of meeting him.

Then its advantage over Math.floor() is obvious, that is, it is fast and fast. It only took 40ms, which is a full 28ms faster than Math.floor().

Negative numbers are also rounded down

The second difference is that when rounding negative numbers, Math.floor() is rounded according to the mathematical smallness (the larger the negative value, the smaller), but it is ~~still rounded by erasing fractions.

console.log(Math.floor(-2.8)); // -2
console.log(~~-2.8); // -3

>>

This one looks like a bit operator, and his name is 右移运算符. If I hadn't brushed Leetcode, I probably wouldn't have met him in my life. Here's what MDN says about him:

The right shift operator (  >> ) shifts the binary representation of an operand, which can be a numeric value or a BigInt type, to the right by a specified number of bits. The bit shifted out on the right is discarded, and the vacant bit shifted out on the left is filled with the sign bit (the leftmost bit). This operation is also known as "sign-propagating right shift" or "arithmetic right shift" because the return value has the same sign bit as the first operand.

It doesn't matter if you don't understand it. In the scenes I have seen, the place where people use it the most is to find the index of the intermediate value of the dichotomy.

When calculating the intermediate value, it should be noted that the left side is the sum of two numbers, and the right side is always 1.

For example the following example

// 求（2,7）的中间值
console.log(Math.floor(2 + (7 - 2) / 2));  // 4
console.log(Math.floor((2 + 7) / 2));  // 4
console.log((2 + 7) >> 1);  // 4

The same advantage is still  快快快that the top-ranked JavaScript algorithms used in leetcode basically use bit operations. It can be fast enough to help you outrun 10% of your opponents.