24 Practical JavaScript Development Tips

1. Initialize the array

If you want to initialize a one-dimensional array of a specified length and specify a default value, you can do this:

const array = Array(6).fill(''); 
// ['', '', '', '', '', '']

If you want to initialize a two-dimensional array of a specified length and specify a default value, you can do this:

const matrix = Array(6).fill(0).map(() => Array(5).fill(0)); 
// [[0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0]]

2. Array sum, maximum value, and minimum value

const array = [5,4,7,8,9,2];

Summing an array:

array.reduce((a,b) => a+b);

Array maximum value:

array.reduce((a,b) => a > b ? a : b);

Math.max(...array)

Array minimum value:

array.reduce((a,b) => a < b ? a : b);

Math.min(...array)

Using the array's reduce method can solve many array evaluation problems.

3. Filter error values

If you want to filter out values ​​such as false, 0, null, and undefined in an array, you can do this:

const array = [1, 0, undefined, 6, 7, '', false];

array.filter(Boolean);
// [1, 6, 7]

4. Use logical operators

If there is a piece of code like this:

if(a > 10) {
    doSomething(a)
}

This can be rewritten using logical operators:

a > 10 && doSomething(a)

This way of writing is much simpler. If the value before the logical AND && operator is false, a short-circuit operation will occur, and the execution of this sentence will end directly; if it is true, the code after && will continue to be executed, and the return value of the following code will be returned. Using this method can reduce a lot of if...else judgments.

5. Simplify judgment

If there is a judgment like the following:

if(a === undefined || a === 10 || a=== 15 || a === null) {
    //...
}

You can use an array to simplify this judgment logic:

if([undefined, 10, 15, null].includes(a)) {
    //...
}

This way the code will be much simpler and easier to expand. If you still need to judge whether it is equal to a, just add it to the array.

6. Clear the array

If you want to clear an array, you can set the length of the array to 0:

let array = ["A", "B", "C", "D", "E", "F"]
array.length = 0 
console.log(array) // []

7. Calculate code performance

The performance of your code can be calculated using the following operations:

const startTime = performance.now(); 
// Some procedures for(let i = 0; i < 1000; i++) {
    console.log(i)
}
const endTime = performance.now();
const totaltime = endTime - startTime;
console.log(totaltime); // 30.299999952316284

8. Concatenating Arrays

If we want to concatenate several arrays, we can use the spread operator:

const start = [1, 2] 
const end = [5, 6, 7] 
const numbers = [9, ...start, ...end, 8] // [9, 1, 2, 5, 6, 7 , 8]

Or use the concat() method of an array:

const start = [1, 2, 3, 4] 
const end = [5, 6, 7] 
start.concat(end); // [1, 2, 3, 4, 5, 6, 7]

However, when using the concat ncat() method, if the arrays to be merged are large, concat() function will consume a lot of memory when creating a separate new array. At this time, you can use the following method to merge the arrays:

Array.push.apply(start, end)

In this way, memory usage can be reduced to a great extent.

9. Object Verification Method

If we have an object like this:

const parent = {
    child: {
      child1: {
        child2: {
          key: 10
      }
    }
  }
}

Often we write like this to avoid errors caused by the non-existence of a certain level:

parent && parent.child && parent.child.child1 && parent.child.child1.child2

This code will look bloated, you can use JavaScript's optional chaining operator:

parent?.child?.child1?.child2

This implementation and effect are the same as the long list above.​

The optional chaining operator also works with arrays:

const array = [1, 2, 3];
array?.[5]

The optional chaining operator allows us to read the value of a property that is deep in a chain of connected objects without having to explicitly verify that every reference in the chain is valid. In the case where the reference is null or undefined, no error will occur and the short-circuit return value of the expression is undefined . When used with a function call, if the given function does not exist, undefined is returned.

10. Verify undefined and null

If there is such a code:

if(a === null || a === undefined) {
    doSomething()
}

That is, if you need to verify that a value is equal to null or undefined , and need to perform an operation, you can use the null value coalescing operator to simplify the above code:

a ?? doSomething()

In this way, the code following the control coalescing operator will be executed only when a is undefined or null. The null coalescing operator (??) is a logical operator that returns its right operand if its left operand is null or undefined , otherwise it returns its left operand.

11. Convert array elements to numbers

If you have an array and want to convert the elements in the array into numbers, you can use the map method to achieve it:

const array = ['12', '1', '3.1415', '-10.01'];
array.map(Number); // [12, 1, 3.1415, -10.01]

In this way, map will execute the Number constructor for each element of the array while traversing the array and return the result.

12. Converting a class array to an array

You can use the following method to convert array-like arguments into an array:

Array.prototype.slice.call(arguments);

Alternatively, you can use the spread operator:

[...arguments]

13. Object dynamic declaration properties

If you want to dynamically declare properties for an object, you can do this:

const dynamic = 'color';
var item = {
    brand: 'Ford',
    [dynamic]: 'Blue'
}
console.log(item); 
// { brand: "Ford", color: "Blue" }

14. Shorten console.log()

It is troublesome to write a lot of console.log() every time you debug. You can use the following form to simplify the code:

const c = console.log.bind(document) 
c(996) 
c("hello world")

This way, you only need to execute method c every time.

15. Get query parameters

If we want to get the parameters in the URL, we can use the properties of the window object:

window.location.search

If a URL is www.baidu.com?project=js&type=1, then the above operation will get ?project=js&type=1. If you want to get one of the parameters, you can do this:

let type = new URLSearchParams(location.search).get('type');

16. Rounding

If there is a number that contains decimals and we want to remove the decimals, we would use math.floor , math.ceil or math.round to eliminate the decimals. In fact, you can use the ~~ operator to eliminate the decimal part of a number, which is much faster than those methods for numbers.

