7 useful tips in es6

Preface

ES6 has been out for several years, and many new features can be cleverly applied in projects. I want to list some of these and hope they will work for you.

If you know some other tips, please leave a message~ I'm glad to add them in.

7 useful tips for es6

Array deduplication

var arr = [1, 2, 3, 3, 4];
(...new Set(arr))
>> [1, 2, 3, 4]

Arrays and booleans

Sometimes we need to filter values ​​with false in the array. For example (0, undefined, null, false), you may not know such a trick

var myArray = [1, 0 , undefined, null, false];
(Boolean);
> > [1]
//Isn't it very simple, Just pass in one Boolean Just function.

Create an empty object

Sometimes we need to create a pure object that does not contain any prototype chains, etc. Generally, the most direct way to create an empty object is through the literal {}, but the proto attribute still exists in this object to point to, etc.

let dict = (null);
 
dict.__proto__ === "undefined" 

Merge objects

The need to merge multiple objects in JavaScript has always existed. For example, when passing parameters, you need to merge the form parameters and paging parameters and pass them to the backend.

const page = {
 current: 1,
 pageSize: 10
}
 
const form = {
 name: "",
 sex: ""
}
 
const params = {...form, ...page};
 
/*
 {
  name: "",
  sex: "",
  current: 1,
  pageSize: 10
 }
*

Using the extension operator provided by ES6 makes merging objects very simple.

Function parameters must

In ES6, you can specify default values ​​for parameters, which does bring a lot of convenience. If you need to detect that certain parameters are required to be passed, you can do this.

const isRequired = () => { throw new Error('param is required'); };
 
const hello = (name = isRequired()) => { (`hello ${name}`) };
 
// An error will be thrown here because the name must behello();
// This will also throw an errorhello(undefined);
 
// normalhello(null);
hello('David'); 

Use an alias when deconstructing assignments

Deconstructing assignment is a very popular JavaScript feature, but sometimes we prefer to refer to these properties with other names, so we can do it with alias:

const obj = { x: 1 };
 
// Grabs  as { x }
const { x } = obj;
 
// Grabs  as { otherName }
const { x: otherName } = obj;

Get query parameters

For years we have written rough regular expressions to get query string values, but those days are gone; now we can get query parameters through the URLSearchParams API

Without using URLSearchParams, we complete the query parameters through a regular way, as follows:

 function getQueryString(name) {
 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
 var r = (1).match(reg);
 return r ? r[2] : null;
 }

After using URLSearchParams:

// Assume that the query parameters in the address bar are like this "?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 easier to use than before

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.