Exemple de code de pratique de la fonction de flèche ES6

Cet article vous apporte des connaissances pertinentes sur javascript, qui présente principalement des problèmes liés à l'application des fonctions fléchées. Les expressions de fonctions fléchées sont plus adaptées aux endroits où les fonctions anonymes sont à l'origine nécessaires, et elles ne peuvent pas être utilisées comme constructeur. jetez-y un oeil, j'espère que cela sera utile à tout le monde.

【Recommandations associées : Tutoriel vidéo javascript, front-end web】

Introduction

La syntaxe des expressions de fonction flèche est plus concise que celle des expressions de fonction et n'a pas ses propres arguments. , super ou nouveau .target. Les expressions de fonctions fléchées sont plus adaptées lorsqu’une fonction anonyme serait autrement requise et qu’elle ne peut pas être utilisée comme constructeur. ---- MDN

Utilisation de base

Représentation des paramètres

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
//相当于：(param1, param2, …, paramN) =>{ return expression; }

// 当只有一个参数时，圆括号是可选的：
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数应该写成一对圆括号。
() => { statements }

Représentation de la valeur de retour

let add1 = (num1, num2) => {
  num1 + num2
};
let add2 = (num1, num2) => {
  return num1 + num2
};
let add3 = (num1, num2) => (num1 + num2);
let add4 = (num1, num2) => num1 + num2;

console.log(add1(2, 3));  // undefined
console.log(add2(2, 3)); // 5
console.log(add3(2, 3)); // 5
console.log(add4(2, 3)); // 5

Avancé

//加括号的函数体返回对象字面量表达式：
let func = () => ({foo: 'bar'})
console.log(func()); // {foo: 'bar'}


//支持剩余参数和默认参数
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
statements }

//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

this

Meilleure pratique

• Si vous devez utiliser anonyme fonctions, ou rappel en ligne fonctions, à l’aide des fonctions fléchées. eslint : préférez-arrow-callback, arrow-spacing

pourquoi ?La syntaxe est plus concise, et elle est plus conforme aux attentes
Si la logique de la fonction est assez complexe, vous devez utiliser des fonctions nommées

// bad[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;});// good[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;});

• Si le corps de la fonction n'a qu'une seule instruction et que cette instruction n'a aucun effet secondaire. Utilisez la forme abrégée pour renvoyer implicitement ; ou utilisez la forme complète pour renvoyer explicitement.
  eslint : arrow-parens, arrow-body-style

// bad
[1, 2, 3].map(number => {
  const nextNumber = number + 1;
  `A string containing the ${nextNumber}.`;
});

// good
[1, 2, 3].map(number => `A string containing the ${number}.`);

// good
[1, 2, 3].map((number) => {
  const nextNumber = number + 1;
  return `A string containing the ${nextNumber}.`;
});

// good
[1, 2, 3].map((number, index) => ({
  [index]: number,
}));

// No implicit return with side effects
function foo(callback) {
  const val = callback();
  if (val === true) {
    // Do something if callback returns true
  }
}

let bool = false;

// bad
foo(() => bool = true);

// good
foo(() => {
  bool = true;
});

• Lorsque l'expression occupe plusieurs lignes, utilisez des parenthèses pour améliorer la lisibilité

pourquoi ? Le début et la fin de la fonction sont plus clairs

// bad['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod,
  ));// good['get', 'post', 'put'].map(httpMethod => (
  Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod,
  )));

• Si la fonction n’a qu’un seul paramètre, omettez les parenthèses et omettez les accolades. Sinon, utilisez toujours la méthode d’écriture complète pour maintenir la cohérence. eslint : arrow-parens

// bad[1, 2, 3].map((x) => x * x);// good[1, 2, 3].map(x => x * x);// good[1, 2, 3].map(number => (
  `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`));// bad[1, 2, 3].map(x => {
  const y = x + 1;
  return x * y;});// good[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;});

• utilise une syntaxe => sans ambiguïté pour le distinguer de =. eslint : no-confusing-arrow

// badconst itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;// badconst itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;// goodconst itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);// goodconst itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;

Conclusion simple

• La fonction flèche ne peut pas utiliser new pour créer une instance du constructeur, les fonctions ordinaires le peuvent (car lorsque la fonction flèche est créée, le programme ne créera pas de construction méthode pour cela, c'est-à-dire qu'il n'a aucune capacité de construction et sera jeté après utilisation. Contrairement aux fonctions ordinaires qui sont réutilisées, il n'y a pas besoin d'un prototype de constructeur, c'est-à-dire que l'attribut du prototype ne sera pas généré automatiquement)

• Le programme ne créera pas d'objets arguments pour les fonctions flèches

• Ceci dans une fonction normale est dynamique, alors que ceci dans une fonction flèche pointe vers l'objet qui enveloppe étroitement la fonction flèche (déterminé au moment de la définition)

• La fonction flèche ne peut pas changer cela via la liaison, l'appel et l'application de la valeur, mais vous pouvez toujours appeler ces méthodes (mais la valeur de celle-ci n'est pas contrôlée par ces méthodes)

[Recommandations associées : Tutoriel vidéo javascript, front-end web]

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!