This article brings you relevant knowledge about arrow functions and remaining parameters in JavaScript. Arrow functions and remaining parameters are very concise. Let’s take a look at how to use them. I hope it will be helpful to everyone.

1. What is an arrow function?

The arrow function expression syntax is more concise than the function expression, that is, a simplified form of the function.
Its writing method:

() => {}; // 可以用来写一个匿名函数

Its structure:

const / let 函数名 参数 => 函数体

For example, there is a general form of function expression

let add = function(x, y) { return x + y;};

which can be written using arrow functions:

let add = (x, y) => { return x + y;};

---

2. Arrow function abbreviation

• Single parameter

// 对于单个参数，我们可以省略外面的圆括号let addOne = x => { return x + 1;}

• Single-line function body

// 对于单行返回函数体，可以同时省略 {} 和 returnlet add (x, y) => x + y;

• Single-line object

// 对于返回单行对象，在外面加个 ()let add (x, y) => ({ value: x + y;});

---

3. Basic knowledge of arrow functions

The arrow function does not have this, it will look for it in the outer layer according to the scope chain this.
For example:

var A = 1;let fun = { A: 2, printA: () => { console.log(this.A); }, printAA: function() { let print = () => { console.log(this.A); } print(); }};fun.printA(); // 1fun.printAA(); // 2

callsprintA, which outputsthis.A. Since the arrow function does not havethis, so in the outer layer Look for, the outer layer isfun. Here,fun.printA()is called in the global scope, so the outerthispoints towindow, because ## was used before #vardefines A = 1, so the output is 1.

Call

printAA, callprint()inside, outputthis.A, look at theprintfunction, It is an arrow function. It does not havethis, so look for the outer layer. Its outer layer isprintAA, which is called byfun, so itsthispoints tofun, so the A defined infunis output, which is 2.

---

4. Scenarios where arrow functions are not applicable

As a constructor

After instantiating the constructor, its this points to the instantiation Object, and arrow function does not have this, so it cannot be used as a constructor.

2. When you need this to point to the calling object

3. When you need to use arguments

Arrow function There are no arguments in , you can use the remaining parameters to store parameters.

---

5. Remaining parameters

5.1) What are the remaining parameters?

For example:

let add = (x, y, z, ...args) => { console.log(x, y, z, args);};

argsis the remaining parameters.The remaining parameter is an array. Even if it has no value, it exists in the form of an empty array.
For example:

let add = (x, y, z, ...args) => { console.log(x, y, z, args);}add(1, 2, 3);

x, y, z correspond to parameters 1, 2, 3. Since the remaining parameters have no values, they exist in the form of empty arrays.

5.2) Function

Since the arrow function does not have

arguments, we can use the remaining parameters instead ofargumentsto get the actual parametersFor example ：

const print = (...args) => { console.log(args);};print(1, 2);

5.3) Notes

In arrow functions, parentheses cannot be omitted even if there is only one remaining parameter

let add = (...args) => {};

The remaining parameter can only be the last parameter, and there can be no other parameters after that, otherwise an error will be reported

[Related recommendations:

javascript learning tutorial】

The above is the detailed content of What You Must Know About JavaScript Arrow Functions and Rest Parameters. For more information, please follow other related articles on the PHP Chinese website!