Like all other programming languages, JavaScript has many tricks to do both simple and difficult tasks. Some techniques are well known, while others will surprise you. Let’s take a look at seven JavaScript tips you can start using today!

The original link: davidwalsh. Name/javascript -…

Array to heavy

Array de-duplication may be easier than you think:

var j = [...new Set([1.2.3.4.4])]
>> [1.2.3.4]
Copy the code

It’s easy no!

Filter out the Falsy value

Do I need to filter out falsy values (0, undefined, null, false, etc.) from the array? Here’s a trick you may not know:

let res = [1.2.3.4.0.undefined.null.false.' '].filter(Boolean);
>> 1.2.3.4
Copy the code

Creating an empty object

You can use {} to create a seemingly empty object that still has __proto__ and the usual hasOwnProperty and other object methods. However, there is a way to create a pure “dictionary” object:

let dict = Object.create(null);

// dict.__proto__ === "undefined"
// No object properties exist until you add them
Copy the code

Objects created this way are very pure, without any properties or objects, 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' };

constsummary = {... person, ... tools, ... attributes};/* Object { "computer": "Mac", "editor": "Atom", "eyes": "Blue", "gender": "Male", "hair": "Brown", "handsomeness": "Extreme", "name": "David Walsh", } */
Copy the code

These three points (…) Make the task easier!

Require function parameters

Being able to set default values for function arguments is a great addition to JavaScript, but check out this trick, which requires passing values for a given argument:

const isRequired = (a)= > { throw new Error('param is required'); };

const hello = (name = isRequired()) = > { console.log(`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');
Copy the code

Destruct add alias

Deconstruction is a very welcome addition to JavaScript, but sometimes we prefer to refer to these properties by other names, so we can use aliases instead:

const obj = { x: 1 };

// Grabs obj.x as { x }
const { x } = obj;

// Grabs obj.x as { otherName }
const { x: otherName } = obj;
Copy the code

Helps avoid naming conflicts with existing variables!

Gets the query string parameter

Before, we used regular expressions to get query string values, but now there is a new API, which can be seen here, that allows us to handle urls in a very simple way.

So now we have a URL like this, “okay? Post =1234&action=edit”, we can use the following trick to handle this URL.

// Assuming "? post=1234&action=edit"

var urlParams = new URLSearchParams(window.location.search);

console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); / / "? post=1234&action=edit"
console.log(urlParams.append('active'.'1')); / / "? post=1234&action=edit&active=1"
Copy the code

It’s so much easier than what we used to use!

JavaScript has changed a lot over the years, but my favorite part of JavaScript is the speed at which we’ve seen the language improve. Despite the changing dynamics of JavaScript, there are still some good tricks to use; Keep these tips in your toolbox for use when you need them!

So what’s your favorite JavaScript trick?

If you find this article helpful, you are welcomeMy GitHub blogLike and follow, thank you!