Rumah >hujung hadapan web >tutorial js >Bekerja dengan Peta dan Set dalam JavaScript: Panduan Komprehensif
Peta dan Set ialah dua struktur data penting yang diperkenalkan dalam ES6 (ECMAScript 2015) yang menawarkan fungsi yang dipertingkatkan berbanding objek dan tatasusunan tradisional. Kedua-dua Peta dan Set membolehkan anda menyimpan nilai unik dan bekerja dengan data dengan cara yang lebih teratur dan cekap.
Satu Peta ialah koleksi pasangan nilai kunci yang mana kedua-dua kunci dan nilai boleh menjadi sebarang jenis data. Tidak seperti objek, yang hanya boleh mempunyai rentetan atau simbol sebagai kunci, Peta membenarkan sebarang nilai (objek, tatasusunan, fungsi, dll.) digunakan sebagai kunci.
Untuk mencipta Peta, anda boleh menggunakan pembina Peta:
const map = new Map();
Sebagai alternatif, anda boleh memulakan Peta dengan tatasusunan pasangan nilai kunci:
const map = new Map([ ['name', 'Alice'], ['age', 25], ['city', 'New York'] ]); console.log(map);
Anda boleh menambah entri menggunakan kaedah set():
const map = new Map(); map.set('name', 'John'); map.set('age', 30); map.set('city', 'Los Angeles'); console.log(map);
Anda boleh mengakses nilai yang dikaitkan dengan kunci menggunakan kaedah get():
const map = new Map([ ['name', 'Alice'], ['age', 25] ]); console.log(map.get('name')); // Output: Alice console.log(map.get('age')); // Output: 25
Untuk menyemak sama ada kunci wujud, gunakan kaedah has():
const map = new Map([ ['name', 'John'], ['age', 30] ]); console.log(map.has('name')); // Output: true console.log(map.has('city')); // Output: false
Anda boleh mengalih keluar pasangan nilai kunci menggunakan kaedah delete():
map.delete('age'); console.log(map.has('age')); // Output: false
Untuk mengosongkan semua entri daripada Peta:
map.clear(); console.log(map.size); // Output: 0
Anda boleh lelaran pada pasangan nilai kunci dalam Peta menggunakan forEach(), atau for...of loop:
const map = new Map([ ['name', 'Alice'], ['age', 25] ]); // Using forEach map.forEach((value, key) => { console.log(key, value); }); // Using for...of for (const [key, value] of map) { console.log(key, value); }
Set Set ialah koleksi nilai unik, bermakna ia mengalih keluar sebarang nilai pendua secara automatik. Tidak seperti tatasusunan, yang boleh menyimpan berbilang elemen yang sama, Set memastikan setiap nilai dalam koleksi adalah unik.
Anda boleh mencipta Set menggunakan pembina Set:
const set = new Set();
Sebagai alternatif, anda boleh memulakan Set dengan tatasusunan nilai:
const set = new Set([1, 2, 3, 4, 5]); console.log(set);
Anda boleh menambah nilai pada Set menggunakan kaedah add():
const set = new Set(); set.add(1); set.add(2); set.add(3); set.add(2); // Duplicate value, won't be added console.log(set); // Output: Set { 1, 2, 3 }
Untuk menyemak sama ada nilai wujud dalam Set, gunakan kaedah has():
console.log(set.has(2)); // Output: true console.log(set.has(4)); // Output: false
Anda boleh mengalih keluar nilai daripada Set menggunakan kaedah delete():
const map = new Map();
Untuk mengosongkan semua nilai daripada Set:
const map = new Map([ ['name', 'Alice'], ['age', 25], ['city', 'New York'] ]); console.log(map);
Anda boleh mengulang nilai dalam Set menggunakan forEach() atau for...of loop:
const map = new Map(); map.set('name', 'John'); map.set('age', 30); map.set('city', 'Los Angeles'); console.log(map);
Feature | Map | Set |
---|---|---|
Storage | Stores key-value pairs | Stores unique values only |
Key Types | Any type (objects, arrays, primitive types) | Only values (no keys) |
Uniqueness | Keys must be unique, values can repeat | Values must be unique |
Order of Elements | Iterates in insertion order | Iterates in insertion order |
Size | map.size | set.size |
Methods | set(), get(), has(), delete(), clear() | add(), has(), delete(), clear() |
Saiz
Menyimpan pilihan pengguna
Peta menawarkan storan pasangan nilai kunci yang cekap dengan sokongan untuk sebarang jenis data sebagai kunci dan ia mengekalkan susunan sisipan.
Set
Atas ialah kandungan terperinci Bekerja dengan Peta dan Set dalam JavaScript: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!