Das JavaScript-Code-Snippet für häufige Probleme

Zuletzt aktualisiert am 27. Juli 2021

Jede Programmiersprache hat ihre Schwächen und Macken. Die JavaScript-Sprache und sogar das verwendete JavaScript-Code-Snippet ist keine Ausnahme. Die Skriptsprache hat sich in den letzten Jahren seltsam verhalten, ist aber heute eine der am weitesten verbreiteten Sprachen. Zum größten Teil liegt es daran, dass es die primäre interaktive Sprache von Internetbrowsern ist.

Es gibt Zeiten, in denen wir als Programmierer und Codierer sich wiederholende, einfache Aufgabenprobleme haben, für die wir einfache Codeschnipsel benötigen. In diesem Blog werde ich einige häufige Probleme vorstellen, die mit ES6-Skripting als Teil einiger JavaScript-Codeausschnitte leicht gelöst werden können.

JavaScript-Code-Snippet-Tipp: Verwenden Sie „let“ anstelle von „var“

let ist wie var , aber let hat einen Gültigkeitsbereich. let ist nur auf der Ebene des Blockbereichs zugänglich, auf der es deklariert und einem Wert zugewiesen wurde. var ist in Bezug auf den definierten Blockbereich auf jeder Ebene zugänglich. Im folgenden Beispiel wird die Variable „num1“ in einer If -Anweisung definiert und ist daher außerhalb der Funktion nicht zugänglich.

 Wenn wahr) {
  sei num1 = 40;
}

sei num2 = 20;

console.log (num2, num1);
console.log(num1);

Ausgabe:
20
nicht definiert

 sei a = 25;
sei b = 50;

Wenn wahr) {
  sei a = 100;
  Var c = 5;
  Konsole.log (a/c);
  Konsole.log (b/c);
}

Konsole.log(c);
Konsole.log(a);

Ausgabe:
20
10
5
25

Verwenden Sie „const“, wenn sich ein Variablenwert nicht ändert

const weist einer Variablen, die nicht geändert werden kann, einen konstanten Wert zu. Immer wenn eine const-Variable definiert wird, referenziert JavaScript die Adresse des Werts auf die Variable.

Die Pfeilfunktion des JavaScript-Codeausschnitts, eine neue Syntax für Funktionen

Die Funktionen der JavaScript-Code-Snippets in ES6 wurden in einen einfacheren Ausdruck „() => {}“ geändert.

 // Alte Syntax
Funktion meinHallo() {
  console.log("Hallo Welt..!");
}

// Neue Syntax
var meinHallo = () => {
  console.log("Hallo Welt..!");
}

Die neue Syntax kann anfangs etwas verwirrend sein. Es gibt zwei Teile der Syntax.

 var meinHallo = ()

