Clean Code mit ES6 -Standardparametern und Eigenschaften -Kürzungen

Kernpunkte

Die Standardparameter
• ES6 ermöglichen es, dass der Standardwert für Funktionen initialisiert wird, und werden verwendet, wenn die Parameter weggelassen oder nicht definiert werden. Diese Funktion vereinfacht den Code und macht ihn prägnanter und einfacher zu lesen, da er die Notwendigkeit reduziert, wenn Anweisungen und andere Überprüfungen erforderlich sind.
• ES6 -Eigenschaft Abkürzung bietet eine Möglichkeit, den Code prägnanter und einfacher zu lesen, insbesondere wenn es sich um große Konfigurationsobjekte handelt. Ohne eine vollständige Attributzuweisung zu schreiben, können Sie Werte den Attributen mit demselben Namen wie der Variablen unter Verwendung der Abkürzung zuweisen.
• Die Standardparameter und -attributabkürzungen in ES6 können die Methode ordentlich und in einigen Fällen kürzer machen. Sie können Entwicklern helfen, sich mehr auf die praktischen Verwendung der Methode zu konzentrieren, ohne von vielen Standardvorbereitungen abgelenkt zu werden.
• Obwohl Attributabkürzungen eher ein Erscheinungsmerkmal sind, können sie die Produktivität erhöhen, indem sie die zeitliche Schreiben von Variablen, die Konfiguration von Objekten und die Schlüsselwörter für Funktionen verringern. Sie können auch auf Verwendungsmethodendefinitionen innerhalb von Objekten angewendet werden, um einen saubereren Code zu erhalten.

Methoden erstellen bedeutet auch, APIs zu schreiben - ob für sich selbst, für andere Entwickler in Ihrem Team oder für andere Entwickler, die Ihr Projekt verwenden. Abhängig von der Größe, Komplexität und dem Zweck der Funktion müssen Sie die Standardeinstellungen und die Eingabe/Ausgabe -API berücksichtigen. Die Standardfunktionsparameter und die Attributabkürzung sind zwei bequeme Funktionen von ES6, mit denen Sie APIs schreiben können.

es6 Standardparameter

Lassen Sie uns das Wissen schnell überprüfen und dann die Grammatik ansehen. Mit den Standardparametern können wir die Standardwerte für die Funktion initialisieren. Verwenden Sie den Standardwert, wenn der Parameter weggelassen oder undefiniert ist. Dies bedeutet, dass Null ein gültiger Wert ist. Das Standardargument kann von einer Nummer zu einer anderen Funktion alles sein.

// 基本语法
function multiply(a, b = 2) {
  return a * b;
}
multiply(5); // 10

// 默认参数也适用于后面的默认参数
function foo(num = 1, multi = multiply(num)) {
  return [num, multi];
}
foo(); // [1, 2]
foo(6); // [6, 12]

Ein praktisches Beispiel

Schauen wir uns eine grundlegende Funktion an und zeigen, wie Standardparameter Ihre Entwicklung beschleunigen und Ihren Code besser organisiert werden können. Unsere Beispielmethode heißt createLement (). Es akzeptiert einige Konfigurationsparameter und gibt ein HTML -Element zurück. Die API sieht so aus:

// 我们想要一个 <p> 元素，带有一些文本内容和两个附加的类。
// 返回 <p>Such unique text</p>
createElement('p', {
  content: 'Such unique text',
  classNames: ['very-special-text', 'super-big']
});

// 为了使此方法更有用，它应该在任何参数被省略或根本没有传递参数时始终返回默认元素。
createElement(); // <div>Very default</div>

Die Implementierung dieser Methode hat nicht viel Logik, kann jedoch aufgrund ihrer Standardabdeckung ziemlich groß werden.

// 没有默认参数，它看起来相当臃肿且不必要地庞大。
function createElement(tag, config) {
  tag = tag || 'div';
  config = config || {};

  const element = document.createElement(tag);
  const content = config.content || 'Very default';
  const text = document.createTextNode(content);
  let classNames = config.classNames;

  if (classNames === undefined) {
    classNames = ['module-text', 'default'];
  }

  element.classList.add(...classNames);
  element.appendChild(text);

  return element;
}

Bisher lief alles gut. Was ist hier los? Wir machen Folgendes:

1. Standardwerte für unser Parameter -Tag und Konfiguration festlegen, falls sie nicht übergeben werden ( Beachten Sie, dass einige Codeinspektoren die Parameterumwandlung )
nicht mögen
2. Erstellen Sie Konstanten mit dem tatsächlichen Inhalt (und Standardwerten)
3. prüfen Sie, ob Klassennamen definiert sind, und weisen Sie das Standardarray
zu, wenn nicht.
4. Erstellen und ändern Sie Elemente, bevor Sie sie zurückgeben

Verwenden wir nun diese Funktion und optimieren Sie sie, um sie einfacher und schneller zu schreiben und ihren Zweck klarer zu zeigen:

// 基本语法
function multiply(a, b = 2) {
  return a * b;
}
multiply(5); // 10

// 默认参数也适用于后面的默认参数
function foo(num = 1, multi = multiply(num)) {
  return [num, multi];
}
foo(); // [1, 2]
foo(6); // [6, 12]

