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
Patricia Arquetteasal
2024-12-22 14:21:15681semak imbas

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();

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

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

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

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

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

Untuk mengosongkan semua entri daripada Peta:

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

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

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();

Sebagai alternatif, anda boleh memulakan Set dengan tatasusunan nilai:

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

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 }

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

Mengalih keluar Nilai daripada Set

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

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

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!

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