Preface
Just like all other programming languages, JavaScript has many tricks to accomplish simple and difficult tasks. Some tips are well known, while others are enough to surprise you. Let's take a look at seven JavaScript tips you can start using today!
Original link:/javascript-…
Array deduplication
Array deduplication may be easier than you think:
var j = [...new Set([1, 2, 3, 4, 4])] >> [1, 2, 3, 4]
Very simple or not!
Filter out the falsy value
Is it necessary to filter out the falsy values (0, undefined, null, false, etc.) from the array? You may not know about this trick:
let res = [1,2,3,4,0,undefined,null,false,''].filter(Boolean); >> 1,2,3,4
Create an empty object
You can create an seemingly empty object using { }, but the object still has __proto__ and the usual hasOwnProperty along with other object methods. However, there is a way to create a pure "dictionary" object:
let dict = (null); // dict.__proto__ === "undefined" // No object properties exist until you add them
The objects created in this way are very pure, without any attributes or objects, and are very clean.
Merge objects
The need to merge multiple objects in JavaScript already exists, especially when we start creating classes and widgets with options:
const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };
const summary = {...person, ...tools, ...attributes};
/*
Object {
"computer": "Mac",
"editor": "Atom",
"eyes": "Blue",
"gender": "Male",
"hair": "Brown",
"handsomeness": "Extreme",
"name": "David Walsh",
}
*/
These three points (...) make the task easier!
Require function parameters
Being able to set default values for function parameters is a great addition to JavaScript, but check out this trick to require passing values for a given parameter:
const isRequired = () => { throw new Error('param is required'); };
const hello = (name = isRequired()) => { (`hello ${name}`) };
// This will throw an error because no name is provided
hello();
// This will also throw an error
hello(undefined);
// These are good!
hello(null);
hello('David');
Deconstruct and add alias
Deconstruction is a very popular addition to JavaScript, but sometimes we prefer to reference these properties with other names, so we can take advantage of aliases:
const obj = { x: 1 };
// Grabs as { x }
const { x } = obj;
// Grabs as { otherName }
const { x: otherName } = obj;
Helps avoid naming conflicts with existing variables!
Get query string parameters
Get the parameter value in the url or append the query string. Before this, we usually use regular expressions to get the query string value. However, now there is a new API. For details, you can view it.here, let us handle url in a very simple way.
For example, now we have such a url, "?post=1234&action=edit", we can use the following techniques to deal with this url.
// Assuming "?post=1234&action=edit"
var urlParams = new URLSearchParams();
(('post')); // true
(('action')); // "edit"
(('action')); // ["edit"]
(()); // "?post=1234&action=edit"
(('active', '1')); // "?post=1234&action=edit&active=1"
It's much easier than we used in the past!
JavaScript has changed a lot over the years, but my favorite part of JavaScript is the speed at which language improvements we've seen. Despite the ever-changing dynamics of JavaScript, we still need to adopt some good tips; save these tips in the toolbox for use when needed!
So what are your favorite JavaScript tips?
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support.