~~3.1415926 // 3

In fact, this operator has many functions. It is usually used to convert variables into numeric types. Different types of conversion results are different:

• If it is a string of numeric type, it will be converted into a pure number;
• If the string contains values ​​other than numbers, it will be converted to 0;
• If it is a Boolean type, true will return 1 and false will return 0;
  

In addition to this method, we can also use bitwise AND to implement the rounding operation of numbers. Just add |0 after the number:

23.9 | 0 // 23
-23.9 | 0 // -23

This operation also directly removes the decimals after the number. This method is similar to the above method, and its performance is much better than JavaScript API.

17. Deleting Array Elements

If we want to delete an element in an array, we can use delete to achieve it, but the element after deletion will become undefined and will not disappear, and it will consume a lot of time during execution, which cannot meet our needs in most cases. So you can use the array's splice() method to delete array elements:

const array = ["a", "b", "c", "d"] 
array.splice(0, 2) // ["a", "b"]

18. Check if an object is null

If we want to check if an object is empty, we can use the following method:

Object.keys({}).length // 0
Object.keys({key: 1}).length // 1

Object.keys() method is used to get the keys of an object and returns an array containing these key values. If the returned array length is 0, then the object is definitely empty.

19. Use switch case instead of if/else

switch case has higher execution performance than if/else, and the code looks clearer.

if (1 == month) {days = 31;}
else if (2 == month) {days = IsLeapYear(year) ? 29 : 28;}
else if (3 == month) {days = 31;}
else if (4 == month) {days = 30;} 
else if (5 == month) {days = 31;} 
else if (6 == month) {days = 30;} 
else if (7 == month) {days = 31;} 
else if (8 == month) {days = 31;} 
else if (9 == month) {days = 30;} 
else if (10 == month) {days = 31;} 
else if (11 == month) {days = 30;} 
else if (12 == month) {days = 31;} 

Rewrite using switch...case:

switch(month) {
        case 1: days = 31; break;
        case 2: days = IsLeapYear(year) ? 29 : 28; break;
        case 3: days = 31; break;
        case 4: days = 30; break;
        case 5: days = 31; break;
        case 6: days = 30; break;
        case 7: days = 31; break;
        case 8: days = 31; break;
        case 9: days = 30; break;
        case 10: days = 31; break;
        case 11: days = 30; break;
        case 12: days = 31; break;
        default: break;
}

It looks relatively simple. You can rewrite if...else using arrays or objects, depending on the situation.

20. Get the last item in an array

If you want to get the last item in an array, you often write it like this:

const arr = [1, 2, 3, 4, 5];
arr[arr.length - 1] // 5

In fact, we can also use the slice method of the array to get the last element of the array:

arr.slice(-1)

When we set the parameter of the slice method to a negative value, the array values ​​will be intercepted from the back of the array. If we want to intercept the last two values, just pass in -2 as the parameter.

21. Convert value to Boolean

In JavaScript , the following values ​​will be converted to false when converting to a Boolean value, and all other values ​​will be converted to true:

• undefined
• null
• 0
• -0
• NaN
• ""
  

Usually if we want to convert an explicit value to a Boolean value, we use Boolean() method to convert it. We can actually use the !! operator to convert a value to a Boolean value. We know, one! Is to convert the object to Boolean type and negate it, two! It is to negate the negated Boolean value again, which is equivalent to directly converting the non-Boolean type value to a Boolean type value. This operation is much faster than Boolean() method because it is a native operation of the computer:

!!undefined // false
!!"996" // true
!!null // false
!!NaN // false

22. Format JSON code

I believe everyone has used the JSON.stringify method, which can convert a JavaScript object or value into a JSON string. Its syntax is as follows:

JSON.stringify(value, replacer, space)

It has three parameters:

• value : The value to be serialized into a JSON string.
• replacer is optional: if this parameter is a function, each property of the serialized value will be converted and processed by the function during the serialization process; if this parameter is an array, only the property names contained in this array will be serialized into the final JSON string; if this parameter is null or not provided, all properties of the object will be serialized.
• space is optional: specifies a blank string for indentation, used for pretty-printing; if the parameter is a number, it represents the number of spaces; the upper limit is 10. If this value is less than 1, it means there are no spaces; if the parameter is a string (when the string length exceeds 10 letters, the first 10 letters are taken), the string will be treated as spaces; if this parameter is not provided (or is null), there will be no spaces.
  

Typically, we write a parameter to convert a JavaScript object or value to a JSON string. You can see that it has two optional parameters, so we can use these two parameters to format the JSON code:

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

The output is as follows:

23. Avoid using eval() and with()

• with() inserts a variable into the global scope. So if another variable has the same name, it could cause confusion and overwrite the value.
• eval() is an expensive operation; each time it is called, the script engine must convert the source code into executable code.
  

24. Use objects instead of parameter lists for function parameters

When we use a parameter list to pass parameters to a function, it is fine if there are fewer parameters, but if there are more parameters, it will be troublesome because we must pass the parameters in the order of the parameter list. If you use TypeScript to write, you also need to put optional parameters after required parameters when writing.​

If our function has many parameters, we can consider passing them in the form of objects. When passing parameters in the form of objects, optional parameters do not need to be passed at the end, and the order of parameters is not important. What is passed via objects is also easier to read and understand than a parameter list.​

Let's look at an example:

function getItem(price, quantity, name, description) {}

getItem(15, undefined, 'bananas', 'fruit')

Let's use object passing:

function getItem(args) {
    const {price, quantity, name, description} = args
}

getItem({
    name: 'bananas',
    price: 10,
    quantity: 1, 
    description: 'fruit'
})

This is the end of this article about 24 practical JavaScript development skills. For more relevant JavaScript development skills, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!