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
Barbara StreisandOriginal
2024-12-09 08:33:12374Durchsuche

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)
}

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);
}
  • 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);
}

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)

}

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
    }
}

Damit können Sie einfach Dinge tun wie:

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

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

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)
}

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)
}

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!

Stellungnahme:
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