12 nützliche Array-Tricks in JavaScript

Arrays sind eines der häufigsten Konzepte in Javascript. Sie bieten uns viele Möglichkeiten zur Datenverarbeitung. Es ist notwendig, mit einigen gängigen Array-Operationen vertraut zu sein.

Array-Deduplizierung

1. from() überlagert die neue Set()-Methode

Um Duplikate aus einem String oder einem numerischen Array zu entfernen, können Sie die From-Methode direkt verwenden.

var plants = ['Saturn', 'Erde', 'Uranus', 'Merkur', 'Venus', 'Erde', 'Mars', 'Jupiter'];
var uniquePlants = Array.from(neues Set(Pflanzen)); 
console.log(uniquePlants); // [ 'Saturn', 'Erde', 'Uranus', 'Merkur', 'Venus', 'Mars', 'Jupiter' ]

2. Spread-Operator (…)

Der Spread-Operator ist eine wichtige Neuerung von ES6 und verfügt über viele leistungsstarke Funktionen.

var plants = ['Saturn', 'Erde', 'Uranus', 'Merkur', 'Venus', 'Erde', 'Mars', 'Jupiter'];
var uniquePlants = [...neues Set(Pflanzen)]; 
console.log(uniquePlants); // [ 'Saturn', 'Erde', 'Uranus', 'Merkur', 'Venus', 'Mars', 'Jupiter' ]

Ersetzen bestimmter Werte in einem Array

Die Methode splice() fügt Elemente zu einem Array hinzu oder entfernt sie daraus und gibt die entfernten Elemente zurück. Diese Methode mutiert das ursprüngliche Array. Achten Sie besonders darauf, wo Sie die Werte einfügen!

// arrayObject.splice(index, wieviele, Element1,....., ElementX)

var Pflanzen = ['Saturn', 'Uranus', 'Merkur', 'Venus', 'Erde', 'Mars', 'Jupiter'];
var Ergebnis = Pflanzen.splice(2, 1, 'www.shanzhonglei.com')
console.log(Pflanzen); // ['Saturn','Uranus','www.shanzhonglei.com','Merkur','Venus','Erde','Mars','Jupiter']
console.log(Ergebnis); // ['Mercury']

Mapping von Arrays ohne map()

Lassen Sie uns zunächst die Map-Methode vorstellen. Die Methode map() gibt ein neues Array zurück. Die Elemente im Array sind die Werte der ursprünglichen Array-Elemente nach dem Aufruf der Funktion. Sie verarbeitet die Elemente in der Reihenfolge der ursprünglichen Array-Elemente. Hinweis: map() verändert das ursprüngliche Array nicht und führt keine Erkennung leerer Arrays durch.

Lassen Sie uns ein Array-Mapping ohne Map implementieren:

// array.map(Funktion(aktuellerWert,Index,arr), dieserWert)

var Pflanzen = [
    { name: "Saturn" },
    { name: "Uranus" },
    { Name: "Merkur" },
    { name: "Venus" },
]
var PflanzenName = Array.from(Pflanzen, ({ Name }) => Name);
console.log(Pflanzenname); // [ 'Saturn', 'Uranus', 'Merkur', 'Venus' ]

Leeres Array

Wenn Sie ein Array löschen möchten, setzen Sie die Länge des Arrays einfach auf 0. Das ist ziemlich einfach.

var plants = ['Saturn', 'Erde', 'Uranus', 'Merkur', 'Venus', 'Erde', 'Mars', 'Jupiter'];
Pflanzen.Länge = 0;
console.log(Pflanzen); // []

Konvertieren eines Arrays in ein Objekt

Wenn Sie ein Array in ein Objekt konvertieren möchten, geht das am schnellsten mit dem Spread-Operator (...).

