Arrays sind eine der beliebtesten Datenstrukturen in JavaScript, da sie zum Speichern von Daten verwendet werden. Darüber hinaus bieten Arrays viele Möglichkeiten, mit genau diesen Daten zu arbeiten. In diesem Artikel möchte ich Ihnen einige nützliche Tricks vorstellen, von denen Sie vielleicht noch nichts wissen. Fangen wir an.
1. So belassen Sie nur eindeutige Werte im Array
Dies ist eine sehr beliebte Frage während eines Interviews für die Position eines Javascript-Entwicklers. Hier finden Sie eine schnelle und einfache Lösung für dieses Problem. Zuerst müssen Sie die eindeutigen Werte des Arrays
abrufen. Hierzu können Sie
new Set() (
ca. Betreff: In der Set-Datenstruktur werden nur eindeutige Werte gespeichert ). Als Nächstes müssen Sie die Set-Datenstruktur in ein Array konvertieren. Ich möchte Ihnen zwei Möglichkeiten vorstellen, wie Sie dies tun können: die erste mit der
from() -Methode und die zweite mit dem spread (
"…" ) -Operator.
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple'];
Einfach, richtig?
2. So ersetzen Sie Werte in einem Array
Es gibt Situationen, in denen Sie die Werte im Array durch andere Werte ersetzen müssen. Zu diesem Zweck gibt es eine gute Methode, über die Sie möglicherweise nichts wissen - die
splice(start, value to remove, values to add) Methode
splice(start, value to remove, values to add) , wobei
start die Indexnummer ist, aus der die Elemente des Arrays entfernt werden sollen,
value to remove die Anzahl der Elemente Zu löschende und
values to add sind die Elemente, die anstelle der gelöschten Elemente eingefügt werden sollen:
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; fruits.splice(0, 2, 'potato', 'tomato'); console.log(fruits);
3. So transformieren Sie ein Array ohne die map() -Methode
Wahrscheinlich kennt jeder die Array-Methode
map() , aber es gibt eine andere Lösung, mit der Sie einen ähnlichen Effekt erzielen und Code bereinigen können. Dazu können wir die
from() -Methode verwenden:
const friends = [ { name: 'John', age: 22 }, { name: 'Peter', age: 23 }, { name: 'Mark', age: 24 }, { name: 'Maria', age: 22 }, { name: 'Monica', age: 21 }, { name: 'Martha', age: 19 }, ] const friendsNames = Array.from(friends, ({name}) => name); console.log(friendsNames);
4. So löschen Sie schnell ein Array
Zum Beispiel haben wir ein Array, in dem es viele Elemente gibt. Wir müssen es bereinigen (egal zu welchem Zweck), während wir nicht einzelne Elemente löschen möchten. Dies ist sehr einfach mit einer Codezeile zu tun. Um das Array zu löschen, müssen Sie die Länge des Arrays auf 0 setzen.
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; fruits.length = 0; console.log(fruits);
5. So konvertieren Sie ein Array in ein Objekt
Diese Situation passiert: Wir haben ein Array, aber wir brauchen ein Objekt (auch hier, egal zu welchem Zweck) mit diesen Daten, und die schnellste Möglichkeit, ein Array in ein Objekt zu konvertieren, ist die Verwendung des Spread-Operators (
"..." ):
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; const fruitsObj = { ...fruits }; console.log(fruitsObj);
6. So füllen Sie ein Array mit denselben Werten
Es gibt verschiedene Situationen, in denen wir ein Array erstellen und mit einigen Werten füllen möchten, oder wir benötigen ein Array mit denselben Werten. Die
fill() -Methode für solche Aufgaben ist eine großartige Lösung:
const newArray = new Array(10).fill('1'); console.log(newArray);
7. So kombinieren Sie mehr als zwei Arrays
Wissen Sie, wie Sie Arrays ohne die
concat() -Methode zu einem kombinieren können? Es gibt eine einfache Möglichkeit, eine beliebige Anzahl von Arrays in einem Array mit einer Codezeile zu kombinieren. Wie Sie wahrscheinlich bereits verstanden haben, ist der Operator spread (
"..." ) ein ziemlich nützliches Werkzeug, wenn Sie mit Arrays arbeiten, wie in diesem Fall:
const fruits = ['apple', 'banana', 'orange']; const meat = ['poultry', 'beef', 'fish']; const vegetables = ['potato', 'tomato', 'cucumber']; const food = [...fruits, ...meat, ...vegetables]; console.log(food);
8. Wie finde ich den Schnittpunkt zweier Arrays?
Sie können sich dieser Aufgabe in jedem JavaScript-Interview stellen, da die Lösung Ihr Wissen über Array-Methoden sowie Ihre Denkweise zeigt. Um die gemeinsamen Werte der beiden Arrays zu ermitteln, verwenden wir eine der zuvor in diesem Artikel beschriebenen Methoden, um sicherzustellen, dass die Werte in dem Array, das wir überprüfen, nicht dupliziert werden. Darüber hinaus verwenden wir die
filter() und
includes() -Methoden. Als Ergebnis erhalten wir ein Array mit Elementen, die in beiden Arrays dargestellt werden:
const numOne = [0, 2, 4, 6, 8, 8]; const numTwo = [1, 2, 3, 4, 5, 6]; const duplicatedValues = [...new Set(numOne)].filter(item => numTwo.includes(item)); console.log(duplicatedValues);
9. So entfernen Sie falsche Werte aus einem Array
Definieren Sie zunächst falsche Werte. In Javascript sind die falschen Werte:
false ,
0 ,
"" ,
null ,
NaN und
undefined . Jetzt können wir herausfinden, wie wir solche Werte aus unserem Array entfernen können. Um dies zu erreichen, benötigen wir die
filter() -Methode:
const mixedArr = [0, 'blue', '', NaN, 9, true, undefined, 'white', false]; const trueArr = mixedArr.filter(Boolean); console.log(trueArr);
10. So erhalten Sie einen zufälligen Array-Wert
Manchmal müssen wir einen zufälligen Array-Wert auswählen. Um die Lösung einfach, kurz und schnell zu gestalten, können wir eine zufällige Indexnummer entsprechend der Länge des Arrays erhalten. Schauen Sie sich dieses Beispiel an:
const colors = ['blue', 'white', 'green', 'navy', 'pink', 'purple', 'orange', 'yellow', 'black', 'brown']; const randomColor = colors[(Math.floor(Math.random() * (colors.length)))]; console.log(randomColor);
11. So erweitern Sie das Array in die entgegengesetzte Richtung
Wenn wir unser Array "spiegeln" müssen, müssen wir es nicht durch komplexe Schleifen und Funktionen erzeugen, da es eine einfache
reverse() Array-Methode gibt, die all dies für uns erledigt, und mit einer Codezeile können wir unser Array "spiegeln":
const colors = ['blue', 'white', 'green', 'navy', 'pink', 'purple', 'orange', 'yellow', 'black', 'brown']; const reversedColors = colors.reverse(); console.log(reversedColors);
12. lastIndexOf() -Methode
JavaScript verfügt über eine interessante
lastIndexOf(elem) -Methode, mit der Sie den Index des letzten Vorkommens eines
elem Elements ermitteln können. Wenn unser Array beispielsweise doppelte Werte enthält, können wir die Position des letzten Vorkommens darin ermitteln. Sehen Sie sich das folgende Codebeispiel an:
const nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7]; const lastIndex = nums.lastIndexOf(5); console.log(lastIndex);
13. Wie man alle Werte in einem Array summiert
Eine weitere beliebte Frage während eines Interviews für eine JavaScript-Entwicklerposition. Die Summe aller Elemente finden Sie in einer Codezeile, wenn Sie die Methode
reduce() :
const nums = [1, 5, 2, 6]; const sum = nums.reduce((x, y) => x + y); console.log(sum);
Fazit
In diesem Artikel habe ich Ihnen 13 nützliche Tricks vorgestellt, mit denen Sie sauberen und präzisen Code schreiben können. Vergessen Sie außerdem nicht, dass es viele verschiedene Tricks gibt, die Sie in Javascript verwenden können und die es wert sind, nicht nur für die Arbeit mit Arrays, sondern auch für andere Datenstrukturen studiert zu werden. Ich hoffe, dass Ihnen die im Artikel vorgestellten Lösungen gefallen haben und Sie sie zur Verbesserung des Entwicklungsprozesses verwenden werden.
Habt einen schönen Schreibcode!