Anstatt die Logik der Funktion zu berühren, haben wir die gesamte Standardverarbeitung aus der Funktionskörper gelöscht. Funktionssignaturen enthalten jetzt alle Standardwerte. Lassen Sie mich Teil weiter erklären, was ein bisschen verwirrend sein kann:

// 我们想要一个 <p> 元素，带有一些文本内容和两个附加的类。
// 返回 <p>Such unique text</p>
createElement('p', {
  content: 'Such unique text',
  classNames: ['very-special-text', 'super-big']
});

// 为了使此方法更有用，它应该在任何参数被省略或根本没有传递参数时始终返回默认元素。
createElement(); // <div>Very default</div>

Wir deklarieren nicht nur einen Standard -Objektparameter, sondern auch das Standardobjektattribut . Dies lässt die Standardkonfiguration klarer aussehen, anstatt nur ein Standardobjekt zu deklarieren (z. B. config = {}) und dann die Standardeigenschaften später festlegen. Es kann etwas mehr Zeit dauern, um sich daran zu gewöhnen, aber letztendlich verbessert es Ihren Workflow. Natürlich können wir für größere Konfigurationen immer noch argumentieren, dass es mehr Overhead erzeugt, und es wäre einfacher, die Standardverarbeitung im Körper der Funktion zu behalten.

ES6 -Attributabkürzung

Wenn die Methode große Konfigurationsobjekte als Parameter akzeptiert, kann Ihr Code ziemlich groß werden. Die übliche Praxis besteht darin, einige Variablen vorzubereiten und sie dem Objekt hinzuzufügen. Die Attributabkürzung ist

Syntax Zucker , wodurch dieser Schritt kürzer und leichter zu lesen ist:

// 没有默认参数，它看起来相当臃肿且不必要地庞大。
function createElement(tag, config) {
  tag = tag || 'div';
  config = config || {};

  const element = document.createElement(tag);
  const content = config.content || 'Very default';
  const text = document.createTextNode(content);
  let classNames = config.classNames;

  if (classNames === undefined) {
    classNames = ['module-text', 'default'];
  }

  element.classList.add(...classNames);
  element.appendChild(text);

  return element;
}

Vereinfachen Sie Ihre API

Okay, lass uns zu einem weiteren häufigeren Beispiel zurückkehren. Die folgende Funktion nimmt einige Daten an, ändern Sie diese und ruft eine andere Methode auf:

// 默认所有内容
function createElement(tag = 'div', {
  content = 'Very default',
  classNames = ['module-text', 'special']
} = {}) {
  const element = document.createElement(tag);
  const text = document.createTextNode(content);

  element.classList.add(...classNames);
  element.appendChild(text);

  return element;
}

nennen wir oft variable und Objektattributnamen gleich. Mithilfe der Attributabkürzung in Kombination mit der Dekonstruktion können wir den Code tatsächlich sehr verkürzen:

// 这里到底发生了什么？
function createElement({
  content = 'Very default',
  classNames = ['module-text', 'special']
} = {}) {
  // 函数体
}

Dies kann noch eine Weile dauern, bis Sie sich daran gewöhnen. Letztendlich ist es eines der neuen Funktionen in JavaScript, das mir hilft, Code schneller zu schreiben und eine sauberere Funktion zu verwenden. Aber warte, es gibt noch mehr! Die Attributabkürzung kann auch auf die Verwendungsdefinition innerhalb des Objekts angewendet werden:

const a = 'foo', b = 42, c = function() {};

// 以前我们会像这样使用这些常量。
const alphabet = {
  a: a,
  b: b,
  c: c
};

// 但是使用新的简写，我们现在实际上可以这样做，
// 这与上面相同。
const alphabet = {a, b, c};

Schlussfolgerung

Standardparameter und Attributabkürzungen sind eine großartige Möglichkeit, Ihre Methode organisierter und in einigen Fällen kürzer zu gestalten. Insgesamt haben mir die Standardfunktionsparameter geholfen, mich mehr auf die praktische Verwendung der Methode zu konzentrieren, ohne durch eine Menge Standardvorbereitung und wenn Anweisungen abgelenkt zu werden. Die Attributabkürzung ist in der Tat eher ein Erscheinungsmerkmal, aber ich finde mich produktiver und verbringe weniger Zeit damit, alle Variablen, Konfigurationsobjekte und Funktionsschlüsselwörter zu schreiben. Verwenden Sie bereits Standardparameter und Attributabkürzungen?

Dieser Artikel wurde von Sebastian Seitz überprüft. Vielen Dank an alle SitePoint -Peer -Rezensenten, die SitePoint -Inhalte perfekt gemacht haben!

FAQ über ES6 -Standardparameter (FAQ)

Was sind die Vorteile der Verwendung von ES6 -Standardparametern?

