Heim > Web-Frontend > js-Tutorial > Eine etwas bessere „Karte' kann Sie einfacher dorthin bringen ...

Eine etwas bessere „Karte' kann Sie einfacher dorthin bringen ...

Barbara Streisand
Freigeben: 2024-12-09 08:33:12
Original
397 Leute haben es durchsucht

A slightly better

In JavaScript ist die Map eine sehr nützliche integrierte Klasse, die eine O(1)-Suche zwischen einem Schlüssel und einem Wert erstellt.

const myMap = new Map()

for(const file of files) {
    const [,extension] = file.name.split(".")
    if(!myMap.has(extension)) {
        myMap.set(extension, [])
    }
    myMap.get(extension).push(file)
}

Nach dem Login kopieren

Sie können Maps für alle möglichen Dinge verwenden, die Sie wahrscheinlich regelmäßig tun:

  • Erstellen gruppierter Datenlisten, wie im obigen Beispiel mit Gruppierung nach Dateierweiterung

  • Aggregieren von Daten, z. B. Zählen oder Summieren von Werten über einen Bereich von Schlüsseln

// 1) Counting occurrences
const items = ['apple','apple','orange','banana','apple'];
const counts = new Map();
for (const item of items) {
  counts.set(item, (counts.get(item) || 0) + 1);
}
Nach dem Login kopieren
  • Erstellen schneller Suchvorgänge zur Verwendung in nachfolgenden Schritten
const users = [
  {id:1,name:'A',role:'admin'},
  {id:2,name:'B',role:'user'},
  {id:3,name:'C',role:'user'}
];
const userMap = new Map();
for (const u of users) {
  userMap.set(u.id, u);
}
Nach dem Login kopieren

Map wird aus mehreren Gründen der Verwendung eines einfachen Objekts ({}) vorgezogen, solange Sie das Ergebnis nicht mit einem Stringify speichern müssen:

  • Es können Schlüssel akzeptiert werden, die keine Zeichenfolgen sind
  • Es ist etwas schneller als ein Objekt, selbst wenn Sie Zeichenfolgentasten verwenden

Es kann jedoch viele grundsätzliche und gemischte Bedenken geben: Wenn das Objekt, das Sie in der Karte speichern, eine Konstruktion benötigt, die von einem einfachen Array bis zu einem komplexen Objekt reicht, muss diese mit dem Code vermischt werden, der es verwendet .

const map = new Map()

for(const item of items) {
   if(!map.has(item.type)) {
       const newType = new Type(item.type, getInfoForType(item.type))
       map.set(item.type, newType)
   }
   map.get(item.type).doSomething(item)

}

Nach dem Login kopieren

Das „kann“ in Ordnung sein, aber es wird schwieriger, trocken zu bleiben, wenn Sie den Wert an mehreren Stellen aktualisieren oder initialisieren müssen.

Aus diesem Grund verwende ich eine MapPlus-Klasse, eine Erweiterung von Map, die eine Initialisierungsfunktion für fehlende Schlüssel bereitstellt, die dem Konstruktor oder als zweiter Parameter für get bereitgestellt werden kann, wenn der Initialisierer darüber hinausgehende Kontextinformationen benötigt der Schlüssel.

class MapPlus extends Map {
    constructor(missingFunction) {
        super()
        this.missingFunction = missingFunction
    }

    get(key, createIfMissing = this.missingFunction) {
        let result = super.get(key)
        if (!result && createIfMissing) {
            result = createIfMissing(key)
            if (result && result.then) {
                const promise = result.then((value) => {
                    super.set(key, value)
                    return value
                })
                super.set(key, promise)
            } else {
                super.set(key, result)
            }
        }
        return result
    }
}
Nach dem Login kopieren

Damit können Sie einfach Dinge tun wie:

const map = new MapPlus(()=>[])

for(const item of items) {
    map.get(item.type).push(item)
}

Nach dem Login kopieren

Als ob der Schlüssel fehlen würde, wird lediglich ein leeres Array erstellt.

Ich benötige oft zwei Ebenen davon, daher werde ich Karten wie folgt definieren:

const map = new MapPlus(()=>new MapPlus(()=>[]))
for(const item of items) {
   map.get(item.type).get(item.subType).push(item)
}
Nach dem Login kopieren

Die Konstruktorfunktion ruft den verwendeten Schlüssel ab, sodass wir auch Folgendes tun können:

const map = new MapPlus((type)=>new Type(type, getInfoForType(type))

for(const item of items) {
    map.get(item.type).doSomething(item)
}
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEine etwas bessere „Karte' kann Sie einfacher dorthin bringen .... 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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage