Rumah > hujung hadapan web > tutorial js > Bekerja dengan Peta dan Set dalam JavaScript: Panduan Komprehensif

Bekerja dengan Peta dan Set dalam JavaScript: Panduan Komprehensif

Patricia Arquette
Lepaskan: 2024-12-22 14:21:15
asal
677 orang telah melayarinya

Working with Maps and Sets in JavaScript: A Comprehensive Guide

Bekerja dengan Peta dan Set dalam JavaScript

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.

1. Peta dalam JavaScript

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.

Membuat Peta

Untuk mencipta Peta, anda boleh menggunakan pembina Peta:

const map = new Map();
Salin selepas log masuk
Salin selepas log masuk

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

Menambah Entri pada Peta

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

Mengakses Nilai dalam Peta

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

Menyemak Kunci dalam Peta

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

Mengalih keluar Entri daripada Peta

Anda boleh mengalih keluar pasangan nilai kunci menggunakan kaedah delete():

map.delete('age');
console.log(map.has('age'));  // Output: false
Salin selepas log masuk

Untuk mengosongkan semua entri daripada Peta:

map.clear();
console.log(map.size);  // Output: 0
Salin selepas log masuk

Lelaran Melalui Peta

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

2. Ditetapkan dalam JavaScript

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.

Mencipta Set

Anda boleh mencipta Set menggunakan pembina Set:

const set = new Set();
Salin selepas log masuk

Sebagai alternatif, anda boleh memulakan Set dengan tatasusunan nilai:

const set = new Set([1, 2, 3, 4, 5]);
console.log(set);
Salin selepas log masuk

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

Menyemak Nilai dalam Set

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

Mengalih keluar Nilai daripada Set

Anda boleh mengalih keluar nilai daripada Set menggunakan kaedah delete():

const map = new Map();
Salin selepas log masuk
Salin selepas log masuk

Untuk mengosongkan semua nilai daripada Set:

const map = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['city', 'New York']
]);

console.log(map);
Salin selepas log masuk
Salin selepas log masuk

Lelaran Melalui Set

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

3. Perbandingan Antara Peta dan Set

Ciri Peta Tetapkan
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()
Storan Menyimpan pasangan nilai kunci Menyimpan nilai unik sahaja

Jenis Utama

Sebarang jenis (objek, tatasusunan, jenis primitif) Hanya nilai (tiada kunci) Keunikan Kunci mestilah unik, nilai boleh berulang Nilai mestilah unik
    Susunan Unsur
Berulang dalam susunan sisipan Berulang dalam susunan sisipan

Saiz

saiz peta set.size Kaedah set(), get(), has(), delete(), clear() add(), has(), delete(), clear()
  • 4.
  • Kes Penggunaan untuk Peta dan Set
Peta
  • berguna apabila anda perlu mengaitkan kunci unik dengan nilai tertentu. Contohnya termasuk:

    Menyimpan pilihan pengguna

      Menyimpan pilihan konfigurasi
    • Caching data berdasarkan kekunci
  • Set sesuai apabila anda perlu menyimpan koleksi nilai unik. Contohnya termasuk:

      Menjejak pelawat unik di tapak web
    • Mengalih keluar nilai pendua daripada tatasusunan
    • Menjejaki item yang telah diproses atau dilihat
    Kesimpulan


    Peta menawarkan storan pasangan nilai kunci yang cekap dengan sokongan untuk sebarang jenis data sebagai kunci dan ia mengekalkan susunan sisipan.

    Set

    menyimpan nilai unik dan amat berguna apabila anda ingin memastikan tiada pendua dalam koleksi.
    Kedua-dua Peta dan Set menyediakan ciri yang berkuasa dan boleh membantu anda mengurus data dengan cara yang lebih berstruktur dan cekap. Hai, saya Abhay Singh Kathayat! Saya seorang pembangun timbunan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna. Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

    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!

    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