Dieser Artikel bietet Ihnen eine ausführliche Einführung in die es6-Funktionen (Codebeispiele). Freunde in Not können darauf verweisen.
Standardwerte von Funktionsparametern
Wir alle wissen, dass durch die Deklaration einer Funktion formale Parameter festgelegt werden können, aber haben Sie jemals daran gedacht, dass formale Parameter auch Standardwerte direkt festlegen können? wie man es als nächstes schreibt
Code
function f(x,y=2) {
return x+y
}
console.log(f(2)) // 4Das obige kleine Beispiel legt nur einen Standardwert von 2 für y fest, und wenn wir dann diese Funktion verwenden, übergeben wir nur den x-Parameter 2, also erhalten wir 4. Was ist, wenn wir Parameter 1 an y übergeben? Welche Ergebnisse werden wir erhalten? Schauen Sie sich weiterhin das Beispiel unten an
function f(x,y=2) {
return x+y
}
console.log(f(2，1)) // 3Wir erhalten 3, denn wenn Sie die tatsächlichen Parameter übergeben, wird der Standardwert ersetzt. Weitere Beispiele erfordern, dass jeder selbst experimentiert ! ! !
function f(x，x,y=2) {
return x+y
}
console.log(f(2，2, 1)) // 报错Das obige Beispiel meldet einen Fehler, da wir nicht die gleichen Parameter festlegen können
let x = 3
function f(x,y=x) {
return x+y
}
console.log(f(2))
var x = 3
function f(x,y=x) {
return x+y
}
console.log(f(2))
function f(x,y=x) {
console.log(x,y) // 2 2
var x = 3
console.log(x,y) // 3 2
return x+y
}
console.log(f(2)) // 5Die obigen drei Beispiele sind Beispiele für den Funktionsparameterumfang. Schauen wir uns den ersten und zweiten Standard an Der Wert der Beispielfunktion hat einen eigenen separaten Gültigkeitsbereich. Wenn wir also das geänderte x außerhalb deklarieren, funktioniert es nicht. Wenn wir jedoch im dritten Beispiel x innerhalb der Funktion ändern, können wir uns den von uns gedruckten Wert ansehen . Bevor wir es deklarieren, sind unser x und y beide 2. Nach der Deklaration wird x zu 3 und y bleibt unverändert, also erhalten wir 5
官方注解：ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中
Code
function f(...x) {
console.log(x) // [1,2,3]
}
f(1,2,3)Im obigen Beispiel erhalten wir ein Array, das genau so ist, wie es definiert ist. Es werden die redundanten Variablen zu einem Array zusammengefügt
function f(arr,y,...x) {
console.log(x)
}
function f(arr,...x，y) {
}Das erste der beiden Beispiele oben: Eines kann ausgeführt werden und die gewünschten Ergebnisse liefern, aber das zweite meldet einen Fehler, da der Rest-Parameter nur an der letzten Parameterposition verwendet werden kann
So verwenden Sie Rest im strikten Modus ?
从Es5开始函数内已经可以定义严格模式了，但Es6规定函数参数默认值定义严格模式会报错，但也要看严格模式定义在局部还是全局
Wenn Sie den strengen Modus nicht verstehen, können Sie den
Strikten Modus
Code
function fn(a=5) {
'use strict';
console.log(a)
}
fn()im obigen Beispiel lesen und verstehen Ich habe den strikten Modus innerhalb der Funktion festgelegt, aber die Ergebnisse wurden nicht wie erwartet zurückgegeben, sondern es wurde ein Fehler gemeldet. Werfen wir einen Blick auf die offizielle Erklärung: Der strikte Modus innerhalb einer Funktion gilt sowohl für Funktionskörper als auch für Funktionsparameter. Wenn die Funktion jedoch ausgeführt wird, werden zuerst die Funktionsparameter und dann der Funktionskörper ausgeführt. Das heißt, wenn der strikte Modus innerhalb der Funktion definiert ist, werden zuerst die Funktionsparameter und dann der Funktionskörper ausgeführt (wenn der strikte Modus nicht definiert ist, werden zuerst die Funktionsparameter ausgeführt), sodass es nicht sinnvoll ist, zu überprüfen, ob die Parameter vorhanden sind befinden sich im Funktionskörper im strikten Modus
Wie können wir also solche Fehler vermeiden?
Code
'use strict';
function fn2(a=5) {
console.log(a)
}
fn2()
function fn() {
'use strict';
return function (a=5) {
console.log(5)
}
}
fn()() // 5Wir können den strikten Modus global definieren oder ihn innerhalb einer Funktion definieren und eine Funktion mit Parametern zurückgeben, sodass wir die Ausführungsfunktionsparameter umgehen und den Funktionskörper ausführen können. Kein Fehler wird gemeldet, wenn
官方注解： 函数的name属性，返回该函数的函数名 使用方式 函数名.name
Code
function a() {
}
console.log(a.name) // a
function b() {
}
console.log(b.name) // aIn den beiden obigen Beispielen erhalten wir den Namen der Funktion natürlich mithilfe des Namensattributs. Es5 kann auch verwendet werden. Sie können es in der Es6- und Es5-Umgebung testen.
let fn = a => a
console.log(fn(10)) // 10
// 对比
let fn1 = function (a) {
return a
}
console.log(fn1(10)) //10
let fn2 = (a,b) => a+b
console.log(fn2(1,2))
// 对比
let fn21 = function (a,b) {
return a+b
}
console.log(fn2(1,2))Wir können uns den Unterschied zwischen der Pfeilfunktion oben und den Funktionen ansehen, die wir häufig verwenden Schreiben Sie in Es5, wodurch die Anzahl der englischen Buchstaben erheblich reduziert wird. Tatsächlich haben Pfeilfunktionen ähnliche Funktionen wie gewöhnliche Funktionen. Sie sind sehr einfach und leicht zu verstehen Hilfreich für die Sauberkeit Ihres eigenen Codes. Dann gibt es mehrere Pfeilfunktionen. Beachten Sie, dass sich jeder daran erinnern muss, dass dieses Objekt im Funktionskörper ist wo es definiert ist, nicht das Objekt, wo es verwendet wird (dies zeigt auf einen festen Punkt)
通俗的解释：就是在函数中最后一步调用函数
let fn = () => {
console.log(123)
return () => 5
}
console.log(fn()()) // 123 5let fn = (a,b) => {
if(a===b) return b
console.log(1)
return fn(a+1, b)
}
console.log(fn(1,5))Es7中允许函数形参最后一个带有逗号，以前都是不允许带有逗号的
let fn = (a,) => {
console.log(a)
}
fn(1)JavaScript-Tutorial-Video
-Spalte der chinesischen PHP-Website!Das obige ist der detaillierte Inhalt vonErweiterte Einführung in es6-Funktionen (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
