A very useful introduction to new features in ES6

As ECMAScript 6 draws closer to us, its most important dialect, Javascript, is on the brink of a major grammatical change. Let's take a look at what ES6 has to offer in its column, ES6.

Writing in the front

ES6 has been submitted to the Ecma conference for review, which means that we are about to get a big wave of new javascript standards, along with some syntax sugar. There are a lot of things to look out for in ES6, but here are a few of the new features I've found that we use the most.

1. for - of cycle

This is great for looping arrays, and the reason is that it makes up for the one-cut defect of looping arrays in the current es5.

ES23en-ES24en, for example, iterates over the additional properties of array objects, not just array values. One more point, which is particularly important, is 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]) //  the _name Attributes are traversed  
console.log(typeof(i)) //  All of the output  string
}

Of course we also have the forEach() function, which has its own problems, such as you can't use it in break, return or something like that:

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

This looks much simpler than the for-in. But just like 1 mentioned above, it has some disadvantages. So let's try for-of:

var arrObj = ['alexchen',1,{}];
arrObj._name = 'attr-alexchen';
for (var i of arrObj) {
console.log(i);// It's just going to output ,alexchen,1,object{}, Not the output attr-alexchen
console.log(typeof(i))// It will print  string,number,object
if (i == 1) {
break;
}
console.log(i)// Will only output  alexchen After satisfying the conditions, the loop will not continue, which improves the efficiency and allows you to freely control to jump out of the loop or continue the loop 
}

As you can see:

When using for-of, we loop through the elements inside the array without iterating over the additional attributes in for-in. Second, the type of the loop variable remains exactly the same as its type in the array, rather than all of it being string.

These two points make it worth choosing for-of over forEach() or for-in, although some browsers still don't support it. However, the above code can be executed successfully in the latest version of FireFox with the desired results. Of course, for-of is not just for arrays, you can use it on any array type object, such as DOM, NodeList, strings, etc.

2. Template string

This is also a really fun thing to use for string concatenation. From the name we know what it is. In the process of front-end development, it is inevitable to encounter the situation of dynamic concatenation string (dynamic dom generation, data formatting), etc. :

(function sayHello(name, words) { 
console.log(`hello: ${name},welcome es6,your words is: ${words}`); //
})('alexchen','im admin')// After running it, it will output: hello: alexchen,welcome es6,your words is: im admin

Note that the string being used as a template is wrapped in '. Where $(paramenter) is a placeholder and supports the object, eg:$(obj.name). Template strings can be written in multiple lines without using + concatenation compared to regular strings:

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

It's worth noting that template strings don't escape special characters, so you'll have to deal with the security implications yourself. Template strings do not replace template frames because they do not have a built-in loop syntax and conditional statements. So, for regular ordinary string concatenation, we can use it to do it and make your code look a little bit cooler. PS(Other than that, I don't think it's very useful. Bits (� _ �))

Here's a more detailed guide to solving the problem of not having built-in loops and branching:

es6- Template string -mozilla

3. Default parameters (Defaults parameters)

It's meaning, so, we all know js function is don't need to set default values to the function parameters, such as the following code will be an error:

(function(a=0,b=0){return a+b;})(1,2)// Does not support es6 An error will be reported under the browser of SyntaxError: Unexpected token =

This means that we cannot give a default value to a parameter. If we need to give a default value to a parameter, we need to check internally whether it is undefined or not. However, in ES96en6, we can assign a default value to a parameter, instead of assigning a default value inside the function. We can also assign a default value to a parameter using an operand expression like this:

(function testDefaultsParams(pars1 = "alexchen",
pars2 = (pars1 == "alexchen") ? "admin" : "not admin") {
console.log(`welcome ${pars1} ,u r ${pars2}!!`)// The template string described above is used 
})();
/** Parameter is empty time output, welcome alexchen ,u r admin!!,
 If the first 1 The parameter is not alexchen The output, welcome alexchen ,u r not admin!!**/

This approach is very easy to code in, like dynamic languages such as c#. This is both intuitive and convenient. So it works really well. Also one remaining parameters (Rest parameters), I didn't find any special use, so don't write, interested can go to look at it

Default and remaining parameters -mozilla

There are also many new features and syntax in ES6. For those interested, check out the mozilla team's blog, which is full of details and a series of articles.

mozilla-ES6- Series Introduction

So, those are the three practical new things I found in ES116en6, which I think are the most used in daily development, so let me make a note here.

ES6 on the very practical new features to introduce so much, I hope to help you!