This article will share some JavaScript tips to help you better understand the nuances of the language and improve your code. The article is mainly for junior and intermediate developers. Advanced developers may find it a bit boring, but everyone is welcome to read it! ?

Don’t forget to subscribe to my Telegram channel, where I will share interesting articles about front-end development! ?

Let’s get started!

1. Number separator

In numbers, you can use _ to improve the readability of your code.

const sixBillion = 6000000000;

// 難以閱讀
const sixBillion2 = 6000_000_000;

// 更易于閱讀
console.log(sixBillion2); // 6000000000

// 也可用于計(jì)算
const sum = 1000 + 6000_000_000; // 6000001000

2. Simplify using the optional chaining operator && and the ternary operator

For example, we want to simplify the following code:

const obj = null;
console.log(obj && obj.name);
const title1 = document.querySelector('.title');
const title = title1 ? title.innerText : undefined;

Rewrite the code using the optional chaining operator:

const obj = null;
console.log(obj?.name);
const title1 = document.querySelector('.title');
const title = title1?.innerText;

The optional chaining operator makes the code more concise and readable.

3. Use BigInt to solve large integer calculation problems

Unfortunately, the correctness of number calculations beyond Number.MAX_SAFE_INTEGER (9007199254740991) is not guaranteed in JS, which is frustrating.

For example:

Math.pow(2, 53) === Math.pow(2, 53) + 1; // true

// Math.pow(2, 53) => 9007199254740992

// Math.pow(2, 53) + 1 => 9007199254740992

In order to calculate large numbers, it is recommended to use BigInt. This will help avoid calculation errors.

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

4. in Alternatives to operator

To check if a property exists in an object, we usually use the in operator, but you can also use obj.hasOwnProperty().

Both have their drawbacks:

The
• in operator checks whether a property exists in an object, including properties inherited from the prototype. This can lead to unexpected results if you only want to check properties of the object itself, rather than those of its prototype.
The
• obj.hasOwnProperty() method only checks the properties of the object itself, excluding properties inherited from the prototype. However, this method will not work properly if the object overrides the hasOwnProperty method. In this case, calling obj.hasOwnProperty() may lead to errors or incorrect results.

Both methods do not take into account properties that can be accessed through the prototype chain. If you need to inspect properties in an object, including its prototype, you need to use other methods, such as Object.getPrototypeOf() or Object.prototype.isPrototypeOf().

Using in and obj.hasOwnProperty() can be inconvenient and inefficient when working with large objects or nested data structures. This may require multiple checks and method calls, slowing down your program's execution.

Simple example:

// `in` 運(yùn)算符

const obj = { name: 'John', age: 25 };
console.log('name' in obj); // true
console.log('gender' in obj); // false

// 檢查對(duì)象原型中的屬性
console.log('toString' in obj); // true

// `obj.hasOwnProperty()` 方法
const obj = { name: 'John', age: 25 };
console.log(obj.hasOwnProperty('name')); // true
console.log(obj.hasOwnProperty('gender')); // false

// 檢查對(duì)象原型中的屬性
console.log(obj.hasOwnProperty('toString')); // false

There is also a more convenient and safer operator Object.hasOwn().

const sixBillion = 6000000000;

// 難以閱讀
const sixBillion2 = 6000_000_000;

// 更易于閱讀
console.log(sixBillion2); // 6000000000

// 也可用于計(jì)算
const sum = 1000 + 6000_000_000; // 6000001000

5. Use <明> to declare private attributes #

In the past, in order to indicate that a field was private, we were used to adding a line in front of the attribute name (_). But now, we can use <聲> to declare the real private attributes:

#

const obj = null;
console.log(obj && obj.name);
const title1 = document.querySelector('.title');
const title = title1 ? title.innerText : undefined;

Use <替> instead of

6. ?? ||

   Use <算> to replace the
to check whether the value of the left side of the fortunes is null or undefined, and then return the value of the right side.

Example: <> ?? || In the above example, if the value of the left variable is not null or underfined, the

operator returns the value of the left variable on the left.

Otherwise, if the value of the left variable is null or undefined, the calculating symbol returns the value of the right variable.

const obj = null;
console.log(obj?.name);
const title1 = document.querySelector('.title');
const title = title1?.innerText;

??

Strings converted to numbers

7. Many developers use

   Functions to convert the string to numbers, but you can use the

   computing symbols to achieve the same results. It is more concise:

Both methods are effective, but parseInt() The computing symbols are simpler and clearer.

Math.pow(2, 53) === Math.pow(2, 53) + 1; // true

// Math.pow(2, 53) => 9007199254740992

// Math.pow(2, 53) + 1 => 9007199254740992

The brief method of the number of numbers to replace

8. Instead of using the function to give up the numbers downwards, it is better to use the position non -Math.floor() operator as the abbreviation:

I don't recommend you to use all the techniques described in this article. Some methods may damage your code, but it is important to understand them.

Math.floor() Thank you for reading this article! I hope you have learned something useful. Please look forward to the second part! ? ~~

The above is the detailed content of JavaScript capabilities you might not know about. Part 1. For more information, please follow other related articles on the PHP Chinese website!