1. Standardwerte von Funktionsparametern
ES6 ermöglicht das Festlegen von Standardwerten für Funktionsparameter direkt nach der Parameterdefinition.
1. Grundlegende Verwendung
Gültigkeitsbedingungen für Standardwerte
Übergeben Sie keine Parameter oder übergeben Sie undefiniert explizit als Parameter. Nur in diesen beiden Fällen wird der Standardwert wirksam.
注意：null 就是 null，不会使用默认值。
// ES6 之前的默认值实现方式
const log = (x, y) => {
// typeof类型检测：返回表示当前数据类型的字符串
if (typeof y === 'undefined') {
y = 'world'
}
console.log(x, y)
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
// ES6 默认值实现方式
function log(x, y = 'World') {
console.log(x, y)
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
Einige Regeln für Standardwerte
Parametervariablen werden standardmäßig deklariert und können daher nicht erneut mit let oder const deklariert werden.
function foo(x = 5) {
let x = 1 // error
const x = 2 // error
}
Bei Verwendung von Parameterstandardwerten können Funktionen keine Parameter mit demselben Namen haben.
// 不报错
function foo(x, x, y) {
// ...
}
// 报错 SyntaxError: Duplicate parameter name not allowed in this context
function foo(x, x, y = 1) {
// ...
}
Parameter-Standardwerte werden träge ausgewertet. Der Parameter-Standardwert wird nicht als Wert übergeben, sondern der Wert des Standardwertausdrucks wird jedes Mal neu berechnet.
let x = 99
function foo(p = x + 1) {
console.log(p)
}
foo() // 100
x = 100
foo() // 101
2. Wird in Verbindung mit dem Standardwert für die Destrukturierung der Zuweisung verwendet
Standardwerte für Funktionsparameter können in Kombination mit Standardwerten für destrukturierende Zuweisungen verwendet werden. Durch das Festlegen von Standardwerten für Funktionsparameter können Sie Fehler vermeiden, wenn keine Parameter bereitgestellt werden.
// 只使用对象的解构赋值默认值
function foo({
x, y = 5 }) {
console.log(x, y)
}
foo({
}) // undefined 5
foo({
x: 1 }) // 1 5
foo({
x: 1, y: 2 }) // 1 2
// 函数 foo()调用时没提供参数，变量 x 和 y 就不会生成，从而报错
foo() // TypeError: Cannot read property 'x' of undefined
// -------------------------------------------
// 使用对象的解构赋值默认值 + 函数参数的默认值
function foo({
x, y = 5 } = {
}) {
console.log(x, y)
}
foo() // undefined 5
// 只使用对象的解构赋值默认值
function fetch(url, {
body = '', method = 'GET', headers = {
} }) {
console.log(method)
}
fetch('http://example.com', {
}) // 'GET'
fetch('http://example.com') // 报错
// --------------------------------------------------
// 使用对象的解构赋值默认值 + 函数参数的默认值
function fetch(url, {
body = '', method = 'GET', headers = {
} } = {
}) {
console.log(method)
}
fetch('http://example.com') // 'GET'
注意，函数参数的默认值生效以后，参数解构赋值依然会进行。
// 参数默认值 { a: 'hello' } 生效；进行解构赋值，从而触发参数变量 b 的默认值生效。
function f({
a, b = 'world' } = {
a: 'hello' }) {
console.log(b)
}
f() // world
// 解构赋值的默认值只在属性值为 undefined 时才会生效
function f({
a, b = 'world' } = {
b: 'hello' }) {
console.log(b)
}
f() // hello
3. Position des Parameter-Standardwerts
Normalerweise sollten Parameter mit definierten Standardwerten die Endparameter der Funktion sein. Weil es einfacher ist zu erkennen, welche Parameter weggelassen werden. Wenn ein Nicht-Tail-Parameter auf einen Standardwert gesetzt ist, kann dieser Parameter eigentlich nicht weggelassen werden.
// 例一
function f(x = 1, y) {
return [x, y]
}
f() // [1, undefined]
f(2) // [2, undefined]
f(, 1) // 报错
f(undefined, 1) // [1, 1]
// 例二
function f(x, y = 5, z) {
return [x, y, z]
}
f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 报错
f(1, undefined, 2) // [1, 5, 2]
Im obigen Code sind Parameter mit Standardwerten keine Endparameter. Derzeit können Sie nicht nur diesen Parameter weglassen, ohne die Parameter danach wegzulassen, es sei denn, Sie geben explizit undefiniert ein.
Wenn undefiniert übergeben wird, wird der Parameter auf den Standardwert gesetzt. Wenn er null ist, hat er diesen Effekt nicht.
function foo(x = 5, y = 6) {
console.log(x, y)
}
foo(undefined, null) // 5 null
4. Das Längenattribut der Funktion
Das Längenattribut einer Funktion entspricht der Anzahl der Parameter, die voraussichtlich an die Funktion übergeben werden.
Wenn eine Funktion einen Standardwert angibt, wird die Längeneigenschaft verzerrt. Zurückgegeben wird die Anzahl der Parameter ohne angegebenen Standardwert. Ist der Parameter mit einem Standardwert nicht der letzte Parameter, wird das Längenattribut in den nachfolgenden Parametern nicht mehr gezählt.
(function (a) {
}).length // 1
(function (a = 5) {
}).length // 0
(function (a, b, c = 5) {
}).length // 2
(function(...args) {
}).length // 0
(function (a = 0, b, c) {
}).length // 0
(function (a, b = 1, c) {
}).length // 1
5. Bewerbung
Mithilfe von Parameterstandardwerten können Sie festlegen, dass ein bestimmter Parameter nicht weggelassen werden darf und ein Fehler ausgegeben wird, wenn er weggelassen wird.
function throwIfMissing() {
throw new Error('Missing parameter')
}
function foo(mustBeProvided = throwIfMissing()) {
return mustBeProvided
}
foo() // Error: Missing parameter
Wenn die foo-Funktion im obigen Code ohne Parameter aufgerufen wird, wird die Funktion throwIfMissing mit dem Standardwert aufgerufen und somit ein Fehler ausgegeben.
Aus dem obigen Code können Sie auch ersehen, dass der Standardwert des Parameters mustBeProvided dem Ausführungsergebnis der Funktion throwIfMissing entspricht (beachten Sie, dass nach dem Funktionsnamen throwIfMissing ein Klammerpaar steht), was darauf hinweist, dass der Standardwert von ist Parameter wird nicht zur Definitionszeit, sondern zur Laufzeit ausgeführt. Wenn dem Parameter ein Wert zugewiesen wurde, wird die Funktion im Standardwert nicht ausgeführt.
Darüber hinaus kann der Standardwert des Parameters auf undefiniert gesetzt werden, was bedeutet, dass dieser Parameter weggelassen werden kann.
function foo(optional = undefined) {
··· }
2. Parameter zurücksetzen (…unbestimmter Parameter)
ES6 führt den Rest-Parameter (in der Form ... Variablenname) ein, um die zusätzlichen Parameter der Funktion zu erhalten, sodass keine Notwendigkeit besteht, das Argumentobjekt zu verwenden. Die mit dem restlichen Parameter übereinstimmende Variable ist ein Array, das die zusätzlichen Parameter in das Array einfügt.
function add(...values) {
let sum = 0
for (var val of values) {
sum += val
}
return sum
}
add(2, 5, 3) // 10
// arguments 变量的写法
function sortNumbers() {
// arguments 为类数组对象，需先使用 Array.from 转换为数组
return Array.from(arguments).sort()
}
// rest 参数的写法 （reset 参数为真正的数组）
const sortNumbers = (...numbers) => numbers.sort()
Beachten Sie, dass nach dem Rest-Parameter keine weiteren Parameter stehen dürfen (d. h. es darf nur der letzte Parameter sein), andernfalls wird ein Fehler gemeldet.
// 报错
function f(a, ...b, c) {
// ...
}
Die Längeneigenschaft der Funktion, mit Ausnahme des Restparameters.
(function(a) {
}).length // 1
(function(...a) {
}).length // 0
(function(a, ...b) {
}).length // 1
3. Pfeilfunktion
ES6 legt fest, dass Sie „arrow“ => verwenden können, um eine Funktion zu definieren, und die Syntax ist prägnanter. Es gibt keine eigenen Argumente wie this, super oder new.target. Pfeilfunktionsausdrücke eignen sich besser für die Stellen, an denen eine anonyme Funktion erwartet wird, diese aber nicht als Konstruktor verwendet werden kann.
1. Grundlegende Verwendung
Gewöhnliche Funktion
function 函数名() {
}
const 变量名 = function () {
}
Pfeilfunktion
(参数) => {
函数体}
const 变量名 = () => {
}
// 基本语法
const add = (x, y) => {
return x + y
}
// 有且只有一个参数，（）可以省略
const add = x => {
return x + 1
}
// 有且只有一条语句，且为 returen 语句，{} 和 return 可以省略
const add = (x, y) => x + y
// return 为对象时，对象外需要加 ()
const add = (x, y) => {
return {
value: x + y
}
}
const add = (x, y) => ({
value: x + y })
2. Funktion, auf die dies verweist
dies in es5 weist darauf hin
Der Wert der Funktion wird während der Ausführung der Funktion bestimmt, nicht wenn die Funktion definiert wird.
(1) Wird als gewöhnliche Funktion aufgerufen und zeigt auf das Fenster
(2) Beim Aufruf als Objektmethode zeigt diese auf das aktuelle Objekt
(3) Im Konstruktor (Klassenmethode von es5, es6) zeigt dies auf das durch den Konstruktor erstellte Instanzobjekt
(5) Die Funktion im Timer zeigt auf das Fenster, und die Funktion im Timer entspricht dem Aufruf einer normalen Funktion (setTimeout | setInterval).
Das This der Pfeilfunktion in es6 zeigt darauf
This in der Pfeilfunktion ist gebunden, wenn es definiert wird. Dies übernimmt das This des oberen Gültigkeitsbereichs. Die Pfeilfunktion selbst bestimmt nicht den Wert von This.
aufrufen, anwenden, binden
fn.call(this, ...params) und fn.apply(this, [params]) werden beide verwendet, um den this-Zeiger der Funktion zu ändern
Der Unterschied ist dass die Parameter unterschiedlich übergeben werden, call() akzeptiert eine Liste, apply() akzeptiert ein Array
Die Methode fn.bind(this, params) wird ebenfalls verwendet, um den This-Punkt der Funktion zu ändern, sie wird jedoch nicht sofort ausgeführt, sondern gibt eine neue Funktion zurück.
3. Szenarien, in denen Pfeilfunktionen nicht anwendbar sind
als Konstrukteur
Weil die Pfeilfunktion dies nicht hat und der Kern des Konstruktors dies ist.
Wenn Sie dies benötigen, um auf das aufrufende Objekt zu verweisen
Da die Pfeilfunktion dies nicht hat, ist dies die äußere Schicht, wenn dies in der Pfeilfunktion erscheint!
Wenn Sie eine Methode an ein Ereignis binden, beispielsweise eine Methode über addEventListener an ein Ereignis binden, zeigt diese bei Verwendung einer Pfeilfunktion auf das übergeordnete Fenster dieses Fensters.
Beim Definieren von Methoden für ein Objekt können keine Pfeilfunktionen verwendet werden
Pfeilfunktionen können in Methoden in Vue nicht verwendet werden, was dazu führt, dass diese auf etwas anderes als die aktuelle VM-Instanz zeigen und ein Fehler auftritt.
Wenn Argumente verwendet werden müssen
Pfeilfunktionen haben keine Argumente. (Für dieses Problem gibt es eine alternative Lösung: unbestimmte Parameter)
kein Prototyp
Da Pfeilfunktionen nicht als Konstruktoren verwendet werden können, gibt es für sie keinen eigenen Prototyp. Daher können Sie die Prototypeigenschaft nicht zum Hinzufügen neuer Methoden verwenden.
Der Yield-Befehl kann nicht verwendet werden, daher können Pfeilfunktionen nicht als Generatorfunktionen verwendet werden
4. Nachgestelltes Komma für Funktionsparameter
ES2017 erlaubt ein abschließendes Komma im letzten Parameter einer Funktion.
Bisher war beim Definieren oder Aufrufen einer Funktion kein Komma nach dem letzten Parameter zulässig.
function clownsEverywhere(
param1,
param2
) {
/* ... */ }
clownsEverywhere(
'foo',
'bar'
)
Wenn Sie im obigen Code nach param2 oder bar ein Komma hinzufügen, wird ein Fehler gemeldet.
Wenn Sie die Parameter wie oben in mehreren Zeilen schreiben (d. h. jeder Parameter belegt eine Zeile), wenn Sie den Code in Zukunft ändern, wenn Sie der Funktion clownsEverywhere einen dritten Parameter hinzufügen oder die Reihenfolge der Parameter anpassen möchten , müssen Sie es nach dem letzten Parameter hinzufügen. Ein Komma. Für das Versionsverwaltungssystem wird dadurch angezeigt, dass sich auch die Zeile, in der das Komma hinzugefügt wird, geändert hat. Dies erscheint etwas überflüssig, sodass die neue Syntax es ermöglicht, Definitionen und Aufrufe mit einem abschließenden Komma zu definieren und aufzurufen.
function clownsEverywhere(
param1,
param2,
) {
/* ... */ }
clownsEverywhere(
'foo',
'bar',
)
Durch diese Bestimmung werden auch die Funktionsparameter mit den Regeln für nachgestellte Kommas für Arrays und Objekte in Einklang gebracht.
5. Parameter des Catch-Befehls werden weggelassen
Die try...catch-Struktur der JavaScript-Sprache erforderte zuvor ausdrücklich, dass dem Catch-Befehl Parameter folgen und das vom Try-Codeblock ausgelöste Fehlerobjekt akzeptieren muss.
try {
// ...
} catch (err) {
// 处理错误
}
Im obigen Code folgt auf den Catch-Befehl der Parameter err.
Oftmals wird dieser Parameter möglicherweise nicht im Catch-Codeblock verwendet. Um eine korrekte Grammatik zu gewährleisten, müssen Sie jedoch trotzdem schreiben. ES2019 hat Änderungen vorgenommen, die es Catch-Anweisungen ermöglichen, Parameter wegzulassen.
try {
// ...
} catch {
// ...
}