Heim > Web-Frontend > js-Tutorial > Hauptteil

Es gibt die Möglichkeit, Arrays in JavaScript zu zerstören und dafür zu sorgen, dass Ihr Code sauber aussieht

王林
Freigeben: 2024-08-12 18:37:12
Original
620 Leute haben es durchsucht

ays to Destructure Array in JavaScript & make your code look clean

Hallooooooooo! ?

Ich hoffe, es geht dir großartig! Das ist SMY! ? Heute tauchen wir in die coole JavaScript-Magie mit Array-Destrukturierung ein! ?


? Inhalt:

  • ⚡ Warte was?

  • ⚡ Aber warum?

  • ⚡ Aber wie?

  • 1️⃣ Arrays chronologisch destrukturieren

  • 2️⃣ Arrays nach Index destrukturieren

  • 3️⃣ Arrays innerhalb von Objekten zerstören

  • 4️⃣ Arrays mit dynamischen Indizes destrukturieren


⚡ Warte was?

Array-Destrukturierung ist eine nette Funktion in JavaScript, die es Ihnen ermöglicht, Werte aus Arrays (oder Eigenschaften von Objekten) in verschiedene Variablen zu extrahieren. Es geht nicht nur darum, Ihren Code cool aussehen zu lassen – es geht darum, saubereren, besser lesbaren Code zu schreiben. Lassen Sie uns aufschlüsseln, wie Sie Arrays auf unterschiedliche Weise zerstören können!

⚡ Aber warum?

Durch die Destrukturierung wird Ihr Code prägnanter und ausdrucksvoller. Anstatt über ihre Indizes auf Array-Elemente zuzugreifen, können Sie die Werte direkt in Variablen extrahieren. Dies kann Ihren Code vereinfachen, Fehler reduzieren und ihn verständlicher machen.

⚡ Aber wie?

Lassen Sie uns anhand einiger Beispiele jede Methode der Array-Destrukturierung durchgehen!


1️⃣ Arrays chronologisch zerstören

Dies ist der einfachste Weg, Arrays zu zerstören. Sie ordnen Variablen den Array-Elementen in der Reihenfolge zu, in der sie erscheinen.

const fruits = ['apple', 'mango', 'banana'];
const [apple, mango, banana] = fruits;

console.log(apple); // apple
console.log(mango); // mango
console.log(banana); // banana
Nach dem Login kopieren

So funktioniert es:

  • Das Obst-Array enthält drei Elemente.

  • Mit [Apfel, Mango, Banane] zerlegen wir das Array in der gleichen Reihenfolge in drei Variablen, die jeweils einem Element im Array entsprechen.


2️⃣ Arrays nach Index destrukturieren

In JavaScript können Sie Arrays nicht direkt nach Index innerhalb des Array-Literals selbst zerlegen, aber Sie können mit einer kleinen Problemumgehung mithilfe von Object.entries oder durch manuelles Festlegen von Werten ähnliche Ergebnisse erzielen.

const fruits = ['apple', 'mango', 'banana'];
const {0: apple, 1: mango, 2: banana} = fruits;

console.log(apple); // apple
console.log(mango); // mango
console.log(banana); // banana
Nach dem Login kopieren

So funktioniert es:

  • Hier verwenden wir eine Syntax, die die Destrukturierung nachahmt, indem Array-Indizes als Schlüssel behandelt werden. Dies ist eher eine Problemumgehung, da die Destrukturierung durch Indizes nicht direkt unterstützt wird, aber die Idee besteht darin, Array-Elemente über Indizes an Variablen auszurichten.

3️⃣ Arrays innerhalb von Objekten zerstören

Sie können auch Arrays zerstören, die in Objekten verschachtelt sind. Dadurch können Sie bestimmte Elemente in verschachtelten Strukturen gezielt ansprechen.

const fruitsPerSeason = {
  summer: ['grapes', 'pineapple'],
  winter: ['kiwis', 'oranges']
};

const { summer: [grape, pineapple], winter: [kiwi, orange] } = fruitsPerSeason;

console.log(grape); // grapes
console.log(pineapple); // pineapple
console.log(kiwi); // kiwis
console.log(orange); // oranges
Nach dem Login kopieren

So funktioniert es:

  • fruitsPerSeason ist ein Objekt, bei dem jede Eigenschaft ein Array ist.

  • Durch die Destrukturierung innerhalb des Objekts extrahieren wir bestimmte Elemente aus diesen Arrays in unterschiedliche Variablen.


4️⃣ Arrays mit dynamischen Indizes zerstören

Für einen dynamischeren Ansatz können Sie die Destrukturierung mit Variablen kombinieren, die Indizes enthalten.

const fruitsPerSeason = {
  summer: ['pineapple', 'grapes'],
  winter: ['kiwis', 'oranges']
};

const pineappleIdx = 0, kiwisIdx = 0;
const { summer: [_, pineapple], winter: [_, kiwis] } = fruitsPerSeason;

console.log(pineapple); // pineapple
console.log(kiwis); // kiwis
Nach dem Login kopieren

So funktioniert es:

  • Hier verwenden wir _ als Platzhalter, um die ersten Elemente zu ignorieren und nur die Elemente zu destrukturieren, die wir basierend auf dynamischen Indizes benötigen (obwohl Indizes selbst in diesem Beispiel nicht dynamisch verwendet werden).

Zusammenfassung:

Die Destrukturierung von Arrays kann Ihren JavaScript-Code rationalisieren und ihn sauberer und ausdrucksvoller machen. Unabhängig davon, ob Sie Werte chronologisch extrahieren, auf bestimmte Indizes abzielen oder innerhalb von Objekten arbeiten, helfen Ihnen diese Techniken dabei, Arrays effizienter zu handhaben.

Das ist es, Leute! Ich hoffe, Sie fanden diese Aufschlüsselung der Array-Destrukturierung hilfreich und aufschlussreich. ?

Folgen Sie mir gerne auf GitHub und LinkedIn für weitere JavaScript-Tipps und Tricks!

GitHub

LinkedIn


Bleiben Sie großartig und viel Spaß beim Programmieren! ✨

Das obige ist der detaillierte Inhalt vonEs gibt die Möglichkeit, Arrays in JavaScript zu zerstören und dafür zu sorgen, dass Ihr Code sauber aussieht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!