10 Tips JS

1. Filter unique value

Set es6 new objects are introduced, with the extended operator [...] used together, we can use a unique value to filter array.

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

And 2. OR

Ternary operator is fast simple method for the preparation of the conditional statement, the following examples:

x > 100 ? 'above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'above 200' : 'Between 100-200') : 'Below 100';

Sometimes the use of the ternary operator processing will be very complicated. We can use the (&&) or (||) operator to write an expression. This is commonly referred to as 'short-circuited' or 'short circuit operation'.

How it works

Use && returns for the first false value. If the operation of each of the calculated values are to true , then returns the last calculated expression.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0

Use ||returns to the first 真value. If the calculation result of each operand are false, it returns the last calculated expression.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null

eg1:

Suppose we want to return the length of a variable, but we do not know the type of the variable.

We can use the if/elsestatement to check foois acceptable types, but it can become very tedious. Or run can help us streamline operations

return (foo || []).length

If foo is true, it will be returned. Otherwise, it returns an empty array of length.

eg1:

Have you experienced problems accessing nested object properties? You may not know where the object or whether there is a sub-properties, which may lead to frustrating errors.

Suppose we want to this.statevisit in a named dataproperty, but in our program a successful return before acquisition request, data is undefined.

We use according to its position, the call this.state.datamay prevent our application running. To solve this problem, we can further its judgment:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

But this seems to be repeated. '或'  Operator provides a more elegant solution:

return (this.state.date || 'Fetching Data');

3. transformed into a Boolean value

In addition to otherwise defined, all values ​​in JavaScript are true value, false values ​​are 0, "", null, undefined, NaN, false.

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

4. converted to a string

To quickly convert a number to a string, we can use the concatenation operator +followed by a set of empty quotes "".

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

The digital conversion

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

6. Better performance computing

ES7 from the start, you can use the index operator **as a shorthand for power, than to write Math.pow(2, 3) faster. This is a very simple thing, but the reason why it appears in the list, is because not many tutorials updated this operator.

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

7. Fast floating point to integer

If you want to convert floating point numbers to integers, it can be used Math.floor(), Math.ceil()or Math.round(). But there is a faster method can be used |(or operator bit) floating-point number will be truncated to an integer.

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

8. The array will be truncated

If you delete the value from the end of the array, than there is splice()a faster way.

For example, if you know the size of the original array, you can redefine its lengthattributes, like this

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

This is a particularly elegant solution. However, I found slice()a faster method of operation time. If speed is your primary goal, consider using:

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

9. Gets the last item in the array

Array method slice()can accept negative integer, if it is provided, it will accept the value end of the array, rather than 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]

10. Gets the last item in the array

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

stringify()There are two optional parameters: a replacerfunction, and a space can be used for filtering JSON displayed

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