var plants = ['Saturn', 'Erde', 'Uranus', 'Merkur', 'Venus', 'Erde', 'Mars', 'Jupiter'];
var PflanzenObj = { ... Pflanzen }
console.log(plantsObj); // {'0': 'Saturn','1': 'Erde', '2': 'Uranus','3': 'Merkur','4': 'Venus','5': 'Erde','6': 'Mars','7': 'Jupiter'}

Füllen eines Arrays mit Daten

Wenn wir das Array mit Daten füllen müssen oder Daten mit demselben Wert benötigen, können wir die Methode fill() verwenden.

var Pflanzen = neues Array(8).fill('8');
console.log(Pflanzen); // ['8', '8', '8', '8', '8', '8', '8', '8']

Arrays zusammenführen

Natürlich werden Sie an die Methode concat() denken, aber oh, der Spread-Operator (...) ist auch sehr lecker, was eine weitere Anwendung des Spread-Operators ist.

var plants1 = ['Saturn', 'Erde', 'Uranus', 'Merkur'];
var plants2 = ['Venus', 'Erde', 'Mars', 'Jupiter'];
console.log([...Pflanzen1, ...Pflanzen2]); // ['Saturn', 'Erde','Uranus', 'Merkur','Venus', 'Erde','Mars', 'Jupiter']

Schnittmenge zweier Arrays

Um die Schnittmenge zweier Arrays zu finden, stellen Sie zunächst sicher, dass die Arrays keine Duplikate enthalten, und verwenden Sie dann die Methoden „filter()“ und „includes()“.

var plants1 = ['Saturn', 'Erde', 'Uranus', 'Merkur', 'Venus', 'Erde', 'Mars', 'Jupiter'];
var Pflanzen2 = ['Saturn', 'Erde', 'Uranus'];
var alonePlants = [...neues Set(Pflanzen1)].filter(Element => Pflanzen2.includes(Element));
console.log(alonePlants); // [ 'Saturn', 'Erde', 'Uranus' ]

Falsche Werte aus einem Array entfernen

Bei der Datenverarbeitung müssen wir häufig falsche Werte entfernen. In JavaScript sind falsche Werte false, 0, " ", null, NaN und undefiniert.

var plants = ['Saturn', 'Erde', null, undefiniert, falsch, "", NaN, 'Uranus', 'Merkur', 'Venus', 'Erde', 'Mars', 'Jupiter'];
var trueArr = Pflanzen.Filter(Boolean);
console.log(trueArr); // ['Saturn', 'Erde', 'Uranus', 'Merkur', 'Venus', 'Erde', 'Mars', 'Jupiter']

Einen zufälligen Wert aus einem Array abrufen

Wir können eine zufällige Indexnummer basierend auf der Array-Länge erhalten.

var plants = ['Saturn', 'Erde', 'Uranus', 'Merkur', 'Venus', 'Erde', 'Mars', 'Jupiter'];
Konsole.log(Pflanzen[Math.Boden(Math.random() * (Pflanzen.Länge + 1))])

lastIndexOf() Methode

lastIndexOf() kann uns helfen, den Index des letzten Vorkommens eines Elements zu finden.

// array.reduce(Funktion(Gesamt, aktuellerWert, aktuellerIndex, arr), Anfangswert)

Variablennummern = [1, 2, 3, 4, 5];
var Summe = Nums.Reduce((x, y) => x + y);
console.log(Summe); // 15

Fügen Sie alle Werte in einem Array hinzu

Die Methode „reduce()“ erhält eine Funktion als Akkumulator und jeder Wert im Array (von links nach rechts) wird auf einen einzelnen Wert reduziert.

// array.reduce(Funktion(Gesamt, aktuellerWert, aktuellerIndex, arr), Anfangswert)

Variablennummern = [1, 2, 3, 4, 5];
var Summe = Nums.Reduce((x, y) => x + y);
console.log(Summe); // 15

Damit ist dieser Artikel über 12 nützliche Array-Techniken in JavaScript abgeschlossen. Weitere relevante Inhalte zu JavaScript-Arrays finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!