Home >Web Front-end >JS Tutorial >10 useful tips for JavaScript developers

10 useful tips for JavaScript developers

hzcforward: 2020-06-17 09:36:282005browse

You may have missed these very useful tips.

Translated from 10 Super Useful Tricks for JavaScript Developers, author Mahdhi Rezvi.

We know that JavaScript is a language that is developing rapidly. Along with ES2020, many great features have been added. Honestly, you can write code in many different ways. To implement the same function, some codes are very long and some are very short. There are a few tricks you can do to make your code cleaner and clearer. The following tips will definitely be useful in your next development work.

Function Parameter Validator

JavaScript allows you to set default values for function parameters. With this feature, we can implement a little trick to verify function parameters.

const isRequired = () => { throw new Error('param is required'); };
const print = (num = isRequired()) => { console.log(`printing ${num}`) };
print(2); //printing 2
print(); // error
print(null); //printing null

Format JSON code

You must be very familiar with JSON.stringify, but did you know that you can also use the stringify method? Format your code. Actually it's very simple. The

stringify method has three parameters, which are value replacer and space. The last two parameters are optional, so we usually don't use them. If we want to indent the output code, we can use 2 spaces or 4 spaces.

console.log(JSON.stringify({ name:"John", Age:23 }, null, '  '));
>>> 
{
  "name": "John",
  "Age": 23
}

Deduplicate arrays

In the past, we would use the filter function to filter out duplicate values when deduplicating arrays. But now we can use the new Set feature to filter. Very simple:

let uniqueArray = [...new Set([1, 2, 3, 3, 3, "school", "school", 'ball', false, false, true, true])];
>>> [1, 2, 3, "school", "ball", false, true]

Remove the value where Boolean(v) is false in the array

Sometimes you want to delete the value where Boolean(v) is false in the array The value of . There are only the following 6 types in JavaScript:

undefined
null
NaN
0
Empty string
false

The easiest way to remove these values The solution is to use the following method:

array.filter(Boolean)

If you want to make some changes first and then filter, you can use the following method. Remember, the original array array has not changed, and a new array is returned.

array
  .map(item => {      // Do your changes and return the new item
  })
  .filter(Boolean);复制代码

Merge multiple objects at the same time

If you need to merge multiple objects or classes at the same time, you can use the following method.

const user = {
  name: "John Ludwig",
  gender: "Male",
};
const college = {
  primary: "Mani Primary School",
  secondary: "Lass Secondary School",
};
const skills = {
  programming: "Extreme",
  swimming: "Average",
  sleeping: "Pro",
};
const summary = { ...user, ...college, ...skills };

>>>
{
  name: 'John Ludwig',
  gender: 'Male',
  primary: 'Mani Primary School',
  secondary: 'Lass Secondary School',
  programming: 'Extreme',
  swimming: 'Average',
  sleeping: 'Pro'
}

Three dots are also called expansion operators.

Sort numeric arrays

JavaScript arrays have a native sort method arr.sort. By default, this sorting method converts array elements into strings and sorts them lexicographically. This default behavior can cause problems when sorting numeric arrays, so here is a way to deal with this problem.

[0, 10, 4, 9, 123, 54, 1].sort()
>>> [0, 1, 10, 123, 4, 54, 9]

[0, 10, 4, 9, 123, 54, 1].sort((a,b) => a-b);
>>> [0, 1, 4, 9, 10, 54, 123]

Disable right-click

Sometimes you may want to prevent users from right-clicking. Although this requirement is rare, it may come in handy.

<body oncontextmenu="return false">
  <div></div>
</body>

This simple code snippet can prevent users from right-clicking.

Renaming during destructuring

Destructuring assignment is a feature of JavaScript that allows values to be obtained directly from arrays or objects without the need for cumbersome declaration of variables and then assignment. For objects, we can redefine a name for the attribute name in the following way.

const object = { number: 10 };
// Grabbing number
const { number } = object;
// Grabbing number and renaming it as otherNumber
const { number: otherNumber } = object;
console.log(otherNumber); // 10

Get the last item in the array

If you want to get the last item in the array, you can use the slice function with a negative number as a parameter .

let array = [0, 1, 2, 3, 4, 5, 6, 7] 
console.log(array.slice(-1));
>>>[7]console.log(array.slice(-2));
>>>[6, 7]console.log(array.slice(-3));
>>>[5, 6, 7]

Wait for all Promises to be executed

Sometimes you may need to wait for several promises to be executed before performing subsequent operations. You can use Promise.all to execute these promises in parallel.

const PromiseArray = [
    Promise.resolve(100),
    Promise.reject(null),
    Promise.resolve("Data release"),
    Promise.reject(new Error('Something went wrong'))];
Promise.all(PromiseArray)
  .then(data => console.log('all resolved! here are the resolve values:', data))
  .catch(err => console.log('got rejected! reason:', err))

It should be noted that as long as one of Promise.all is in the rejected state, it will immediately stop execution and throw an exception.

If you want to ignore the resolved or rejected status, you can use Promise.allSettled. This is a new feature of ES2020.

const PromiseArray = [
  Promise.resolve(100),
  Promise.reject(null),
  Promise.resolve("Data release"),
  Promise.reject(new Error("Something went wrong")),
];
Promise.allSettled(PromiseArray)
  .then((res) => {
    console.log("here", res);
  })
  .catch((err) => console.log(err));
>>>
here [
  { status: 'fulfilled', value: 100 },
  { status: 'rejected', reason: null },
  { status: 'fulfilled', value: 'Data release' },
  {
    status: 'rejected',
    reason: Error: Something went wrong
        at Object.<anonymous> 
        at Module._compile (internal/modules/cjs/loader.js:1200:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
        at Module.load (internal/modules/cjs/loader.js:1049:32)
        at Function.Module._load (internal/modules/cjs/loader.js:937:14)
        at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
        at internal/main/run_main_module.js:17:47
  }
]