Amiens has a few JS development tips to make your code cleaner

The article comes from the public number: front-end development community, author: gun brother

This article gives you a few JS development tips, some people may already know, but for novices is still quite useful, it can make your code more concise.

1 Convert the Boolean value

In addition to the regular Boolean values true and false JavaScript treats all other values as 'truthy' or 'falsy'.

Unless otherwise defined, all values in JavaScript are 'truthy', except 0 “” null undefined NaN and of course false which are 'falsy'

We can easily switch between true and false by using negative operators. It also converts the type to "boolean".

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"

2 Convert the number

You can quickly achieve the opposite effect by using the addition operator +

let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

This can also be used to convert Boolean values to numbers, as shown below

 console.log(+true);  // Return: 1 
 console.log(+false); // Return: 0

In some contexts, + is interpreted as a connection operator, not a addition operator. When this happens (you want to return an integer instead of a float), you can use two wavy signs: ~~

Two waves in a row effectively negate the operation because — ( — n — 1) — 1 = n + 1 — 1 = n . In other words, ~—16 equals 15

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

Although I can't think of many use cases, the bit-by-bit NOT operator can also be used on boolean values: ~true = \-2 and ~false = \-1

3 Transform the string

To quickly convert numbers to strings, we can use the connection operator + by a set of empty quotation marks "" .

const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

4 Floating points to integers

If you want to convert floats to integers, you can use Math.floor() Math.ceil() or Math.round() B ut there is a faster way to use | (bit or operator) truncates floating points into integers.

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

| behavior depends on whether positive or negative numbers are being processed, so it's a good idea to use this shortcut only if you're sure.

If n is positive, n | 0 is effectively rounded down. I f n is negative, it is effectively rounded up. More precisely, this action removes anything after the decimal point and truncates the floating point to an integer.

You can use ~~ to get the same rounding effect, and as mentioned above, virtually any bit operator forces the floating point to be an integer. These special operations work because once forced into integers, the value remains the same.

Delete the last number

按位或 operator can also be used to remove any number of numbers from the end of an integer. This means that we don't need to use code like this to convert between types.

let str = "1553";
Number(str.substring(0, str.length - 1));

Instead, you can write this bit by bit or operator:

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

5form JSON

Finally, you may have used JSON.stringify before, but did you realize that it can also help you indent JSON?

The stringify() method has two optional parameters: a replacer function that filters the displayed JSON and a space value.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

6 Take the last item in the array

The array method slice() can accept a negative integer, and if it is provided, it accepts the value at the end of the array instead of the value at the beginning of the array.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

The 7es6 array goes heavy

Set object types are introduced in ES6, with the unwind operation... Together, we can use it to create a new array with only unique values.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]

Before ES6, isolating the only value would involve much more code than that.

This technique applies to arrays that contain basic types: undefined null boolean string and number ( If you have an array that contains objects, functions, or other arrays, you need a different method!) ）

8 More elegant operations

Starting with ES7, you can use the exponential operator ** is shorthand for power, which is faster than writing Math.pow(2, 3) It's a simple thing, but it appears in the list because not many tutorials have updated this operator.

console.log(2 ** 3); // Result: 8

This should not be confused with the symbol, which is commonly used to represent exponents, but in JavaScript it is a bit-by-bit or operator.

Prior to ES7, shorthand existed only for power based on 2 using a bit-by-bit left-shift operator