12 JavaScript-Konzepte, die Ihre Entwicklungsfähigkeiten verbessern


JavaScript ist eine komplexe Sprache. Wenn Sie ein JavaScript-Entwickler auf einer beliebigen Ebene sind, ist es wichtig, die grundlegenden Konzepte zu verstehen. Dieser Artikel befasst sich mit 12 Konzepten, die für jeden JS-Entwickler von entscheidender Bedeutung sind, die jedoch keineswegs die gesamte Breite dessen darstellen, was ein JS-Entwickler wissen sollte. Ich werde diese Liste in einem Github-Repository mit dem Namen JS Tips & Tidbits kontinuierlich aktualisieren . Bitte starte ? und teile mit, wenn du mitmachen möchtest!

1. Zuordnung von Wert zu Referenzvariable

Das Verständnis, wie JavaScript Variablen zuweist, ist grundlegend für das Schreiben von fehlerfreiem JavaScript. Wenn Sie dies nicht verstehen, können Sie leicht Code schreiben, der unbeabsichtigt Werte ändert. JavaScript weist Variablen immer nach Wert zu. Dieser Teil ist jedoch sehr wichtig: Wenn der zugewiesene Wert einer der fünf primitiven Typen von JavaScript ist (dh Boolean, null, undefined, String und Number), wird der tatsächliche Wert zugewiesen. Wenn der zugewiesene Wert jedoch ein Array, eine Funktion oder ein Objekt ist, wird eine Referenz auf das Objekt im Speicher zugewiesen. Beispiel Zeit! Im folgenden Snippet wird var2 gleich var1 gesetzt. Da var1 ein primitiver Typ (String) ist, wird var2 gleich dem String-Wert von var1 gesetzt und kann an dieser Stelle als vollständig verschieden von var1 angesehen werden. Dementsprechend hat die Neuzuweisung von var2 keine Auswirkungen auf var1.
let var1 = 'My string';
let var2 = var1;var2 = 'My new string';console.log(var1);
// 'My string'
console.log(var2);
// 'My new string'
Vergleichen wir dies mit der Objektzuordnung.
let var1 = { name: 'Jim' }
let var2 = var1;var2.name = 'John';console.log(var1);
// { name: 'John' }
console.log(var2);
// { name: 'John' }
Man könnte sehen, wie dies Probleme verursachen kann, wenn Sie ein Verhalten wie eine primitive Zuweisung erwarten! Dies kann besonders hässlich werden, wenn Sie eine Funktion erstellen, die ein Objekt ungewollt mutiert.

2. Verschlüsse

Closure ist ein wichtiges JavaScript-Muster, um privaten Zugriff auf eine Variable zu gewähren. In diesem Beispiel gibt createGreeter eine anonyme Funktion zurück, die Zugriff auf die bereitgestellte Begrüßung "Hallo" hat. Für alle zukünftigen Verwendungszwecke hat sayHello Zugriff auf diese Begrüßung!
function createGreeter(greeting) {
  return function(name) {
    console.log(greeting + ', ' + name);
  }
}const sayHello = createGreeter('Hello');
sayHello('Joe');
// Hello, Joe
In einem realistischeren Szenario könnten Sie sich eine Anfangsfunktion apiConnect (apiKey) vorstellen, die einige Methoden zurückgibt, die den API-Schlüssel verwenden würden. In diesem Fall müsste der apiKey nur einmal und nie wieder bereitgestellt werden.
function apiConnect(apiKey) {
  function get(route) {
    return fetch(`${route}?key=${apiKey}`);
  }  function post(route, params) {
    return fetch(route, {
      method: 'POST',
      body: JSON.stringify(params),
        headers: {
          'Authorization': `Bearer ${apiKey}`
        }
      })
  }  return { get, post }
}const api = apiConnect('my-secret-key');// No need to include the apiKey anymore
api.get('http://www.example.com/get-endpoint');
api.post('http://www.example.com/post-endpoint', { name: 'Joe' });

3. Destrukturierung

