ECMAScript 6 is getting closer and closer to us. As its most important dialect, Javascript is about to usher in major grammar changes. InfoQ specially opened a column called "Easy to Understand ES6" to see what new content ES6 will bring to us.
Write in front
ES6 has been submitted to Ecma for review, which means we will usher in a big wave of latest standards for javascript, and some syntactic sugar. There are many things in ES6 that deserve our attention. Here are some of the new features I have discovered that we use most frequently. Let’s record them.
1. for-of loop
This thing is very good to use to loop arrays. The reason is that it makes up for all the shortcomings of loop arrays in es5.
For example, for-in, it will iterate over additional properties of an array object, not just through the array values. Another point is that the index in for-in is of type string, which is particularly important.
var arrObj=['alexchen',1,{}];
arrObj._name='attr-AlexChen';
for(var i in arrObj){
(arrObj[i]) // It will also traverse the _name attribute(typeof(i)) // All output string}
Of course we also have the forEach() function, which also has problems, such as you can't break return or something like that:
var arrObj = ['alexchen','boy','great'];
(function (v) {
if (v == 'boy') {
return 'can not return';
}
(v) // will output alexchen great})
This looks much easier than for-in. But as mentioned above, it has its shortcomings. Then let's try for-of:
var arrObj = ['alexchen',1,{}];
arrObj._name = 'attr-alexchen';
for (var i of arrObj) {
(i);//This will only output, alexchen,1, object{}, and will not output attr-alexchen(typeof(i))//There will be output here, string, number, objectif (i == 1) {
break;
}
(i)//Only alexchen will be output. After the conditions are met, the loop will not continue, which improves efficiency and can freely control the loop to jump out or continue the loop}
You can see:
When using for-of, the loop is the element inside the array and there is no situation where additional attributes are also traversed in for-in. Secondly, the type of the loop variable is consistent with its type in the array, rather than 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 executed in the latest version of FireFox and get the expected results. Of course for-of is not only used on arrays, you can use it on any object of array type, such as DOM NodeList, string, etc.
2. Template string
This thing is also very fun and is used in the string splicing. We know what we do from the name. During the front-end development process, you will inevitably encounter situations where you want to dynamically splice strings (dynamic dom generation, data formatting), etc.:
(function sayHello(name, words) {
(`hello: ${name},welcome es6,your words is: ${words}`); //
})('alexchen','im admin')//After running, it will output：hello: alexchen,welcome es6,your words is: im admin
Note that strings that are treated as templates are wrapped with ` numbers. where $(paramenter) is a placeholder and supports object, eg:$(). Compared to normal strings, template strings can be written into multiple lines without using + concatenation:
hello:$(name), welcome es6, your words is $(words)
It is worth noting that template strings do not escape special characters, so you need to deal with the security risks yourself. Template strings cannot replace template frameworks because template strings do not have built-in loop syntax and conditional statements. So for regular ordinary string stitching we can do it with it, which will make your code look a little cooler. PS (Apart from that, I don’t think it’s of use. ψ(╰_╯))
Here is a more detailed introduction to solve the problem of not having built-in loops and judging branches mentioned above:
es6-Template String-mozilla
3. Default parameters
This is interesting, it's like this. We all know that js functions do not need to set default values for function parameters. For example, the following code will report an error:
(function(a=0,b=0){return a+b;})(1,2)//Not supportedes6An error will be reported in the browserSyntaxError: Unexpected token =
This means that our parameters cannot be given default values. If we need to give the parameters default values, we need to determine whether they are undefined within the function to handle it. However, in ES6, we can set default values for parameters instead of judging within the function and assigning default values. Not only can we assign default values, but we can also use operation expressions, as follows:
(function testDefaultsParams(pars1 = "alexchen",
pars2 = (pars1 == "alexchen") ? "admin" : "not admin") {
(`welcome ${pars1} ,u r ${pars2}!!`)//Use the template string mentioned above})();
/**Output when the parameter is empty, welcome alexchen, u r admin!!,
If the first parameter is not alexchen, output, welcome alexchen, u r not admin!!**/
This method is very easy to write code, just like dynamic languages, such as in c#. This is both intuitive and convenient. So it's pretty good to use. There is also a remaining parameter (Rest parameters). The author did not find any special use, so I won't write it. If you are interested, you can go and have a look.
Default parameters and remaining parameters - mozilla
There are many new features and syntax in ES6. If you are interested, you can take a look at the blog of the mozilla team, which contains a very detailed introduction and a series of articles.
mozilla-ES6-Series Introduction
OK, the above are three more practical new things I have found in ES6. These three should be the most used in daily development. Let’s take a record here.
I will introduce so much to you about the very practical new features in ES6. I hope it will be helpful to you!