Heim > Web-Frontend > js-Tutorial > Hauptteil

Tag – avaScript Foundations Professional-Zertifizierung von Mozilla

WBOY
Freigeben: 2024-08-29 13:02:09
Original
944 Leute haben es durchsucht

Day - avaScript Foundations Professional Certification by Mozilla

Konzept-Highlights:

  1. Verwendung von for...of- und for...in-Schleifen
  2. Unterschiede zwischen Set() und Array, Map() und Objects und Set() und Map()

1. Verwendung von for...of und for...in-Schleifen

Looping ist ein grundlegendes Konzept in der Programmierung und ermöglicht die mehrfache Ausführung eines Codeblocks. In JavaScript sind for...of und for...in zwei häufig verwendete Schleifen, die jedoch unterschiedlichen Zwecken dienen. Wenn Sie die Unterschiede verstehen, können Sie effizienteren und effektiveren Code schreiben.

1.1 for...of-Schleife

Die for...of-Schleife wird verwendet, um iterierbare Objekte wie Arrays, Strings, Maps und Mengen zu durchlaufen. Es bietet eine einfache Möglichkeit, auf jeden Wert in der Sequenz zuzugreifen, ohne sich um den Index kümmern zu müssen.

z.B.)

let teams = ['Red Sox', 'Dodgers', 'Padres']; 

for (let team of teams) {
   console.log(team);
}

// Output: 
// Read Sox
// Dodgers
// Padres
Nach dem Login kopieren

In diesem Beispiel greift for...of direkt auf jedes Element (Team) im Teams-Array zu und protokolliert es in der Konsole. Diese Schleife ist ideal, wenn Sie nur die Werte und nicht die Indizes benötigen.

1-2. for...in Schleife

Die for...in-Schleife hingegen wird verwendet, um die Eigenschaften (Schlüssel) eines Objekts zu durchlaufen. Es wird oft mit Objekten verwendet, kann aber auch mit Arrays verwendet werden, um auf Indizes zuzugreifen.

z.B.)

let Mariners = {place: 'Seattle', league: 'American', color: 'navy blue'}; 

for (let key in Mariners) {
   console.log(`${key}: ${Mariners[key]}`); 
}

// Output: 
// place: Seattle
// league: American
// color: navy blue
Nach dem Login kopieren

In diesem Beispiel iteriert for...in über die Schlüssel des Mariners-Objekts und ermöglicht so den Zugriff sowohl auf den Schlüssel als auch auf den entsprechenden Wert. Es ist wichtig zu beachten, dass for...in bei Arrays mit Vorsicht verwendet werden sollte, da es alle aufzählbaren Eigenschaften und nicht nur numerische Indizes durchläuft.

1-3. Hauptunterschiede

  • Zweck:
    • for...of: Iteriert über die Werte eines iterierbaren Objekts (Arrays, Strings, Mengen, Karten).
    • for...in: Iteriert über die aufzählbaren Eigenschaften (Schlüssel) eines Objekts.
  • Anwendungsfall:
    • Verwenden Sie diese Option, wenn Sie direkt auf Werte zugreifen müssen.
    • Verwenden Sie for...in, wenn Sie auf Schlüssel oder Eigenschaftsnamen zugreifen müssen.

2. Unterschiede zwischen Set() und Array, Map() und Objects sowie Set() und `Map()

JavaScript bietet eine Vielzahl von Datenstrukturen, jede mit ihren Stärken und Schwächen. Ich habe die Unterschiede zwischen einigen der am häufigsten verwendeten untersucht:

2-1. Set() vs. Array

  • Einzigartigkeit:
    • Set() speichert eindeutige Werte, was bedeutet, dass keine Duplikate zulässig sind.
    • Array erlaubt doppelte Werte.
  • Bestellung:
    • Set() iteriert die Einfügereihenfolge.
    • Array behält auch die Reihenfolge der Einfügung bei, aber Duplikate können die Art und Weise ändern, wie Sie damit interagieren.

z.B.)

`

let mySet = new Set([1, 2, 3, 3, 4]);
let myArray = [1, 2, 3, 3, 4];

console.log(mySet) // Ausgabe: Set { 1, 2, 3, 4 }
console.log(myArray) // Ausgabe: [1, 2, 3, 3, 4]

`

In diesem Beispiel entfernt Set() automatisch die Duplikate 3, während das Array sie behält. Set() ist nützlich, wenn Sie eine Sammlung einzigartiger Elemente benötigen.

2-2. Map() vs. Objekt

  • Schlüsseltypen:

    • Map(): Schlüssel können von jedem Typ sein, einschließlich Objekten, Funktionen und primitiven Typen.
    • Objekt: Schlüssel sind normalerweise Zeichenfolgen oder Symbole.
  • Bestellung:

    • Map() behält die Reihenfolge der Einfügung bei.
    • Objekt garantiert nicht die Reihenfolge der Schlüssel.
  • Größe:

    • Map() hat eine size-Eigenschaft, die die Anzahl der Schlüssel-Wert-Paare angibt.
    • Objekt erfordert die manuelle Bestimmung der Größe durch Iteration durch die Schlüssel.

z.B.)

`
let myMap = new Map();
myMap.set('name', 'John');
myMap.set(42, 'Die Antwort');
myMap.set({}, 'Leeres Objekt');

let myObject = {
Name: 'John',
42: 'Die Antwort',
{}: 'Leeres Objekt'
};

console.log(myMap.size); // Ausgabe: 3
console.log(Object.keys(myObject).length); // Ausgabe: 2 (aufgrund der Konvertierung der Schlüsselzeichenfolge)
`
In diesem Beispiel ermöglicht Map() die Verwendung verschiedener Schlüsseltypen, während Objektschlüssel in Zeichenfolgen konvertiert werden. Darüber hinaus stellt Map() problemlos die Größe der Karte bereit, während Sie für Objekte die Schlüssel manuell zählen müssen.

2-3. Set() vs. Map()

  • Zweck:
    • Set() ist eine Sammlung eindeutiger Werte.
    • Map() ist eine Sammlung von Schlüssel-Wert-Paaren.
  • Anwendungsfall:
    • Verwenden Sie Set(), wenn Sie eine Liste eindeutiger Elemente speichern müssen.
    • Verwenden Sie Map(), wenn Sie Werte mit Schlüsseln verknüpfen müssen.

z.B.)

`
let mySet = new Set([1, 2 ,3]);
let myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);

console.log(mySet.has(2)); // Ausgabe: true
console.log(myMap.get('key1')); // Ausgabe: 'value'1
`
In diesem Beispiel wird Set() verwendet, um das Vorhandensein eines Werts zu prüfen, während Map() verwendet wird, um einen mit einem Schlüssel verknüpften Wert abzurufen.

Das obige ist der detaillierte Inhalt vonTag – avaScript Foundations Professional-Zertifizierung von Mozilla. 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!