Lassen Sie sich von der JavaScript-Parameter-Destrukturierung nicht abschrecken! Es ist eine übliche Methode, Eigenschaften von Objekten sauber zu extrahieren.
const obj = {
  name: 'Joe',
  food: 'cake'
}const { name, food } = obj;console.log(name, food);
// 'Joe' 'cake'
Wenn Sie Eigenschaften unter einem anderen Namen extrahieren möchten, können Sie diese im folgenden Format angeben.
const obj = {
  name: 'Joe',
  food: 'cake'
}const { name: myName, food: myFood } = obj;console.log(myName, myFood);
// 'Joe' 'cake'
Im folgenden Beispiel wird die Destrukturierung verwendet, um das Personenobjekt sauber an die Introducing-Funktion zu übergeben. Mit anderen Worten, Destrukturierung kann (und wird oft) direkt zum Extrahieren von Parametern verwendet, die an eine Funktion übergeben werden. Wenn Sie mit React vertraut sind, haben Sie dies wahrscheinlich schon einmal gesehen!
const person = {
  name: 'Eddie',
  age: 24
}function introduce({ name, age }) {
  console.log(`I'm ${name} and I'm ${age} years old!`);
}console.log(introduce(person));
// "I'm Eddie and I'm 24 years old!"

4. Spread Syntax

Ein JavaScript-Konzept, das Leute abschrecken kann, aber relativ einfach ist, ist der Spread-Operator! Im folgenden Fall kann Math.max nicht auf das Array arr angewendet werden, da kein Array als Argument verwendet wird, sondern die einzelnen Elemente als Argumente. Mit dem Spread-Operator ... werden die einzelnen Elemente aus dem Array gezogen.
const arr = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr);
console.log(max);
// 10

5. Restsyntax

Sprechen wir über die JavaScript-Restsyntax. Sie können es verwenden, um eine beliebige Anzahl von Argumenten, die an eine Funktion übergeben wurden, in ein Array einzufügen!
function myFunc(...args) {
  console.log(args[0] + args[1]);
}myFunc(1, 2, 3, 4);
// 3

6. Array-Methoden

JavaScript-Array-Methoden bieten Ihnen oft unglaubliche, elegante Möglichkeiten, die von Ihnen benötigte Datenumwandlung durchzuführen. Als Mitwirkender von StackOverflow stelle ich häufig Fragen dazu, wie ein Array von Objekten auf die eine oder andere Weise bearbeitet werden kann. Dies ist in der Regel der perfekte Anwendungsfall für Array-Methoden. Ich werde hier eine Reihe verschiedener Array-Methoden behandeln, die nach ähnlichen Methoden organisiert sind, die sich manchmal überschneiden. Diese Liste ist in keiner Weise vollständig: Ich empfehle Ihnen, alle in MDN (meiner bevorzugten JavaScript-Referenz) behandelten Themen zu überprüfen und zu üben .

1. Karte, Filter, Verkleinern

Es gibt einige Verwirrung um die JavaScript-Array-Methoden Karte, Filter, Verkleinern. Dies sind hilfreiche Methoden zum Transformieren eines Arrays oder zum Zurückgeben eines Gesamtwerts. map: gibt ein Array zurück, in dem jedes Element wie von der Funktion angegeben transformiert wird
const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);console.log(mapped);
// [21, 22, 23, 24, 25, 26]
filter: gibt ein Array von Elementen zurück, bei denen die Funktion true zurückgibt
const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);console.log(filtered);
// [2, 4]
Verkleinern: Werte wie in Funktion angegeben akkumulieren
const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);console.log(reduced);
// 21

2. find, findIndex, indexOf

Die Array-Methoden find, findIndex und indexOf können häufig miteinander kombiniert werden. Verwenden Sie sie wie folgt. find : Gibt die erste Instanz zurück, die den angegebenen Kriterien entspricht. Findet keine anderen übereinstimmenden Instanzen.
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 5);console.log(found);
// 6
Beachten Sie erneut, dass, obwohl nach 5 alles den Kriterien entspricht, nur das erste übereinstimmende Element zurückgegeben wird. Dies ist wirklich sehr hilfreich in Situationen, in denen Sie normalerweise eine for-Schleife unterbrechen würden, wenn Sie eine Übereinstimmung finden! findIndex : Dies funktioniert fast identisch bei der Suche, aber anstatt das erste übereinstimmende Element zurückzugeben, wird der Index des ersten übereinstimmenden Elements zurückgegeben. Nehmen Sie das folgende Beispiel, in dem der Übersichtlichkeit halber Namen anstelle von Zahlen verwendet werden.
const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.findIndex(el => el === 'Frank');
console.log(foundIndex);
// 1
indexOf: Funktioniert fast identisch mit findIndex. Statt eine Funktion als Argument zu verwenden, wird ein einfacher Wert verwendet. Sie können dies verwenden, wenn Sie eine einfachere Logik haben und keine Funktion verwenden müssen, um zu überprüfen, ob eine Übereinstimmung vorliegt.
const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.indexOf('Frank');
console.log(foundIndex);
// 1

3. Push, Pop, Shift, Unhift

