So bedienen Sie die Standardparameter von Verarbeitungsfunktionen in ES5- und ES6-Umgebungen

Dieses Mal zeige ich Ihnen, wie Sie die Standardparameter der Verarbeitungsfunktion in den ES5- und ES6-Umgebungen bedienen. Welche Vorsichtsmaßnahmen gibt es für den Betrieb der Standardparameter der Verarbeitungsfunktionen in den ES5- und ES6-Umgebungen? Umgebungen Das Folgende ist ein praktischer Fall. Lassen Sie uns einen Blick darauf werfen.

Der Funktionsstandardwert verbessert die Robustheit erheblich (d. h. er macht das Programm robuster)

MDN-Beschreibung der Funktionsstandardparameter: Funktionsstandardparameter lassen zu, dass kein Wert vorhanden oder undefiniert ist übergeben Verwenden Sie bei der Eingabe die Standardparameter.

ES5

Verwenden Sie logisch oder ||, um

zu implementieren Wie wir alle wissen, gibt es in der ES5-Version keine direkte Methode, um mit dem Standardwert der Funktion
umzugehen, sodass wir die Funktion der Funktion nur selbst verbessern können. Dies geschieht normalerweise wie folgt:

function doSomething (name, age) {
 name = name || 'default name'
 age = age || 18
 console.log(name, age)
}

Wir werden die beiden Parameter Name und Alter für die Standardwertverarbeitung verwenden. Wenn nicht, verwendet den Standardwert .

Nach dem Ausführen der Funktion scheint nichts falsch zu sein:

doSomething()    // default name, 18
doSomething('Niko') // Niko    , 18
doSomething(, 12)  // default name, 12

Wenn wir jedoch solchen Code ausführen, erhalten wir einige unerwartete Ergebnisse:

doSomething('Niko', 0) // Niko, 18

Das kann sein Ich habe festgestellt, dass für Parameter 0 unsere obige Standardparameterimplementierungsmethode problematisch ist

, genau wie die vier Ausdrücke unten, alle werden falsch ausgegeben, was offensichtlich nicht die obige MDN-Definition des Funktionsstandards erfüllen kann Parameter:

console.log(0     || 'wrong')
console.log(''    || 'wrong')
console.log(null   || 'wrong')
console.log(false   || 'wrong')

Richtige Haltung

Die korrekte Standardwertverarbeitung in ES5 sollte also wie folgt aussehen:

function doSomething (name, age) {
 if (name === undefined) {
  name = 'default name'
 }
 if (age === undefined) {
  age = 18
 }
 console.log(name, age)
}

Verwenden Sie den Operator ternärer Operator, um die Operation zu vereinfachen

oder wir können ihn auf die Form des ternären Operators verkürzen:

function doSomething (name, age) {
 name = name === undefined ? 'default name' : name
 age = age === undefined ? 18       : age
 console.log(name, age)
}

Verwenden Sie Funktionen zum Einkapseln

Aber wenn wir diese Vorgänge jedes Mal wiederholen müssen, wenn wir eine Funktion schreiben
, wäre das zu mühsam, also haben wir diese Logik einfach gekapselt:

function defaultValue (val, defaultVal) {
 return val === undefined ? defaultVal : val
}
function doSomething (name, age) {
 name = defaultValue(name, 'default name')
 age = defaultValue(age , 18)
 console.log(name, age)
}

Auf diese Weise wird die Logik der Standardparameter der Funktion sehr präzise in ES5 implementiert

noch ein paar Dinge

Über die Implementierung der defaultValue-Funktion oben Methode, danach Wir nutzen sinnvollerweise die Vorteile schwach typisierter Sprachen
Wir können diese Methode verwenden, um die Operation des ternären Operators zu speichern:

function defaultValue () {
 return arguments[+(arguments[0] === undefined)]
}

Wir wissen, dass Argumente alle tatsächlichen Parameter der Funktion darstellen

Wir verwenden Argumente[0], um den ersten tatsächlichen Parameter zu erhalten, und führen dann einen kongruenten Vergleich mit undefiniert durch

Konvertieren Sie das Ergebnis des Ausdrucks in eine Zahl in der äußeren Ebene und verwenden Sie diesen Wert dann als Index, um Argumente zu erhalten, die Parametern entsprechen.

Da es aus einem booleschen Wert konvertiert wird, gibt es nur zwei Optionen: 0 und 1.

realisiert auch die Funktion des obigen ternären Operators.

ES6

Der Standardwert der Funktion in der ES6-Version ist im Grunde die Routine, die wir oben implementiert haben

Aber weil Es ist nativ, daher wird es eine entsprechende neue Syntax geben, die prägnanter verwendet werden kann:

function doSomething (name = 'default name', age = 18) {
 console.log(name, age)
}

ES6 bietet eine neue Syntax, die es uns ermöglicht, = [defaultValue] direkt nach dem Funktionsdeklarationsformular zu schreiben der Standardwert eines Parameters.
Durch die Verwendung dieser Methode entfällt direkt die Notwendigkeit, den Standardwert innerhalb der Funktion zu überprüfen, sodass sich die Funktion auf das konzentrieren kann, was sie tun soll.

So lösen Sie eine Ausnahme für bestimmte erforderliche Parameter aus

Diese neue Syntax von ES6 kann uns sehr gute Fehler machen Erinnerung für einen erforderlichen Parameter:

function requireParams () {
 throw new Error('required params')
}
function doSomething (name = requireParams(), age = 18) {
 // do something
}

Wenn der Namensparameter undefiniert ist, wird die Standardwertregel ausgelöst

und dann wird die Funktion requireParams aufgerufen, und wir werfen direkt einen Fehler in die Funktion

Standardwertverarbeitung komplexer Strukturparameter

Die obige Verarbeitung gilt für einfache Grundtypdaten, aber wenn wir Es gibt eine Funktion wie folgt :

function init ({id, value}) {}
init({
 id: 'tagId',
 value: 1
})

如果在ES5环境下，针对这种参数的默认值处理将会变得无比复杂

首先要判断这一个参数是否存在，然后在判断参数中的所有key是否存在

而在ES6中，可以这样来做：

function init ({
 id  = 'defaultId',
 value = 1
} = {}) {
 console.log(id, value)
}
init()

首先在解构函数的后边添加默认值= {}，然后针对每一项参数添加默认值，很简洁的就实现了我们的需求。

ES5版本的polyfill代码在仓库中的位置：defaultValue

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样优化js async函数

如何使用node搭建服务器,写接口,调接口,跨域

Das obige ist der detaillierte Inhalt vonSo bedienen Sie die Standardparameter von Verarbeitungsfunktionen in ES5- und ES6-Umgebungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!