Der erste Teil des JavaScript Code Snippets deklariert eine Variable und weist ihr die Funktion () zu. Es sagt nur, dass die Variable eine Funktion ist.

 => { // etwas tun } 

Der zweite Teil deklariert den Körperteil der Funktion. Der Pfeilteil mit den geschweiften Klammern definiert den Körperteil.

Andere Beispiele, aber mit Parametern.

 let withParameters = (a, b) => {
  Konsole.log(a+b);
}

mit Parametern (10, 20);

Ausgabe:
30

 sei sumOfNum = (a, b = 10) => {
  gib a + b zurück;
}

console.log(sumOfNum(20);
console.log(sumOfNum(20,30);

Ausgabe:
30
50

Neu' für ... von ...' Schleife

for…of ist for…in mit leichten Modifikationen sehr ähnlich. for…of durchläuft eine Liste von Elementen wie ein Array und gibt die Elemente (nicht ihren Index) einzeln zurück. Beachten Sie, dass die Variable 'num' jedes Element im Array ausgibt, nicht den Index.

 Lassen Sie Zahlen = [5,6,7,8];

for (lass Anzahl Zahlen) {
  console.log (Wert);
}

Ausgabe:
5
6
7
8

 let str = 'Arturo';

for (let char of str) {
  console.log(char);
}

Ausgabe:
EIN
r
t
u
r
Ö

Variablenzuweisung zerstören

Variablen aus einem Array einzeln zuzuweisen ist zeitaufwändig und albern. Verwenden Sie einfach die Destruktorzuweisung, um dies schneller und einfacher zu erreichen:

 let profile = ['John', 32, 'Ingenieur'];

let [Name, Alter, Job] = Profil;

console.log (Name);

Ausgabe:
John

Suchen Sie ein bestimmtes Objekt in einem Array von Objekten

Eine der häufigsten Aufgaben, die Sie in JavaScript ausführen müssten, ist das Durchlaufen eines Arrays von Objekten, um ein bestimmtes Objekt zu finden. Die Find-Methode ist hier eine einfache Lösung. Sie fügen einfach die Auswahlkriterien mit einer anonymen Funktion als Argument ein und schon sind Sie fertig:

 Personal lassen = [
  { ID: 0, Name: 'Nina' },
  { ID: 1, Name: 'Kevin' },
  { ID: 2, Name: 'John' }
]

let employee = staff.find(emp => emp.name === 'John');

Konsole.log (Client);

Ausgabe:
{ ID: 2, Name: 'John' }

Schleifen über ein Objekt Schlüssel und Werte

Unsere Datenstruktur kann ein komplexes Objekt sein, das verschiedene Schlüssel/Wert-Paare enthält. Das Iterieren jedes Paars könnte etwas seltsam sein, aber es ist einfach, sobald wir die Funktion von Object verwenden.

Nachdem die Schlüssel des Objekts erfasst wurden, können wir die Schlüssel und Werte gleichzeitig durchlaufen. In der folgenden Lösung greifen wir während der Schleife über die Schlüssel- und Wertvariablen auf jedes Paar zu.

 let myObject = { Peter: 15, John: 20, Anne: 35 };

Object.keys(myObject).forEach((Schlüssel, Wert) => {
  //...etwas tun
  console.log (Schlüssel, Wert);
});

Ausgabe:
Peter 15
Johannes 20
Anna 35

Filtern Sie ein Array von Objekten basierend auf einer Bedingung

Manchmal haben wir eine große Anzahl von Daten, die wir Elemente basierend auf einer bestimmten Bedingung herausfiltern möchten. Wir können eine Filterfunktion verwenden, um dies zu erreichen. Die folgende Lösung hat ein Array von Dateipfaden. Einige Dateien befinden sich im Verzeichnis „data1“, andere im Verzeichnis „data2“. Nehmen wir an, wir möchten nur nach einem bestimmten Verzeichnis filtern:

 Standort lassen = [
  "Dateien/Daten1/Datei",
  "Dateien/Daten1/Datei2",
  "Dateien/Daten2/Datei",
  "Dateien/Daten2/Datei2"
];

let filter = location.filter(path => path.includes('data2'));

Konsole.log (Filter);

Ausgabe:
[ 'Dateien/Verz2/Datei', 'Dateien/Verz2/Datei2' ]

Indem wir angeben, dass der Pfad-String den String „data2“ enthalten muss, filtern wir alle Pfade heraus, die „data2“ nicht enthalten. Denken Sie daran, dass jede Funktion, die Sie an filter übergeben, true zurückgeben muss, damit das Element in das Ergebnis aufgenommen wird.

Schlüssel einem gleichnamigen Objekt zuweisen

Wenn Sie einem Objekt Schlüssel zuweisen, wenn der Schlüssel denselben Namen hat wie die Variable, die den Wert enthält, den Sie zuweisen möchten, können Sie die Wertzuweisung ganz weglassen. Dies verhindert, dass Sie sich wiederholen müssen, was wir alle hassen. Schauen Sie sich dieses Beispiel an:

 let name = 'John';
lass Alter = 32;
let job = 'Ingenieur';

// an Stelle von
let profile1 = { Name: Name, Alter: Alter, Job: Job };

// mach das
let profile2 = { Name, Alter, Job };

Konsole.log (Profil2);

Ausgabe:
{ Name: 'John', Alter: 32, Beruf: 'Ingenieur' }

Verwenden des ES6-Spread-Operators „…“

Mit dem Spread-Operator können Sie ein Array buchstäblich „ausbreiten“. Dies kann verwendet werden, um ein Array in eine Liste von Argumenten umzuwandeln oder sogar zwei Arrays zu kombinieren. Sie können es auch verwenden, um eine Liste von Argumenten für eine Funktion zu erstellen.

Im ersten Beispiel zeigen wir, wie der Spread-Operator auf einem Array arbeitet und jedes Element in ein einzelnes Element verwandelt.

 Lassen Sie Zahlen1 = [1,2,3,4,5];

console.log (... zahlen1);

Ausgabe:
1 2 3 4 5

Das zweite Beispiel kombiniert die Inhalte zweier Arrays, indem es ein neues temporäres Array erstellt, das beide Inhalte enthält.

 Lassen Sie Zahlen2 = [6,7,8,9,10];

lass kombiniert = [...zahlen1, ...zahlen2];

console.log (... kombiniert);

Ausgabe:
1 2 3 4 5 6 7 8 9 10

Das letzte Beispiel veranschaulicht, wie der Spread-Operator ein Array in eine Liste von Argumenten für eine Funktion umwandeln kann. Math.max gibt die höchste Zahl in einer Liste von übergebenen Argumenten zurück. Eines dieser Argumente war 10, was das höchste ist.

 Lassen Sie Zahlen1 = [1,2,3,4,5];

Lassen Sie Zahlen2 = [6,7,8,9,10];

lass kombiniert = [...zahlen1, ...zahlen2];

console.log(Math.max(...combined));

Ausgabe:
10

Neue Getter- und Setter-Funktionen

Getter und Setter sind eine der nützlichen Funktionen, die in ES6 eingeführt wurden. Es ist praktisch, wenn wir Klassen in JavaScript verwenden.

 Klasse Personenname {
  Konstruktor (Name) {
    this.name = Name;
  }
  Namen abrufen () {
    gib this.name zurück;
  }
  setze Name(name) {
    this.name = Name;
  }
}

let person = new PersonName("Jon Snow");
console.log(person.Name); // (A)

person.Name = "Dany"; // (B)
console.log(person.Name);

Ausgabe:
Jon Schnee
Daniel

Wir können sehen, dass es zwei Funktionen innerhalb der Klasse PersonName mit den Eigenschaften „get“ und „set“ gibt. Die Eigenschaft „get“ wird verwendet, um den Wert der Variablen zu erhalten, und die Eigenschaft „set“ wird verwendet, um den Wert auf die Variable zu setzen. Wir können auch sehen, dass die Funktion get Name (A) ohne Klammern aufgerufen wird und die Funktion set Name (B) ohne Klammern aufgerufen wird, und es ist genau so, als würde man der Variablen einen Wert zuweisen.