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

Today, I would like to share with you the relevant knowledge about how to use the function of JavaScript ES6. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Default parameters of ES6 function extension function

The previous way of writing:

Function count (XMague y) {return x + y;} count (3); / / because the default value for passing only the parameter XMague y is undefined//undefined + 3, return NaNfunction count (xMague y) {x = x | | 0; y = y | | 0; return x + y;} count (3); / / 3function count (XMagy) {x = x = x pencil 0; y = y; return x + y;} count (3); / / 3

ES6 is written:

The writing method of ES6 is simple and easy to read, which allows other developers to quickly understand the parameter types, whether they can save information, and does not cause too much burden on the function code, which is conducive to later optimization and refactoring.

Function count (x = 0, y = 0) {return x + y;} count (3)

Note:

1. Using default parameters, variables with the same name cannot be renamed in the body of the function

Function count (x = 0, y = 0) {let x / const / error}

The default value of the parameter is not passed, but the value of the default expression is recalculated every time, that is, the default value of the parameter is lazily evaluated.

Let num = 1 return function count (x = num + 1, y = 0) {return x;} count (); / / 2num = 99 count (); / / 100

Parameters can also be used as default values, but pay attention to the order

Correct example:

Function fn (x = 10, y = x) {console.log (x, y);} fn (20); / / 20 20fn (); / / 10 10

Example of error:

Function fn (x = y, y = 10) {console.log (x, y);} fn (); / / error report

When the default value of a parameter is a variable, if there is a corresponding variable in the external scope, then the parameter points to the external variable (that is, the value of the parameter is equal to the value of the external variable).

Let w = 10 X function fn (x = w) {let w = 20; return x;} fn (); / / 10

Note:

/ / in the () stage, if you change the value of w after x has been assigned, you cannot change the value of x let w = 10 / function fn (x = 2) {w = 20; return x;} fn (); / / 10reset parameter

ES6 introduces the reset parameter (in the form of … Variable name), which is used to get the extra parameters of the function, so that you do not need to use the arguments object

The variable with the reset parameter is an array, which puts extra parameters into the array

Similar to deconstructing assignment, you don't have to use call to make arguments call array methods.

Function count (... values) {console.log (values); / / [2,5,3] return values.reduce ((acc,curr) = > acc + curr);} add (2,5,3); / / 10

The reset parameter must be the last argument of the function

Function count (... value, a) {} / / error name attribute

The name property of the function, which returns the function name of the function

Function count () {} console.log (count.name); / / "count" (new Function). Name / / "anonymous" function foo () {}; foo.bind ({}). Name / / "bound foo" function foo () {}; foo.bind ({}). Name / / "bound foo" (function () {}). Bind ({}). Name / "bound" / / "bound" (function () {}). Name / "arrow function

ES6 specifies that functions can be defined using "arrowheads" (= >)

-normal function-function count (x, y) {return x + y;}-Arrow function-let count = (x, y) = > x + y

Expressions can be written directly in the function body.

Let count = (x, y) = > {y = 100; x = x * y; return x + y;} count (3,4); / / 400

Write expressions in (), write multiple phrase statements, and the value after the last "," is the return value

Let count = (x, y) = > (x = 100,y = 10, x + y); count (3,4); / / 110,

Write multiple lines of statements in {}

/ / error reporting will identify {} as function body let count = id = > {id: id, name: "yunjin"}; / / will not report error let count = id = > ({id: id, name: "yunjin"}). That's all about the article "how to use JavaScript ES6's functions". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.