Es gibt viele großartige Array-Methoden, mit denen Sie gezielt Elemente zu Arrays hinzufügen oder daraus entfernen können. push: Dies ist eine relativ einfache Methode, die ein Element an das Ende eines Arrays anfügt. Das Array wird direkt geändert, und die Funktion selbst gibt das zum Array hinzugefügte Element zurück.
let arr = [1, 2, 3, 4];
const pushed = arr.push(5);console.log(arr);
// [1, 2, 3, 4, 5]
console.log(pushed);
// 5
pop: Entfernt das letzte Element aus einem Array. Auch hier wird das Array geändert. Die Funktion selbst gibt das aus dem Array entfernte Element zurück.
let arr = [1, 2, 3, 4];
const popped = arr.pop();console.log(arr);
// [1, 2, 3]
console.log(popped);
// 4
shift: Entfernt das erste Element aus einem Array. Auch hier wird das Array geändert. Die Funktion selbst gibt das aus dem Array entfernte Element zurück.
let arr = [1, 2, 3, 4];
const shifted = arr.shift();console.log(arr);
// [2, 3, 4]
console.log(shifted);
// 1
Nicht verschieben: Fügt ein oder mehrere Elemente am Anfang eines Arrays hinzu. Auch hier wird das Array geändert. Im Gegensatz zu vielen anderen Methoden gibt die Funktion selbst die neue Länge des Arrays zurück.
let arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);console.log(arr);
// [5, 6, 7, 1, 2, 3, 4]
console.log(unshifted);
// 7

4. splice, slice

Diese Methoden modifizieren oder geben Teilmengen von Arrays zurück. Splice: Ändern Sie den Inhalt eines Arrays, indem Sie vorhandene Elemente entfernen oder ersetzen und / oder neue Elemente hinzufügen. Diese Methode ändert das Array an Ort und Stelle. Das folgende Codebeispiel kann folgendermaßen gelesen werden: Entfernen Sie an Position 1 des Arrays 0 Elemente, und fügen Sie b ein.
let arr = ['a', 'c', 'd', 'e'];
arr.splice(1, 0, 'b')
slice: Gibt eine flache Kopie eines Arrays von einer angegebenen Startposition und vor einer angegebenen Endposition zurück. Wenn keine Endposition angegeben ist, wird der Rest des Arrays zurückgegeben. Wichtig ist, dass bei dieser Methode das Array nicht geändert wird, sondern die gewünschte Teilmenge zurückgegeben wird.
let arr = ['a', 'b', 'c', 'd', 'e'];
const sliced = arr.slice(2, 4);console.log(sliced);
// ['c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd', 'e']

5. sortieren

sort: Sortiert ein Array basierend auf der bereitgestellten Funktion, die ein erstes Element und ein zweites Element als Argument verwendet. Ändert das Array an Ort und Stelle. Wenn die Funktion negativ oder 0 zurückgibt, bleibt die Reihenfolge unverändert. Wenn positiv, wird die Elementreihenfolge umgeschaltet.
let arr = [1, 7, 3, -1, 5, 7, 2];
const sorter = (firstEl, secondEl) => firstEl - secondEl;
arr.sort(sorter);console.log(arr);
// [-1, 1, 2, 3, 5, 7, 7]
Puh, hast du das alles mitbekommen? Ich auch nicht. Tatsächlich musste ich viel auf die MDN-Dokumente verweisen, während ich das schrieb - und das ist in Ordnung! Nur zu wissen, welche Methoden es gibt, bringt Sie zu 95% dorthin.

7. Generatoren

Fürchte dich nicht vor dem *. Die Generatorfunktion gibt an, welcher Wert beim nächsten Aufruf von next () ausgegeben wird. Kann entweder eine endliche Anzahl von Erträgen haben, nach denen next () einen undefinierten Wert zurückgibt, oder eine unendliche Anzahl von Werten, die eine Schleife verwenden.
function* greeter() {
  yield 'Hi';
  yield 'How are you?';
  yield 'Bye';
}const greet = greeter();console.log(greet.next().value);
// 'Hi'
console.log(greet.next().value);
// 'How are you?'
console.log(greet.next().value);
// 'Bye'
console.log(greet.next().value);
// undefined
Und mit einem Generator für unendliche Werte:
   
function* idCreator() {
  let i = 0;
  while (true)
    yield i++;
}const ids = idCreator();console.log(ids.next().value);
// 0
console.log(ids.next().value);
// 1
console.log(ids.next().value);
// 2
// etc...

8. Identitätsoperator (===) vs. Gleichheitsoperator (==)

