Introduction to very practical new features in ES6_javascript skills

ECMAScript 6 is getting closer and closer to us. As its most important dialect, Javascript is about to undergo major grammatical changes. InfoQ has specially opened a column "ES6 in simple terms" to take a look at what ES6 will bring to us. New content.

is written in front

ES6 has been submitted to the Ecma conference for review, which means that we will usher in a large wave of the latest standards for javascript, as well as some syntactic sugar. There are a lot of things worthy of our attention in ES6. Here are some of the new features I found that we use most frequently, to record them.

1. for-of loop

This thing is great for looping arrays. The reason is that it makes up for all the shortcomings of looping arrays in es5 currently.

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

var arrObj=['alexchen',1,{}];
arrObj._name='attr-AlexChen';
for(var i in arrObj){
console.log(arrObj[i]) // 会把_name属性也遍历出来 
console.log(typeof(i)) // 全部输出 string
}

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

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

This seems much simpler than for-in. But as mentioned above, it has its shortcomings. So let’s try for-of:

var arrObj = ['alexchen',1,{}];
arrObj._name = 'attr-alexchen';
for (var i of arrObj) {
console.log(i);//这里只会输出,alexchen,1,object{},不会输出attr-alexchen
console.log(typeof(i))//这里会输出 string,number,object
if (i == 1) {
break;
}
console.log(i)//只会输出 alexchen，满足条件之后就不在继续循环，提高了效率并且可以自由控制跳出循环或继续循环
}

You can see:

When using for-of, the elements inside the array are looped and additional attributes will not be traversed in for-in. Secondly, the type of the loop variable is consistent with its type in the array. Rather than all being strings.

Only these two points make it worthwhile for us to choose for-of instead of forEach() or for-in. Of course, there are still some browsers that do not support it. However, the above code can be executed successfully and get the expected results in the latest version of FireFox. Of course, for-of is not only used on arrays, you can use it on any array-like object, such as DOM NodeList, string, etc.

2. Template string

This thing is also very fun and can be used for string splicing. From the name we know what it does. In the process of front-end development, it is inevitable to encounter situations where strings need to be dynamically spliced ​​(dynamic DOM generation, data formatting), etc.:

(function sayHello(name, words) { 
console.log(`hello: ${name},welcome es6,your words is: ${words}`); //
})('alexchen','im admin')//运行之后将会输出：hello: alexchen,welcome es6,your words is: im admin

Note that the string used as a template is wrapped with a ` sign. Among them, $(paramenter) is a placeholder and supports objects, such as:$(obj.name). Compared with ordinary strings, template strings can be written in 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 the template framework because template strings do not have built-in loop syntax and conditional statements. So, for regular ordinary string concatenation, we can use it to do it, which will make your code look a little cooler. PS(Other than that, I don’t think it’s useful. ψ(╰_╯))

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

es6-template string-mozilla

3. Defaults parameters

This is a bit interesting. It is 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)//不支持es6的浏览器下会报错的SyntaxError: Unexpected token =

This also means that our parameters cannot be given default values. If we need to give default values ​​to parameters, we need to determine whether they are undefined inside the function. However, in ES6, we can set default values ​​for parameters instead of assigning default values ​​after judgment inside the function. Not only can we assign default values, we can also use operational expressions, as follows:

(function testDefaultsParams(pars1 = "alexchen",
pars2 = (pars1 == "alexchen") ? "admin" : "not admin") {
console.log(`welcome ${pars1} ,u r ${pars2}!!`)//用到了上面说的模版字符串
})();
/**参数为空时输出，welcome alexchen ,u r admin!!,
如果第一个参数不是alexchen则输出，welcome alexchen ,u r not admin!!**/

This method is very simple when writing code, just like in dynamic languages, such as c#. This is both intuitive and convenient. So it's still very good to use. There is also a rest parameter (Rest parameters). I didn’t find any special use, so I won’t write it down. If you are interested, you can check it out

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 mozilla team's blog, which has a very detailed introduction and is a series of articles.

mozilla-ES6-series introduction

Okay, the above are three practical new things I found in ES6. These three should be the most used in daily development. I will make a record here.

This is all about the very practical new features in ES6. I hope it will be helpful to you!