Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what are the advantages of es6 arrow function". In the operation of practical cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The advantages of es6 arrow function: 1, concise syntax, such as "parameters = > {statements;};", more convenient to use; 2, can implicitly return; 3, more intuitive scope and this binding (do not bind this).

The operating environment of this tutorial: windows7 system, ECMAScript version 6, Dell G3 computer.

As we all know, there are many ways to define functions in JavaScript. The most common is to use the function keyword:

/ / function declaration function sayHi (someone) {return `Hello, ${someone}! `;} / function expression const sayHi = function (someone) {return `Hello, ${someone}`;}

The above function declarations and function expressions are called regular functions.

There is also the new arrow function syntax of ES6:

Const sayHi = (someone) = > {return `Hello, ${someone}! `;}

Compared with the original functions in JS, the arrow function of ES6 growth is more concise and more convenient to use.

Advantages of the es6 Arrow function:

1. Concise grammar

An array, change it to twice the original, and then output.

Delete a keyword and add a fat arrow; without parentheses, a parameter can be selected Multiple parameters are separated by commas, const numbers = [5Power6, number 13, 010]; / / original function const double = numbers.map (function (number) {return number * 2;}) console.log (double); / / output result / / [10,12,26,0,2,36,46] / Arrowhead function removes function and adds fat arrow const double2 = numbers.map ((number) = > {return number * 2;}) console.log (double2) / / output result / / [10, 12, 26, 0, 2, 36, 46] / / if there is only one parameter, parentheses can not write (select) const double3 = numbers.map (number = > {return number * 2;}) console.log (double3); / / if there are multiple parameters, parentheses must be written If there are no parameters, () const double4 = numbers.map ((number,index) = > {return `${index}: ${number * 2}`; / / template string}) console.log (double4)

2. Be able to return implicitly

The display return is svg.

Const double3 = numbers.map (number = > {return number * 2; / / return returned content;})

The implicit return of the arrow function is the function

When you want to simply return something, the following: remove the return and curly braces and move the return to one line, which is more concise; const double3 = numbers.map (number = > number * 2)

Add: the arrow function is an anonymous function. If you need to call it, you must assign a value to a variable, such as double3 above. Anonymous functions are useful for recursion and unbinding functions.

3. More intuitive scope and binding of this (do not bind this)

An object, as we used to write in the function, this.

An object, as we used to write in the function.

Const Jelly = {name:'Jelly', hobbies: ['Coding','Sleeping','Reading'], printHobbies:function () {this.hobbies.map (function (hobby) {console.log (`${this.name} loves ${hobby}`);})} Jelly.printHobbies (); / / undefined loves Coding// undefined loves Sleeping// undefined loves Reading

This shows that the direction of this.hobbies is correct and that of this.name is incorrect.

When a stand-alone function is executed, this points to window

If we want to point correctly, we would have set the variable to replace spa

/ / Central code printHobbies:function () {var self = this; / / set variable replacement this.hobbies.map (function (hobby) {console.log (`${self.name} loves ${hobby}`);})} Jelly.printHobbies () / / Jelly loves Coding// Jelly loves Sleeping// Jelly loves Reading in the ES6 arrow function, we write the code// central code printHobbies:function () {this.hobbies.map ((hobby) = > {console.log (`${this.name} loves ${hobby}`);})} / / Jelly loves Coding// Jelly loves Sleeping// Jelly loves Reading

This is because the this accessed in the arrow function is actually inherited from the this in the scope of its parent, and the this of the arrow function does not exist, so that the this of the arrow function is affirmed at the time of declaration (lexical scope), and the direction of this will not change with the call of the method.

This is the end of the content of "what are the advantages of es6 Arrow function". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.