Beispielcode für die Praxis der ES6-Pfeilfunktion

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript, das hauptsächlich Probleme im Zusammenhang mit der Anwendung von Pfeilfunktionen vorstellt. Ausdrücke eignen sich besser für Orte, an denen ursprünglich anonyme Funktionen benötigt werden, und können nicht als Konstruktor verwendet werden Schauen Sie es sich gemeinsam an, ich hoffe, es wird für alle hilfreich sein.

[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

Einführung

Die Syntax von Pfeilfunktionsausdrücken ist prägnanter als die von Funktionsausdrücken und verfügt nicht über eigene Argumente , super oder neues .target. Pfeilfunktionsausdrücke eignen sich besser, wenn ansonsten eine anonyme Funktion erforderlich wäre und diese nicht als Konstruktor verwendet werden kann. ---- MDN

Grundlegende Verwendung

Parameterdarstellung

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

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

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

Rückgabewertdarstellung

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

Erweitert

//加括号的函数体返回对象字面量表达式：
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

dieses

Best Practice

• Wenn Sie müssen Verwenden Sie anonyme Funktionen oder Inline-Callback Funktionen mithilfe von Pfeilfunktionen. eslint: Prefer-Arrow-Callback, Arrow-Spacing

Warum? Die Syntax ist prägnanter und entspricht eher den Erwartungen
Wenn die Funktionslogik recht komplex ist, sollten Sie benannte Funktionen verwenden

// 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;});

• Wenn der Funktionskörper nur eine Anweisung enthält und diese Anweisung keine Nebenwirkungen hat. Verwenden Sie die Kurzform, um implizit zurückzukehren, oder die vollständige Form, um explizit zurückzukehren.
  eslint: Pfeilparens, Pfeilkörperstil

// 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;
});

• Wenn der Ausdruck mehrere Zeilen einnimmt, verwenden Sie Klammern, um die Lesbarkeit zu verbessern

Warum? Der Anfang und das Ende der Funktion sind klarer

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

• Wenn die Funktion nur einen Parameter hat, lassen Sie die Klammern und die geschweiften Klammern weg. Andernfalls verwenden Sie immer die vollständige Schreibmethode, um die Konsistenz zu gewährleisten. 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;});

• verwendet eine eindeutige =>-Syntax, um es von = zu unterscheiden. eslint: kein verwirrender Pfeil wenn es erstellt wird, hat es keine Konstruktionsfähigkeit und wird nach der Verwendung weggeworfen. Im Gegensatz zu gewöhnlichen Funktionen, die wiederverwendet werden, ist kein Konstruktorprototyp erforderlich, d. h. das Prototypattribut wird nicht automatisch generiert)

• Dies ist in einer normalen Funktion dynamisch, während dies in einer Pfeilfunktion auf das Objekt zeigt, das die Pfeilfunktion eng umschließt (bestimmt zum Zeitpunkt der Definition)

• Die Pfeilfunktion kann dies nicht durch Binden, Aufrufen und Anwenden von Werten ändern, aber Sie können diese Methoden trotzdem aufrufen (der Wert davon wird jedoch nicht durch diese Methoden gesteuert)

• [Verwandte Empfehlungen:
Javascript-Video-Tutorial
• ,

  Web-Frontend

  ]

Das obige ist der detaillierte Inhalt vonBeispielcode für die Praxis der ES6-Pfeilfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!