Rumah >hujung hadapan web >tutorial js >'Peta' yang sedikit lebih baik boleh membawa anda ke sana dengan lebih mudah...
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) }
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); }
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); }
Peta lebih disukai daripada menggunakan objek ringkas ({}) atas beberapa sebab, selagi anda tidak perlu menyimpan hasilnya menggunakan stringify:
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) }
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 } }
Dengan ini anda boleh melakukan perkara seperti:
const map = new MapPlus(()=>[]) for(const item of items) { map.get(item.type).push(item) }
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) }
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) }
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!