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.
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 2print(); // errorprint(null); //printing null
You must be very familiar with JSON.stringify
, but did you know that you can also pass stringify
method to 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}
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]
Sometimes you want to delete the Boolean(v)## in the array # is the value of
false. There are only the following 6 types in JavaScript:
array.filter(Boolean)
array has not changed, and a new array is returned.
array .map(item => { // Do your changes and return the new item }) .filter(Boolean);
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'}
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]
<body oncontextmenu="return false"> <p></p> </body>
const object = { number: 10 };// Grabbing numberconst { number } = object;// Grabbing number and renaming it as otherNumberconst { number: otherNumber } = object;console.log(otherNumber); // 10
slice function, and Take a negative number as argument.
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]
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))
Promise.all is in the rejected state, it will immediately stop execution and throw an exception.
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 } ]
JS Tutorial"
The above is the detailed content of 10 common tricks used by JavaScript developers. For more information, please follow other related articles on the PHP Chinese website!