A very practical new feature in ES6 introduction _javascript skills

ECMAScript 6 closer to us, as its most important dialect, JavaScript is about to usher in a major grammatical changes, Infoq set up a "simple ES6" column to see what ES6 will bring us new content.

It's written in front.

ES6 has been submitted to the ECMA General Assembly for review, that is to say, we will usher in a large wave of JavaScript's latest standards, and some grammatical sugars. There are a lot of things that are worth our attention in the ES6, and here are some of the new features that I've found that we use most often to record.

1. For-of Cycle

This thing is good for looping arrays because it makes up for all the flaws in the current ES5 loop array.

Like For-in, it iterates through the attached properties of an array object, not just the array values. Also, it is particularly important that the indexes in for-in are of type string.

var arrobj=[' Alexchen ', 1,{}];
Arrobj._name= ' Attr-alexchen ';
for (var i in arrobj) {
console.log (Arrobj[i])//Will traverse the _name property 
Console.log (typeof (i))//All output string
}

Of course we also have the ForEach () function, it also has problems, such as you can not break in the return of the following:

var arrobj = [' Alexchen ', ' Boy ', ' great '];
Arrobj.foreach (function (v) {
if (v = = ' boy ') {return
' can not return ';
}
Console.log (v)//will output Alexchen great
})

This looks a lot simpler than for-in. But as the above says, it has a shortage of places. So let's try for-of:

var arrobj = [' Alexchen ', 1,{}];
Arrobj._name = ' Attr-alexchen ';
for (var I of Arrobj) {
console.log (i);//This will only output, alexchen,1,object{}, will not output Attr-alexchen
console.log ( i)//here will output String,number,object
if (i = = 1) {break
;
}
Console.log (i)//will only output alexchen, meet the conditions after the cycle does not continue, improve efficiency and free control out of the loop or continue to cycle
}

You can see:

When using for-of, the loop is the element inside the array and does not appear for-in the attached property is also traversed, and secondly, the type of the loop variable is consistent with its type in the array, not all strings.

These two points are worth choosing for-of instead of ForEach () or for-in of course, some browsers do not support it now. However, the above code can be successfully implemented in the latest version of FireFox and get the expected results. Of course for-of is not only used on arrays, you can use them on any object of the class array type, such as DOM nodelist, String, and so on.

2. Template string

This thing is also very fun to use in the string stitching place. From the name we know what to do. In the front-end development process will inevitably encounter to the dynamic concatenation of strings (dynamic DOM generation, data format) and so on:

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

Note that the string used as a template is wrapped with the ' number '. where $ (paramenter) is a placeholder, and supports objects, eg:$ (obj.name) This form. The template string can be written as multiple lines without a + connection compared to a normal string:

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 deal with the security risks. The template string is not a substitute for the template framework because the template string has no built-in looping syntax and conditional statements. So, for regular normal string concatenation, we can use it to do it and make your code look cooler. PS (Besides, I don't think it has any eggs to use.) Ψ (╰_╯))

Here's a more detailed description of the problem that says there are no built-in loops and judging branches:

es6-Template String-mozilla

3. Default parameters (Defaults parameters)

This is a bit interesting, is like this, we all know that the JS function does not need to give the function parameters to set the default value, such as the following code will be an error:

(function (a=0,b=0) {return a+b;}) (1,2)//does not support ES6 browser will be the error of the syntaxerror:unexpected token =

This means that our parameters cannot be given a default value, and if you need to give the parameter defaults, you need to determine whether it is undefined within the function. However, in ES6, we can set the default value for the parameter, instead of the function inside the judge after the default value, not only can assign the default value, you can also use the expression of the operation, as follows:

(function testdefaultsparams (pars1 = "Alexchen",
pars2 = (pars1 = "Alexchen")? ' admin ': ' not admin ' {
console.log (' Welcome ${pars1}, u r ${pars2}!! "()///used the template string above)
();
/** parameter is null-time output, welcome Alexchen, u r admin!!,
if the first argument is not alexchen output, welcome Alexchen, u r not admin!! **/

This is a very easy way to write code, as in dynamic languages, such as C #. This is both intuitive and convenient. So it's pretty good to use. Also a residual parameter (rest parameters), I did not find any special use, so I do not write, interested can go to see

Default parameters and Remaining parameters-mozilla

There are many new features and syntax in ES6. Interested can look at the Mozilla team blog, which has a very detailed introduction, but also a series of articles.

Mozilla-es6-Series Introduction

OK, these are the three more practical things I found in ES6, these three should be the most used in daily development, make a record here.

About ES6 very practical new features introduced to introduce so many people, I hope to help you!