Die Autorin des Artikels, dessen Übersetzung wir heute veröffentlichen, sagt, dass eine der Ausgaben des
Syntax FM- Podcasts, die einen Überblick über nützliche Methoden von Objekten und Arrays in JavaScript gab, ihre Idee angeregt hat. Diese Methoden helfen Entwicklern, sauberen, lesbaren Code zu schreiben. Ihre Verwendung reduziert den Bedarf an Bibliotheken von
Drittanbietern wie
Lodash .
Array.prototype.filter ()
Die Methode
Array.prototype.filter () erstellt ein neues Array, in das nur die Elemente des ursprünglichen Arrays fallen, die der angegebenen Bedingung entsprechen.
▍ Beispiel
Auf der Grundlage eines Arrays mit Informationen zu Schülern erstellen wir ein neues Array, in das nur Aufzeichnungen über diejenigen Schüler aufgenommen werden, deren Alter es ihnen ermöglicht, Alkohol zu kaufen.
const studentsAge = [17, 16, 18, 19, 21, 17]; const ableToDrink = studentsAge.filter( age => age > 18 );
Array.prototype.map ()
Mit der Methode
Array.prototype.map () können Sie ein neues Array erstellen, das auf irgendwie verarbeiteten Werten eines anderen Arrays basiert. Diese Methode eignet sich hervorragend zum Ändern von Daten. Da sie keine Änderungen am ursprünglichen Array vornimmt, wird sie häufig in React verwendet.
▍ Beispiel
Erstellen Sie basierend auf dem Zahlenarray ein neues Array, an dessen Anfang jedes Element das
$ -Zeichen steht.
const numbers = [2, 3, 4, 5]; const dollars = numbers.map( number => '$' + number); // dollars: ['$2', '$3', '$4', '$5']
Array.prototype.reduce ()
Die Methode
Array.prototype.reduce () wird häufig zu Unrecht übersehen. Sie können das Array auf einen einzelnen Wert reduzieren, der sich im Empfängerelement ansammelt. Der von dieser Methode zurückgegebene Wert kann von einem beliebigen Typ sein. Beispielsweise kann es sich um ein Objekt, ein Array, eine Zeichenfolge oder eine Zahl handeln.
▍ Beispiel
Wir werden die
.reduce() -Methode verwenden, um die Summe der Elemente eines numerischen Arrays zu erhalten.
const numbers = [5, 10, 15]; const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue);
Tatsächlich kann diese Methode auf viele interessante Arten verwendet werden. Relevante Beispiele finden Sie in der
MDN-Dokumentation . Insbesondere geht es um das Erweitern von Arrays von Arrays, das Gruppieren von Objekten nach Eigenschaften und das Entfernen doppelter Elemente aus Arrays.
Array.prototype.forEach ()
Die Methode
Array.prototype.forEach () wendet die an sie übergebene Funktion auf jedes Element des Arrays an.
▍ Beispiel
Hier
.forEach() , wie Sie jedes Element des Arrays mit der Methode
.forEach() an die Konsole
.forEach() .
const emotions = ['happy', 'sad', 'angry']; emotions.forEach( emotion => console.log(emotion) ); // : // 'happy' // 'sad' // 'angry'
Array.prototype.some ()
Die Methode
Array.prototype.some () prüft, ob mindestens ein Element des Arrays der Bedingung entspricht, die von der an sie übergebenen Funktion angegeben wird. Diese Methode kann sich beispielsweise bei der Lösung der Aufgabe der Überprüfung von Benutzerrechten gut zeigen. Es kann als Analogon zu der zuvor betrachteten
.forEach() , mit dem Unterschied, dass es bei Verwendung mit Hilfe der an sie übergebenen Funktion möglich ist, bestimmte Aktionen für die Array-Elemente auszuführen, bis diese Funktion den wahren Wert zurückgibt. dann die Verarbeitung unterbrechen.
▍ Beispiel
Überprüfen Sie, ob das Array mindestens eine
admin enthält.
const userPrivileges = ['user', 'user', 'user', 'admin']; const containsAdmin = userPrivileges.some( element => element === 'admin');
Array.prototype.every ()
Die Methode
Array.prototype.every () ähnelt der
.some() beschriebenen Methode
.some() , gibt jedoch nur dann
true zurück
true wenn alle Elemente des Arrays die Bedingung erfüllen, die von der an diese Methode übergebenen Funktion angegeben wird.
▍ Beispiel
Überprüfen Sie, ob alle im Array gespeicherten Schätzungen gleich oder größer als 3 sind.
const ratings = [3, 5, 4, 3, 5]; const goodOverallRating = ratings.every( rating => rating >= 3 );
Array.prototype.includes ()
Mit der Methode
Array.prototype.includes () können Sie
feststellen , ob ein Array einen bestimmten Wert enthält. Es ähnelt der
.some() -Methode, überprüft jedoch nicht, ob die Elemente des Arrays einer bestimmten Bedingung entsprechen, sondern das Vorhandensein des im Array angegebenen Werts, wenn es aufgerufen wird.
▍ Beispiel
Überprüfen Sie, ob das Array ein Zeichenfolgenelement
waldo :
const names = ['sophie', 'george', 'waldo', 'stephen', 'henry']; const includesWaldo = names.includes('waldo');
Array.from ()
Mit der statischen Methode
Array.from () können Sie Arrays basierend auf anderen Arrays oder Strings erstellen. Bei Bedarf kann dieser Methode eine Funktion zum Durchführen einer Zuordnung übergeben werden, mit der Sie die Daten beeinflussen können, die in das neue Array fallen. Tatsächlich wird eine spezielle Methode für die Zuordnung bereitgestellt -
Array.prototype.map (). Daher ist nicht ganz klar, warum jemand diese Funktion der
Array.from() -Methode benötigt.
▍ Beispiel
Erstellen Sie ein Array basierend auf der Zeichenfolge.
const newArray = Array.from('hello'); // newArray ['h', 'e', 'l', 'l', 'o']
Erstellen Sie ein Array mit doppelten Werten der Elemente des ursprünglichen numerischen Arrays.
const doubledValues = Array.from([2, 4, 6], number => number * 2);
Object.values ()
Die
Object.values () -Methode gibt ein Array von Eigenschaftswerten des an sie übergebenen Objekts zurück.
▍ Beispiel
Wir bilden ein Array von Objekteigenschaftswerten.
const icecreamColors = { chocolate: 'brown', vanilla: 'white', strawberry: 'red', } const colors = Object.values(icecreamColors); // colors ["brown", "white", "red"]
Object.keys ()
Die
Object.keys () -Methode gibt ein Array zurück, das aus Objekteigenschaftsnamen (Schlüsseln) besteht.
▍ Beispiel
Wir werden ein Array von Objekteigenschaftsnamen bilden.
const icecreamColors = { chocolate: 'brown', vanilla: 'white', strawberry: 'red', } const types = Object.keys(icecreamColors); // types: ["chocolate", "vanilla", "strawberry"]
Object.entries ()
Die
Object.entries () -Methode gibt nach der Verarbeitung des an sie übergebenen Objekts ein Array zurück, das Arrays enthält, die Paare der Form
[, ] , die Eigenschaftsnamen und Werte dieser Eigenschaften sind.
▍ Beispiel
Wir bilden ein Array, das für das für uns interessante Objekt Daten zu den Namen der Eigenschaften und deren Werten enthält.
const weather = { rain: 0, temperature: 24, humidity: 33, } const entries = Object.entries(weather); // entries // [['rain', 0], ['temperature', 24], ['humidity', 33]]
Erweiterungsoperator und Arrays
Mit dem Erweiterungsoperator (
Spread-Operator , ...), der auf Arrays angewendet wird, können Sie diese erweitern, indem Sie ihre Elemente aus ihnen extrahieren. Dieser Operator ist beispielsweise nützlich, wenn Sie mehrere Arrays kombinieren müssen. Darüber hinaus entfällt die Verwendung der
.splice() -Methode, wenn Sie einige Elemente aus dem Array entfernen müssen, da sie mit der
.slice() -Methode kombiniert werden kann, wodurch das ursprüngliche Array nicht
.slice() .
▍ Beispiel
Kombinieren Sie die beiden Arrays.
const spreadableOne = [1, 2, 3, 4]; const spreadableTwo = [5, 6, 7, 8]; const combined = [...spreadableOne, ...spreadableTwo]; // combined : [1, 2, 3, 4, 5, 6, 7, 8]
Wir bilden ein neues Array, das das ursprüngliche Array ist, aus dem das Element gelöscht wurde. In diesem Fall sollte das ursprüngliche Array nicht geändert werden.
const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat']; const mammals = [...animals.slice(0,3), ...animals.slice(4)]; // mammals : ['squirrel', 'bear', 'deer', 'rat']
Erweiterungsoperator und Objekte
Durch Anwenden des Erweiterungsoperators auf Objekte können Sie ihnen neue Eigenschaften und Werte hinzufügen, ohne die ursprünglichen Objekte zu ändern (dh, durch solche Vorgänge werden neue Objekte erstellt). Darüber hinaus kann dieser Operator zum Kombinieren von Objekten verwendet werden. Hierbei ist zu beachten, dass der auf ein Objekt angewendete Erweiterungsoperator keine Auswirkungen auf darin verschachtelte Objekte hat.
▍ Beispiel
Erstellen Sie ein neues Objekt, indem Sie dem ursprünglichen Objekt eine neue Eigenschaft hinzufügen, ohne das ursprüngliche Objekt zu ändern.
const spreadableObject = { name: 'Robert', phone: 'iPhone' }; const newObject = { ...spreadableObject, carModel: 'Volkswagen' }
Die Syntax der verbleibenden Funktionsparameter
Wenn Sie mit Funktionen arbeiten, können Sie die
Syntax der verbleibenden Parameter verwenden, um den Empfang einer beliebigen Anzahl von Argumenten in Form eines Arrays zu organisieren.
▍ Beispiel
Wir drucken ein Array mit den an die Funktion übergebenen Argumenten.
function displayArgumentsArray(...theArguments) { console.log(theArguments); } displayArgumentsArray('hi', 'there', 'bud');
Object.freeze ()
Die
Object.freeze () -Methode „friert“ ein Objekt ein und verhindert, dass die vorhandenen Eigenschaften dieses Objekts das Objekt ändern oder neue Eigenschaften und Werte hinzufügen. Es besteht ein Missverständnis, dass diese Methode dem Deklarieren von Objekten mit dem Schlüsselwort
const ähnelt. Konstante Objekte können jedoch geändert werden.
▍ Beispiel
Wir "frieren" ein Objekt ein, danach versuchen wir, seine Eigenschaft zu ändern und stellen sicher, dass dies nicht möglich ist.
const frozenObject = { name: 'Robert' } Object.freeze(frozenObject); frozenObject.name = 'Henry'; // frozenObject , { name: 'Robert' }
Object.seal ()
Mit der
Object.seal () -Methode können Sie das Objekt "versiegeln" und so das Hinzufügen neuer Eigenschaften verhindern. Gleichzeitig können vorhandene Eigenschaften geändert werden.
▍ Beispiel
Wir "versiegeln" das Objekt, wodurch wir keine neue Eigenschaft hinzufügen können, sondern vorhandene Eigenschaften ändern können.
const sealedObject = { name: 'Robert' } Object.seal(sealedObject); sealedObject.name = 'Bob'; sealedObject.wearsWatch = true; // sealedObject : { name: 'Bob' }
Object.assign ()
Mit der
Object.assign () -Methode können Sie Objekte kombinieren, indem Sie Eigenschaften von einem Objekt in ein anderes kopieren. Tatsächlich kann der gleiche Effekt unter Verwendung des oben beschriebenen Expansionsoperators erzielt werden, so dass auf dieses Verfahren vollständig verzichtet werden kann. Es ist zu beachten, dass diese Methode wie der Erweiterungsoperator kein tiefes Klonen von Objekten durchführt. Wenn Sie ein vorgefertigtes Tool zum tiefen Klonen von Objekten benötigen, sehen Sie sich die Tools der
Lodash- Bibliothek an.
▍ Beispiel
Lassen Sie uns eines aus zwei Objekten erstellen.
const firstObject = { firstName: 'Robert' } const secondObject = { lastName: 'Cooper' } const combinedObject = Object.assign(firstObject, secondObject);
Zusammenfassung
In diesem Artikel haben wir über nützliche Methoden für Arrays und Objekte in JavaScript gesprochen. Viele der hier diskutierten Methoden geben neue Arrays oder Objekte zurück. Dies ermöglicht es, sie zu Ketten zu kombinieren. Diese Methoden ändern nicht die Quelldaten, was bei der React-Entwicklung besonders wichtig ist. Darüber hinaus können Sie durch die Verwendung dieser Methoden in den allermeisten Fällen Schleifen wie
for und
while .
Liebe Leser! Welche Methoden für Arrays und Objekte in JavaScript verwenden Sie am häufigsten?
