Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use ES6 to simplify the code, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Use ES6 to simplify code

ES6 has been developed for many years, and its compatibility is already very good. When used properly, you can make your code more concise and elegant.

(1) replace small functions with arrowhead functions

There are many scenarios where small functions are used. If you write a function, you have to write at least 3 lines of code, but you can do it with one line of the arrow function, such as sorting the array from big to small:

Var nums = [4,8,1,9,0]; nums.sort (function (a, b) {return b-a;}); / / output [9, 8, 4, 1, 0]

If you use the arrow function, the sort is done in one line:

Var nums = [4,8,1,9,0]; ``nums.sort (a, b = > b-a)

The code looks much simpler, and it is often encountered in setTimeout that you only need to execute one line of code. It is always troublesome to write a function, but it is not very good to use a string, so it is also convenient to use the arrow function in this case:

SetTimeout (() = > console.log ("hi"), 3000)

Arrow functions are called Lambda expressions in other languages such as C++/Java. Ruby has had this grammatical form for a long time, and later C++/Java also implemented this syntax. Of course, the arrow function or Lambda expression is not only suitable for this kind of one-line code, but also for multiple lines of code, but its advantages are more obvious on one line.

(2) class using ES6

Although ES6's class and prototype using function are essentially the same, both use prototypes. But using class can reduce the amount of code and at the same time make the code look more elegant, so much to write with function:

Function Person (name, age) {this.name = name; this.age = age;} Person.prototype.addAge = function () {this.age++;}; Person.prototype.setName = function (name) {this.name = name;}

Using class code to see Cartier is simple and easy to understand:

Class Person {constructor (name, age) {this.name = name; this.age = age;} addAge () {this.age++;} setName (name) {this.name = name;}}

And class can also easily implement inherited and static member functions, so you don't need to go through some skills to achieve it.

(3) string concatenation

You used to use the + sign to concatenate:

Var tpl ='+'1' +'

Now all you have to do is use two backquotes:

Var tpl = `1`

In addition, backquotation marks also support placeholder substitution, which you originally need:

Var page= 5, type= encodeURIComponet ("# js"); var url = "/ list?page=" + page + "& type=" + type

Now all you need is:

Var url = `/ list?page=$ {page} & type=$ {type}`

You don't have to use the + sign to break up the string.

(4) Block-level scope variables

Block-level scope variables are also a feature of ES6. The following code is a model abstraction of a task queue:

Var tasks = []; for (var I = 0; I < 4; iTunes +) {tasks.push (function () {console.log ("I is" + I);} for (var j = 0; j < tasks.length; jacks +) {tasks [j] ();}

But the execution output of the above code is 4Power4, and it is not intended to be outputted, so each task cannot get its index, because the closures are all using the same I variable, and I has become 4, so the execution of closures is 4. What are we going to do? It can be solved as follows:

Var tasks = []; for (var I = 0; I < 4; iTunes +) {! function (k) {tasks.push (function () {console.log ("I is" + k);} (I);} for (var j = 0; j < tasks.length; jacks +) {tasks [j] ();}

I is assigned to k, because k is a parameter of a function, every time the function is executed, the new k must be instantiated, so each time k is a different variable, so the output is normal. But the code looks a little awkward. If you use ES6, just change var to let:

Var tasks = []; for (let I = 0; I

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.