Some symbols that are practical and easy to use in js, you must have never used them

Front-end interview question bank ( necessary for interview) recommendation: ★★★★★

Address: front-end interview question bank

foreword

Hello everyone, I am simple, and my ideal is to use technology to solve various problems encountered in life .

Bitwise negation operator: ~

Bitwise negates the return value (the bitwise negation of all positive integers is the negative of itself + 1, the bitwise negation of all negative integers is the absolute value of itself + 1, and the bitwise negation of zero is - 1. Among them, the bitwise inversion will also force the return value, converting the string 5 into the number 5, and then bitwise inversion. False is converted to 0, and true is converted to 1.)

In a word: the return value will be multiplied by -1, and then minus 1

~false === -1
~true === -2

indexOf usually returns -1 if no value is found, but it just works for me here

const arr = [1,2,3]
const index = arr.indexOf(4)
if(!~index) {
    console.log('没找到索引')
}

double bit operator ~~

Binary operators can be used instead of positive Math.floor( )and negative Math.ceil( ). The advantage of the double negated bit operator is that it performs the same operation faster.

Math.floor(4.9) === 4      //true
// 简写为：
~~4.9 === 4      //true

Note, however, that the result ~~ of the operation Math.floor( ) is the same for positive numbers, and Math.ceil( )the same for negative numbers:

~~4.5                // 4
Math.floor(4.5)      // 4
Math.ceil(4.5)       // 5

~~-4.5        		// -4
Math.floor(-4.5)     // -5
Math.ceil(-4.5)      // -4

right shift operator >>

operator performs a signed right shift operation. In contrast to the left shift operation, it shifts all significant bits to the right in a 32-bit number and fills the gap with the value of the sign bit. Values exceeded during the move are discarded.

For example: Suppose we move one bit to the right, it is actually divided by 2 and then rounded down, if we move 2 bits, it is divided by 4 and rounded down, and so on, anyway, it is 2 to the nth power.

4 >> 1 // 2
9 >> 1 // 4
15 >> 2 // 3

left shift operator <<

Same as above, here is multiplication, so I won’t explain it

+ positive sign

This symbol is both a plus sign and a plus sign, and it is the most elegant way to convert a value into a number.

const timestamp = +new Date() // 时间戳
console.log(+'18' === 18) // true

Null coalescing operator??

The value on the right is only used if the value on the left is null or undefined.

let obj = {age: 0, name: '', sex: null, has: false};
obj.has ?? '111'; // false
obj.age ?? '111'; // 0
obj.name ?? '111'; // ''
obj.sex ?? '111';  // 111
obj.addr ?? '111'; // 111

Null assignment operator ??=

Similar to the null coalescing operator?? (constant, variable).
When ??= the value on the left is null or undefined, the value on the right will be assigned to the variable on the left.

let obj = {name: '', age: 0, has: false, sex: null}
obj.name ??= 'jack'
obj.age ??= 18
obj.has ??= true
obj.sex ??= 'man'
obj.add ??= '...'
console.log(obj) // {name: '', age: 0, has: false, sex: 'man', add: '...'}

The optional chaining operator?.

Optional chaining operators are often seen in ordinary times, but they may be relatively rare when objects are valued with square brackets.

let obj = {name: '', age: 0, has: false, sex: null}
obj?.['name']?.['length']
obj.getName?.()

Using BigInt to support large integer computing problems

ES2020 introduces a new data type BigInt, which is used to represent integers with any number of digits.
For example

// 超过 53 个二进制位的数值（相当于 16 个十进制位），无法保持精度
Math.pow(2, 53) === Math.pow(2, 53) + 1 // true

// BigInt
BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1) // false

In addition to using BigInt to declare a large integer, you can also use the form of adding n after the number

1234 // 普通整数
1234n // BigInt

`#`Make class fields private with hash prefix

Fields marked with a hash prefix in the class #will be private, and subclass instances will not be able to inherit

For example

class Person {
    #privateField;
    #privateMethod() {
        return 'hello world';
    }
    constructor() {
        this.#privateField = 42;
    }
}

const instance = new Person()
console.log(instance.privateField); //undefined
console.log(instance.privateMethod); //undefined

As you can see, properties privateFieldand methods privateMethodare privatized and cannot be obtained in the instance

Front-end interview question bank ( necessary for interview) recommendation: ★★★★★

Address: front-end interview question bank