Was sind die Vorteile der ES6-Pfeilfunktionen?

Die Vorteile von es6-Pfeilfunktionen: 1. Prägnante Syntax, z. B. „Parameter => {Anweisungen;};“, die bequemer anzuwenden ist. 2. Möglichkeit zur impliziten Rückgabe. 3. Intuitiverer Umfang und diese Bindung ( binden Sie dies nicht).

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Wir alle wissen, dass es viele Möglichkeiten gibt, Funktionen in JavaScript zu definieren. Am häufigsten wird das Funktionsschlüsselwort verwendet:

// 函数声明
function sayHi(someone) {
  return `Hello, ${someone}!`;
}
// 函数表达式
const sayHi = function(someone) {
  return `Hello, ${someone}`;
}

Die Funktionsdeklaration und der Funktionsausdruck oben werden als reguläre Funktionen bezeichnet.

Es gibt auch die neue Pfeilfunktionssyntax in ES6:

const sayHi = (someone) => {
  return `Hello, ${someone}!`;
}

Im Vergleich zu den Funktionen im ursprünglichen JS sind die in ES6 hinzugefügten Pfeilfunktionen prägnanter und bequemer anzuwenden.

Vorteile der es6-Pfeilfunktion:

1. Prägnante Syntax

Ein Array, verdoppeln Sie es und geben Sie es dann aus.

删掉一个关键字，加上一个胖箭头；
没有参数加括号，一个参数可选择；
多个参数逗号分隔，

const numbers = [5,6,13,0,1,18,23];
//原函数
const double = numbers.map(function (number) {
    return number * 2;
})
console.log(double);
//输出结果
//[ 10, 12, 26, 0, 2, 36, 46 ]
//箭头函数     去掉function, 添加胖箭头
const double2 = numbers.map((number) => {
    return number * 2;
})
console.log(double2);
//输出结果
//[ 10, 12, 26, 0, 2, 36, 46 ]
//若只有一个参数，小括号能够不写（选择）
const double3 = numbers.map(number => {
    return number * 2;
})
console.log(double3);
//如有多个参数，则括号必须写；若没有参数，（）须要保留
const double4 = numbers.map((number,index) => {
    return `${index}:${number * 2}`;  //模板字符串
})
console.log(double4);

2. Kann implizit zurückgegeben werden. Die angezeigte Rückgabe ist SVG eine Variable, wie oben double3. Anonyme Funktionen sind beim Rekursieren und Entbinden von Funktionen nützlich.

3. Eine intuitivere Bindung von Scope und This (

)

Ein Objekt, so haben wir es ursprünglich in der Funktion geschrieben

Ein Objekt, so haben wir es ursprünglich in der Funktion geschrieben

const double3 = numbers.map(number => {
    return number * 2;  
    //return 返回内容;
})

不绑定thisThis It bedeutet, dass die Ausrichtung von this.hobbies korrekt ist, die Ausrichtung von this.name jedoch falsch;

Wenn eine unabhängige Funktion ausgeführt wird, zeigt diese auf window

Wenn wir korrekt zeigen möchten, besteht unser ursprünglicher Ansatz darin, eine Variable zu setzen Ersetzung spa

当你想简单返回一些东西的时候，以下：去掉return和大括号，把返回内容移到一行，较为简洁;
const double3 = numbers.map(number => number * 2);

Dies liegt daran, dass „this“, auf das in der Pfeilfunktion zugegriffen wird, tatsächlich von „this“ in seinem übergeordneten Bereich geerbt wird. Das eigene „this“ existiert nicht und ist daher äquivalent zu „this“, wenn es deklariert wird sicher (lexikalischer Bereich), dass sich der Zeiger davon beim Aufruf der Methode nicht ändert.

【Verwandte Empfehlungen:

Javascript-Video-Tutorial

,

Web-Frontend

】

Das obige ist der detaillierte Inhalt vonWas sind die Vorteile der ES6-Pfeilfunktionen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!