Shulou(Shulou.com)05/31 Report--

The main content of this article is to explain "what is meant by es6 = >". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what is meant by "es6 = >".

In es6, "= >" refers to the arrow function, which is an abbreviation of the function. The syntax is (parameter) = > {function body}; ". The arrow function has no prototype, has no this, arguments, super, and" new.target "bindings, and its value is determined by the nearest layer of non-arrow functions in the periphery; it cannot be called through the new keyword.

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

= > is the arrow function, which is a new function added to the ES6 standard. As the name implies, the arrow function is a new syntax for defining functions using arrows (= >). The syntax of arrow function expressions is more concise than function expressions, but it is slightly different from traditional JavaScript functions, focusing on the following aspects:

There are no this, super, arguments, and new.target bindings, and their values are determined by the non-arrow function at the nearest layer of the periphery

Cannot be called through the new keyword

There is no prototype.

Cannot change the binding of this

Arguments objects are not supported

Duplicate named parameters are not supported

The this in the body of a function always points to the object that defines it, not to the object that calls it. We know that the function in es5 executes it, and it points to it.

Basic grammar

(param1, param2,... , paramN) = > {statements} (param1, param2, … , paramN) = > expression// is equivalent to: (param1, param2, … , paramN) = > {return expression;} / / when there is only one parameter, parentheses are optional: (singleParam) = > {statements} singleParam = > {statements} / / functions with no arguments should be written as a pair of parentheses: () = > {statements}

Simple exampl

X = > x * x

That is, it is equivalent to:

Function (x) {return x * x;}

Example of a shorter function

Var elements = ['Hydrogen',' Helium', 'Lithium',' Beryllium']; elements.map (function (element) {return element.length;}) / / return array: [8, 6, 7, 9] / / the above ordinary function can be rewritten into the following arrow function elements.map ((element) = > {return element.length;}) / / [8, 6, 7, 9] / / when the arrow function has only one argument, you can omit the parentheses elements.map (element = > {return element.length;}) / / [8, 6, 7, 9] / when the function body of the arrow function has only one `return` statement, the `return` keyword and the curly braces elements.map of the method body can be omitted (element = > element.length) / / [8, 6, 7, 9] / / in this example, since we only need the `roomth` attribute, we can use parameters to deconstruct / / note that the string `"length "`is the name of the attribute we want, while `roomthFooBArX` is just a variable name. / / can be replaced with any legal variable name elements.map (({"length": lengthFooBArX}) = > lengthFooBArX) / / [8, 6, 7, 9]

Ternary operator example

The arrow function can also use the conditional (ternary) operator:

Var simple = a = > a > 15? 15: a; simple (16); / / 15 simple (10); / / 10 let max = (a, b) = > a > b? A: b

Do not use with new

The arrow function cannot be used as a constructor, and using it with new will throw an error.

Var Foo = () = > {}; var foo = new Foo (); / / TypeError: Foo is not a constructor

No prototype attribute

The arrow function does not have a prototype property.

Var Foo = () = > {}; console.log (Foo.prototype); / / undefined

Function body

The arrow function can have a "shorthand" or a common "block".

In a shorthand, only one expression is required, with an implicit return value appended. In a block, you must use an explicit return statement.

Var func = x = > x * x; / / the abbreviated function omits return (abbreviated) var func = (x, y) = > {return x + y;}; / / routinely written explicit return values (blocks)

Arrow function recursion

Var fact = (x) = > (x*fact (xMel 1)); fact (5); / / 120

Browser compatibility

At this point, I believe that you have a deeper understanding of "what is meant by es6 = >", you might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.