ES6 is a very practical introduction of new features, es6 is very practical new features

ES6 is a very practical introduction of new features, es6 is very practical new features

ECMAScript 6 is getting closer and closer to us. As the most important dialect of ECMAScript, Javascript is about to usher in a major syntax change. InfoQ has set up the "ES6 in depth" column, let's take a look at what new content ES6 will bring to us.

Preface

ES6 has been submitted to the Ecma Conference for review. That is to say, we will usher in the latest javascript standard and some syntactic sugar. ES6 has a lot of things worth our attention. Below are some of the new features we found most commonly used. Let's record them.

1. for-of Loop

The reason for this is that it makes up for all the defects of loop arrays in es5.

For example, for-in will traverse the additional attributes of the array object, not just the array values. Another point is that the index in for-in is of the string type, which is especially important.

Var arrObj = ['alexchen ', 1, {}]; arrObj. _ name = 'attr-AlexChen '; for (var I in arrObj) {console. log (arrObj [I]) // The _ name attribute is also traversed to the console. log (typeof (I) // all output string}

Of course we also have the forEach () function, which also has problems, such as you cannot break return in it:

Var arrObj = ['alexchen ', 'boys', 'great']; arrObj. forEach (function (v) {if (v = 'boys') {return 'can not return';} console. log (v) // output alexchen great })

This looks much easier than for-in. But as mentioned above, there are also some shortcomings. Let's try for-:

Var arrObj = ['alexchen ', 1, {}]; arrObj. _ name = 'attr-alexchen '; for (var I of arrObj) {console. log (I); // here only output, alexchen, 1, object {}, will not output attr-alexchenconsole.log (typeof (I) // here output string, number, objectif (I = 1) {break;} console. log (I) // only outputs alexchen. If conditions are met, the loop will not continue. This increases the efficiency and allows you to freely control the loop or continue the loop}

You can see:

When the for-of clause is used, the elements in the array are recycled and the additional attributes are not traversed in the for-in clause. Secondly, the type of the cyclic variable is consistent with its type in the array, rather than the string type.

These two points are worth choosing for-of instead of forEach () or for-in. of course, some browsers do not support this yet. However, the above Code can be successfully executed in the latest FireFox version and get the expected results. Of course, for-of is not only used on arrays. You can use it on any class array objects, such as DOM NodeList and string.

2. template string

This item is also very fun and used in String concatenation. From the name, we know what it is. During the front-end development process, you will inevitably encounter situations such as dynamically splicing strings (Dynamic dom generation and data formatting:

(Function sayHello (name, words) {console. log ('Hello :$ {name}, welcome es6, your words is :$ {words} '); //}) ('alexchen', 'im admin ') // after running, the output will be: hello: alexchen, welcome es6, your words is: im admin

Note that the character strings used as the template are enclosed. $ (Paramenter) is a placeholder and supports objects in the format of eg: $ (obj. name. Compared with a normal string, the template string can be written into multiple rows without the need for + connection:

hello:$(name),welcome es6,your words is $(words)

It is worth noting that the template string does not escape special characters, so you need to handle the security risks yourself. The template string cannot replace the template framework because the template string does not have built-in cyclic syntax and conditional statements. Therefore, we can use regular String concatenation to make your code look cool. PS (In addition, I think it is useless. (Partition _ partition ))

Here is a more detailed introduction to solve the problem of no built-in loops and Branch judgment mentioned above:

Es6-template string-mozilla

3. default parameter (Defaults parameters)

This is a bit interesting. We all know that js functions do not need to set default values for function parameters. For example, the following code reports an error:

(Function (a = 0, B = 0) {return a + B;}) () // The SyntaxError: Unexpected token =

This means that our parameter cannot be set to the default value. If you need to set the default value for the parameter, You need to determine whether the parameter is undefined in the function. However, in ES6, we can set the default value for the parameter, instead of assigning the default value after being determined in the function. Not only can we assign the default value, but also can use an arithmetic expression, as shown below:

(Function testdefasparsparams (pars1 = "alexchen", pars2 = (pars1 = "alexchen ")? "Admin": "not admin") {console. log ('Welcome $ {pars1}, u r ${pars2 }!! ') // Use the template string}) ();/** output when the parameter is null, welcome alexchen, u r admin !!, If the first parameter is not alexchen, the output is welcome alexchen, u r not admin !! **/

This method is very easy to write code, just like dynamic languages, such as c. This is intuitive and convenient. So it is good to use. There is another remaining parameter (Rest parameters). I have not found any special use, so I will not write it. If you are interested, you can check it out.

Default parameters and remaining parameters-mozilla

ES6 also has many new features and syntaxes. If you are interested, you can refer to the blog of the mozilla team, which has a detailed introduction and is a series of articles.

Introduction to mozilla-ES6-Series

Well, the above are the three practical new things I found in ES6. These three should be the most used in daily development and I will record them here.

I would like to introduce so many practical new features in ES6 that I hope to help you!

Articles you may be interested in:

• Details about Generator in JavaScript ES6
• Details about the template string in JavaScript ES6
• Parse deconstruct assignment in ES6 of JavaScript
• Learn the latest javascript standard ES6
• In-depth analysis of react native es6 syntax
• Overview of new features of ES6
• How to use Set and WeakSet in ES6