Heim > Web-Frontend > js-Tutorial > Hauptteil

Meine Reaktionsreise: Tag 4

DDD
Freigeben: 2024-11-25 05:52:11
Original
169 Leute haben es durchsucht

My React Journey: Day 4

Heute ging es darum, tiefer in Objekte und Arrays einzutauchen, zwei wesentliche Datenstrukturen in JavaScript. Das Verständnis ihrer Methoden und deren Destrukturierung eröffnete neue Möglichkeiten zur Codevereinfachung. Hier ist eine Zusammenfassung dessen, was ich gelernt habe:

Objekte
Objekte sind Sammlungen verwandter Eigenschaften und Methoden, die es uns ermöglichen, Daten sinnvoll zu gruppieren.

Beispielobjekt:

let user = {
    name: 'Segun',
    age: 30,
    email: 'ayoooladamilare@gmail.com',
    location: 'Nigeria',
    blogs: ['Why are you living', 'The original me'],
    login: function () {
        console.log(this.name, 'logged in');
    },
    logout: function () {
        console.log(this.name, 'logged out');
    },
};
Nach dem Login kopieren

JavaScript gibt uns eingebaute Objekte und die Möglichkeit, benutzerdefinierte Objekte zu erstellen.

Objektmethoden
Object.keys(user): Gibt ein Array aller Schlüssel im Objekt zurück.

console.log(Object.keys(user)); // Output: ['name', 'age', 'email', 'location', 'blogs']
Nach dem Login kopieren

Object.values(user): Gibt ein Array aller Werte im Objekt zurück.

console.log(Object.values(user)); // Output: ['Segun', 30, 'ayoooladamilare@gmail.com', 'Nigeria', ['Why are you living', 'The original me']]
Nach dem Login kopieren

Object.seal(user): Verhindert das Hinzufügen oder Entfernen von Eigenschaften, ermöglicht jedoch die Änderung vorhandener Eigenschaften.

Object.seal(user);
user.age = 31; // Allowed
user.country = 'Ghana'; // Not allowed
Nach dem Login kopieren

Objektzerstörung
Destrukturierung vereinfacht das Extrahieren von Eigenschaften aus einem Objekt.

const { name, age, email, location } = user;
console.log(name); // Output: 'Segun'
console.log(location); // Output: 'Nigeria'
Nach dem Login kopieren

Arrays
Arrays sind geordnete Listen und eignen sich daher perfekt für die Verarbeitung von Datensequenzen.

Beispielarray:

const numbers = [1, 2, 3, 4, 5];
Nach dem Login kopieren

Array-Methoden
.push(): Fügt Elemente am Ende eines Arrays hinzu und gibt die neue Länge zurück.

numbers.push(6);

console.log(numbers); // Output: [1, 2, 3, 4, 5, 6]
Nach dem Login kopieren

.pop(): Entfernt das letzte Element aus einem Array und gibt es zurück.

numbers.pop();

console.log(numbers); // Output: [1, 2, 3, 4, 5]
Nach dem Login kopieren

Array-Destrukturierung
Ähnlich wie die Objektdestrukturierung ermöglicht die Array-Destrukturierung eine saubere Extraktion von Elementen.

const colors = ['red', 'green', 'blue', 'black', 'white'];
let [first, , third] = colors;
console.log(first, third); // Output: 'red' 'blue'
Nach dem Login kopieren

Wir können Elemente auch durch Destrukturierung austauschen:

[colors[0], colors[4]] = [colors[4], colors[0]];
console.log(colors); // Output: ['white', 'green', 'blue', 'black', 'red']
Nach dem Login kopieren

Abschließende Gedanken
Die Arbeit mit Objekten und Arrays, insbesondere die Verwendung von Methoden und Destrukturierung, macht die Codierung sauberer und intuitiver. Mir gefiel, wie die Destrukturierung den Zugriff auf Daten vereinfacht und das Erlernen integrierter Methoden eine Stärkung darstellt.

Tag 5, ich komme! Diese Reise wird von Tag zu Tag besser. Bleiben Sie dran!

Das obige ist der detaillierte Inhalt vonMeine Reaktionsreise: Tag 4. 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