ES6 -Standardparameter bieten mehrere Vorteile. Erstens helfen sie, Ihren Code prägnanter und einfach zu lesen. Ohne zu überprüfen, ob die Parameter undefiniert sind und dann die Standardwerte zugewiesen werden, können Sie alles in einer Zeile tun. Dies reduziert die Menge an Code, die Sie schreiben müssen, und erleichtert anderen, Ihren Code zu verstehen. Zweitens helfen sie, Fehler zu verhindern. Wenn eine Funktion einen bestimmten Parameter erwartet, aber nicht bereitgestellt wird, kann dies zu unerwarteten Ergebnissen oder Fehlern führen. Durch Einstellen von Standardparametern können Sie sicherstellen, dass Ihre Funktion alle Parameter enthält, die sie benötigt, um ordnungsgemäß zu funktionieren.

Kann ich die ES6 -Standardparameter mit dekonstruierten Aufgaben verwenden?

Ja, Sie können die ES6 -Standardparameter mit dekonstruierten Zuordnungen verwenden. Dies ist ein leistungsstarkes Merkmal von ES6, mit dem Sie Werte in Arrays oder Eigenschaften in Objekten in verschiedene Variablen auspacken können. Wenn Sie in Verbindung mit den Standardparametern verwendet werden, können Sie Werte aus Objekten oder Arrays extrahieren und Standardwerte zuweisen, wenn die extrahierten Werte nicht definiert sind.

Wie unterscheidet sich die Standardparameter von ES6 vom Argumenteobjekt in JavaScript?

Das Objekt

Argumente ist ein Array-ähnliches Objekt, das alle an die Funktion übergebenen Parameter enthält. Es gibt jedoch nicht alle Methoden, um Arrays zu haben, und ist nicht so flexibel wie die ES6 -Standardparameter. Mit Standardparametern können Sie Standardwerte für undefinierte Parameter festlegen, die in Argumentenobjekten nicht möglich sind.

Kann ich die ES6 -Standardparameter im Konstruktor verwenden?

Ja, Sie können die ES6 -Standardparameter im Konstruktor verwenden. Dies ist besonders nützlich, wenn neue Instanzen einer Klasse erstellt werden. Wenn beim Erstellen einer neuen Instanz bestimmte Parameter nicht bereitgestellt werden, werden die Standardparameter verwendet, um sicherzustellen, dass das neue Objekt über alle erforderlichen Eigenschaften verfügt.

Wird sich die Leistung auf die Verwendung von ES6 -Standardparametern auswirken?

Im Allgemeinen ist die Leistungseinflüsse der Verwendung von ES6 -Standardparametern gering und sollte kein Problem sein. Wie bei jeder Funktion sollte es jedoch mit Vorsicht verwendet werden. Übermäßige Verwendung von Standardparametern, insbesondere im leistungskritischen Code, kann eine langsame Ausführungszeit verursachen. Testen Sie wie immer Ihren Code und überwachen Sie seine Leistung.

Kann ich die ES6 -Standardparameter mit der Pfeilfunktion verwenden?

Ja, Sie können die ES6 -Standardparameter mit den Pfeilfunktionen verwenden. Die in ES6 eingeführten Pfeilfunktionen bieten eine kurze Syntax, um Funktionsausdrücke zu schreiben. Sie sind besonders nützlich, wenn sie Funktionen höherer Ordnung verwenden, die andere Funktionen als Argumente betrachten.

Wie wird der Nullwert durch die Standardparameterfunktion von ES6 behandelt?

Wenn der Parameter einen Nullwert übergibt, weist die ES6 -Standardparameterfunktion den Standardwert nicht zu. Dies liegt daran, dass Null im Gegensatz zu Undefined als Wert in JavaScript angesehen wird. Wenn Sie einen Standardwert zuweisen möchten, wenn der Parameter null ist, müssen Sie diesen Fall in Ihrem Code separat behandeln.

Kann ich die ES6 -Standardparameter in rekursiven Funktionen verwenden?

Ja, Sie können die ES6 -Standardparameter in rekursiven Funktionen verwenden. Dies ist besonders nützlich, wenn Sie einen Basisfall für eine rekursive Funktion anbieten möchten, aber den Anrufer nicht bitten möchten, sie immer bereitzustellen.

Kann ich die ES6 -Standardparameter mit den verbleibenden Parametern verwenden?

Ja, Sie können die ES6 -Standardparameter mit den verbleibenden Parametern verwenden. Denken Sie jedoch daran, dass die verbleibenden Parameter der letzte Parameter in der Funktionsdefinition sein müssen. Darüber hinaus können Sie den verbleibenden Parametern nicht Standardwerte zuweisen, aber Sie können den einzelnen Parametern für einen Teil der verbleibenden Parameter Standardwerte zuweisen.

Kann ich die ES6 -Standardparameter mit dem Erweiterungsoperator verwenden?

Ja, Sie können die ES6 -Standardparameter mit dem Erweiterungsoperator verwenden. Mit dem Erweiterungsoperator können Sie iterable Objekte wie Arrays auf einzelne Elemente erweitern. Wenn Sie mit Standardparametern verwendet werden, können Sie eine Reihe von Werten an die Funktion übergeben und allen undefinierten Parametern einen Standardwert zuweisen.

Das obige ist der detaillierte Inhalt vonClean Code mit ES6 -Standardparametern und Eigenschaften -Kürzungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!