Ce que vous devez savoir sur les fonctions fléchées JavaScript et les paramètres de repos

Cet article vous apporte des connaissances pertinentes sur les fonctions fléchées et les paramètres restants en JavaScript. Les fonctions fléchées et les paramètres restants sont très concis. Voyons comment les utiliser. J'espère que cela sera utile à tout le monde.

1. Qu'est-ce qu'une fonction flèche ?

La syntaxe de l'expression de la fonction flèche est plus concise que l'expression de la fonction, qui est une forme simplifiée de la fonction.
Sa méthode d'écriture :

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

Sa structure :

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

Par exemple, il existe une forme générale d'expression de fonction

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

qui peut s'écrire à l'aide de fonctions flèches :

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

---

2. L'abréviation de fonction flèche

• Paramètre unique

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

• Corps de fonction sur une seule ligne

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

• Objet sur une seule ligne

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

---

3. Connaissance de base des fonctions de flèche

La fonction de flèche n'a pas cela, elle le recherchera dans le couche externe selon la chaîne de portée.
Par exemple :

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

Appelez printA, qui génère this.A Puisque la fonction flèche n'a pas this, elle le recherche. dans la couche externe La couche externe est amusante. Ici, fun.printA() est appelé dans la portée globale, donc le this externe pointe vers window, car avant A = 1 est défini avec var, donc la sortie est 1. printA，里面是输出 this.A，由于箭头函数没有 this，所以在外层寻找，外层是 fun。在这里，fun.printA()是在全局作用域中调用的，所以外层的 this 指向的是 window，由于之前用 var 定义了一个 A = 1，所以输出的是 1。

调用 printAA，在里面调用了 print()，输出 this.A，看 print 这个函数，是个箭头函数，他没有 this，所以找外层，它的外层是 printAA，它是由 fun 调用的，所以它的 this 指向 fun，所以输出 fun 中定义的 A，也就是 2。

---

4. 箭头函数不适用的场景

1. 作为构造函数

实例化构造函数之后，它的 this 指向实例化的对像，而箭头函数没有 this，所以它不能用来做构造函数。

2. 需要 this 指向调用对象的时候

3. 需要使用 arguments 的时候

箭头函数中没有 arguments，可以使用剩余参数来存参数。

---

5. 剩余参数

5.1) 什么是剩余参数 ？

举个例子：

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

args 就是剩余参数。
剩余参数是个数组，它即使没有值，也是以一个空数组形式存在。
比如：

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

x, y, z 对应参数 1， 2， 3，由于剩余参数没有值，所以空数组形式存在。

5.2) 作用

由于箭头函数没有 arguments，所以我们可以使用剩余参数替代 arguments
Appelez printAA, appelez print() à l'intérieur et affichez this.A Voir print pour cette fonction. , est une fonction fléchée. Elle n'a pas this, alors recherchez la couche externe. Sa couche externe est printAA, qui est appelée par fun, donc son <code>this pointe vers fun, donc le A défini dans fun est sorti, qui est 2.

4. Scénarios où les fonctions fléchées ne sont pas applicables

En tant que constructeur

Après l'instanciation du constructeur, c'est this qui pointe vers l'objet instancié, mais la fonction flèche ne l'a pas, donc elle ne peut pas être utilisé comme constructeur.

Lorsque vous en avez besoin pour pointer vers l'objet appelant

Lorsque vous devez utiliser des arguments

Il n'y a aucun argument dans la fonction flèche, vous pouvez utiliser les paramètres restants pour stocker les paramètres.

5. Paramètres résiduels🎜🎜5.1) Que sont les paramètres résiduels ? 🎜🎜Par exemple : 🎜

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

🎜args sont les paramètres restants. 🎜 Le paramètre restant est un tableau Même s'il n'a aucune valeur, il existe sous la forme d'un tableau vide. 🎜 Par exemple : 🎜

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

🎜🎜 x , y, z correspondent aux paramètres 1, 2 et 3. Les paramètres restants n'ayant aucune valeur, ils existent sous forme de tableaux vides. 🎜🎜5.2) Effet 🎜🎜Étant donné que la fonction flèche n'a pas de arguments, nous pouvons utiliser les paramètres restants au lieu de arguments pour obtenir les paramètres réels 🎜 Par exemple : 🎜rrreee 🎜🎜🎜🎜5.3 ) Notes🎜🎜🎜Dans les fonctions fléchées, même s'il n'y a qu'un seul paramètre restant, les parenthèses ne peuvent pas être omises🎜🎜rrreee🎜🎜Le paramètre restant ne peut être que le dernier paramètre, et il ne peut y avoir aucun autre paramètre après cela, sinon une erreur sera signalée🎜🎜🎜【 Recommandations associées : 🎜Tutoriel d'apprentissage javascript🎜🎜】🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!