Stellen Sie sicher, dass Sie den Unterschied zwischen dem Identifizierungsoperator (===) und dem Gleichheitsoperator (==) in JavaScript kennen! Der Operator == führt vor dem Vergleichen von Werten eine Typkonvertierung durch, während der Operator === vor dem Vergleichen keine Typkonvertierung durchführt.
console.log(0 == '0');
// true
console.log(0 === '0');
// false

9. Objektvergleich

Ein Fehler, den JavaScript-Neulinge machen, ist der direkte Vergleich von Objekten. Variablen verweisen auf Verweise auf die Objekte im Speicher, nicht auf die Objekte selbst! Eine Methode, um sie tatsächlich zu vergleichen, besteht darin, die Objekte in JSON-Zeichenfolgen zu konvertieren. Dies hat jedoch einen Nachteil: Die Reihenfolge der Objekteigenschaften kann nicht garantiert werden! Ein sicherer Weg, Objekte zu vergleichen, ist das Abrufen einer Bibliothek, die sich auf den Vergleich tiefer Objekte spezialisiert hat (zB lodashs isEqual ). Die folgenden Objekte sind identisch, verweisen jedoch auf unterschiedliche Verweise.
const joe1 = { name: 'Joe' };
const joe2 = { name: 'Joe' };console.log(joe1 === joe2);
// false
Umgekehrt wird das Folgende als wahr ausgewertet, da ein Objekt dem anderen Objekt gleichgesetzt ist und daher auf dieselbe Referenz verweist (es befindet sich nur ein Objekt im Speicher).
const joe1 = { name: 'Joe' };
const joe2 = joe1;
console.log(joe1 === joe2);
// true
Lesen Sie unbedingt den obigen Abschnitt Wert vs. Referenz, um die Auswirkungen des Einstellens einer Variablen gleich einer anderen Variablen zu verstehen, die auf einen Verweis auf ein Objekt im Speicher verweist!

10. Rückruffunktionen

Viel zu viele Menschen lassen sich von JavaScript-Callback-Funktionen einschüchtern! Sie sind einfach, nehmen Sie dieses Beispiel. Die console.log-Funktion wird als Rückruf an myFunc übergeben. Es wird ausgeführt, wenn setTimeout abgeschlossen ist. Das ist alles dazu!
function myFunc(text, callback) {
  setTimeout(function() {
    callback(text);
  }, 2000);
}myFunc('Hello world!', console.log);
// 'Hello world!'

11. Versprechen

Sobald Sie JavaScript-Rückrufe verstanden haben, befinden Sie sich bald in der verschachtelten „Rückruf-Hölle“. Hier helfen Versprechen! Wickeln Sie Ihre asynchrone Logik in ein Versprechen ein und entscheiden Sie über Erfolg oder lehnen Sie bei Fehlschlag ab. Verwenden Sie "dann", um mit Erfolg umzugehen, und "fangen", um mit Fehlern umzugehen.
const myPromise = new Promise(function(res, rej) {
  setTimeout(function(){
    if (Math.random() < 0.9) {
      return res('Hooray!');
    }
    return rej('Oh no!');
  }, 1000);
});myPromise
  .then(function(data) {
    console.log('Success: ' + data);
   })
   .catch(function(err) {
    console.log('Error: ' + err);
   });
   
// If Math.random() returns less than 0.9 the following is logged:
// "Success: Hooray!"
// If Math.random() returns 0.9 or greater the following is logged:
// "Error: On no!"

12. Async Await

Sobald Sie den Dreh von JavaScript-Versprechungen verstanden haben, könnten Sie Async-Warten mögen, das ist nur „syntaktischer Zucker“ zusätzlich zu Versprechungen. Im folgenden Beispiel erstellen wir eine asynchrone Funktion und warten darin auf das Begrüßungsversprechen.
const greeter = new Promise((res, rej) => {
  setTimeout(() => res('Hello world!'), 2000);
})async function myFunc() {
  const greeting = await greeter;
  console.log(greeting);
}myFunc();
// 'Hello world!'
Fazit Wenn Sie keines dieser 12 Konzepte kannten, haben Sie wahrscheinlich zumindest ein wenig an JavaScript-Kenntnissen zugelegt! Und wenn Sie sie alle gekannt haben, dann war dies hoffentlich eine Gelegenheit, Ihr Wissen zu üben und zu erweitern. Welche anderen Konzepte halten Sie für kritisch? Lass es mich in den Kommentaren wissen.

Deprecated: Directive 'allow_url_include' is deprecated in Unknown on line 0