Rumah > hujung hadapan web > tutorial js > 'Peta' yang sedikit lebih baik boleh membawa anda ke sana dengan lebih mudah...

'Peta' yang sedikit lebih baik boleh membawa anda ke sana dengan lebih mudah...

Barbara Streisand
Lepaskan: 2024-12-09 08:33:12
asal
400 orang telah melayarinya

A slightly better

Dalam JavaScript Peta ialah binaan dalam kelas yang sangat berguna yang mencipta carian O(1) antara kunci dan nilai.

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

Salin selepas log masuk

Anda boleh menggunakan Peta untuk semua jenis perkara yang mungkin anda kerap lakukan:

  • Membuat senarai berkumpulan data, seperti contoh di atas mengumpulkan mengikut sambungan fail

  • Mengagregatkan data, seperti mengira atau menjumlahkan nilai merentas julat kunci

// 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);
}
Salin selepas log masuk
  • Mencipta carian pantas untuk digunakan dalam langkah seterusnya
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);
}
Salin selepas log masuk

Peta lebih disukai daripada menggunakan objek ringkas ({}) atas beberapa sebab, selagi anda tidak perlu menyimpan hasilnya menggunakan stringify:

  • Ia boleh mengambil kunci yang bukan rentetan
  • Ia lebih laju sedikit daripada Objek walaupun anda menggunakan kekunci rentetan

Mungkin terdapat banyak masalah dan kebimbangan bercampur-campur walaupun, jika objek yang anda simpan dalam peta memerlukan pembinaan, iaitu apa-apa sahaja daripada tatasusunan mudah kepada objek kompleks, ini perlu diselangi dengan kod yang menggunakannya .

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)

}

Salin selepas log masuk

Ini "boleh" ok, tetapi menjadi lebih sukar untuk mengekalkan KERING jika anda perlu mengemas kini atau memulakan nilai di berbilang tempat.

Atas sebab ini saya menggunakan kelas MapPlus, yang merupakan lanjutan kepada Map yang menyediakan fungsi pemula kunci yang hilang yang boleh dibekalkan kepada pembina atau sebagai parameter kedua untuk mendapatkan jika pemula memang memerlukan maklumat konteks di luar sekadar kuncinya.

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
    }
}
Salin selepas log masuk

Dengan ini anda boleh melakukan perkara seperti:

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

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

Salin selepas log masuk

Seolah-olah kunci hilang ia hanya akan membuat tatasusunan kosong.

Saya selalunya memerlukan dua tahap ini supaya saya akan menetapkan peta seperti ini:

const map = new MapPlus(()=>new MapPlus(()=>[]))
for(const item of items) {
   map.get(item.type).get(item.subType).push(item)
}
Salin selepas log masuk

Fungsi pembina mendapat kunci yang digunakan supaya kita juga boleh melakukan:

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

for(const item of items) {
    map.get(item.type).doSomething(item)
}
Salin selepas log masuk

Atas ialah kandungan terperinci 'Peta' yang sedikit lebih baik boleh membawa anda ke sana dengan lebih mudah.... Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan