Erweiterte Einführung in es6-Funktionen (Codebeispiel)

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)) // 4

Das 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)) // 3

Wir 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)) // 5

Die 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

Restparameter

官方注解：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()() // 5

Wir 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

Namensattribut

 官方注解： 函数的name属性，返回该函数的函数名  使用方式   函数名.name

Code

function a() {
}
console.log(a.name) // a

function b() {
}
console.log(b.name) // a

In 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.

Pfeilfunktion

  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)

kann nicht als Konstruktor verwendet werden, d. h. der neue Befehl kann nicht verwendet werden, andernfalls wird ein Fehler ausgegeben
1. Das Argumentobjekt kann nicht verwendet werden und das Objekt ist im Funktionskörper nicht vorhanden. Wenn Sie es verwenden möchten, können Sie stattdessen den Rest-Parameter verwenden
2. Der Yield-Befehl kann nicht verwendet werden, daher kann die Pfeilfunktion nicht als Generatorfunktion verwendet werden (wir werden diese Funktion am Ende erwähnen)
4. Tail call

 通俗的解释：就是在函数中最后一步调用函数

Code

  let fn = () => {
  console.log(123)
  return () => 5
  }
  console.log(fn()()) // 123     5

Tail recursion

let fn = (a,b) => {
  if(a===b) return b
  console.log(1)
  return fn(a+1, b)
  }
  console.log(fn(1,5))

Führen Sie im letzten Schritt innerhalb der Funktion selbst einen rekursiven Aufruf aus, um den rekursiven Effekt zu erzielen

Funktion Das nachgestellte Komma des Parameters

Es7中允许函数形参最后一个带有逗号，以前都是不允许带有逗号的
  let fn = (a,) => {
      console.log(a)
  }
  fn(1)

Im obigen Beispiel haben wir nach dem Parameter ein Komma hinzugefügt. Nach der Ausführung des Ergebnisses haben wir festgestellt, dass es normal ausgeführt werden kann, aber ich werde es nicht tun Erhalten Sie einen Fehler in der es6-Umgebung und es wird kein Fehler gemeldet. Sie können es jetzt versuchen.

Das Wichtigste, was wir lernen müssen Pfeilfunktion und Restparameterwertübertragung sowie die Funktionsweise der Funktion im strikten Modus

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie im

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!