Rumah > hujung hadapan web > tutorial js > Peta dalam JS

Peta dalam JS

WBOY
Lepaskan: 2024-07-19 15:06:58
asal
880 orang telah melayarinya

Map in JS

Peta dalam JavaScript ialah koleksi pasangan nilai kunci yang mana kunci boleh terdiri daripada sebarang jenis. Ia mengekalkan susunan sisipan, bermakna item itu diulang mengikut susunan ia ditambahkan.

Ciri-ciri Utama Peta;

  1. Kunci Unik: Setiap kunci dalam Peta adalah unik.
  2. Sebarang Jenis Data untuk Kekunci: Tidak seperti objek, kunci boleh terdiri daripada sebarang jenis data, termasuk fungsi, objek atau sebarang jenis primitif.
  3. Boleh Diulang: Anda boleh mengulangi kekunci, nilai atau entri Peta.

Operasi Asas

Mencipta Peta

let funnyMap = new Map();
Salin selepas log masuk

Menambah Elemen pada Peta

funnyMap.set('a', 1); // string key
funnyMap.set(2, 'two'); // number key
funnyMap.set(true, 'yes'); // boolean key
funnyMap.set({name: 'obj'}, 'object'); // object key

// Funny example
funnyMap.set('knock-knock', 'who’s there?');
Salin selepas log masuk

Mendapatkan Nilai daripada Peta

console.log(funnyMap.get('a')); // 1
console.log(funnyMap.get(2)); // two
console.log(funnyMap.get(true)); // yes

// Funny example
console.log(funnyMap.get('knock-knock')); // who’s there?
Salin selepas log masuk

Menyemak Kunci

console.log(funnyMap.has('a')); // true
console.log(funnyMap.has(42)); // false

// Funny example
console.log(funnyMap.has('chicken')); // false (It crossed the road)
Salin selepas log masuk

Mengalih keluar Elemen

funnyMap.delete('a');
console.log(funnyMap.has('a')); // false

// Funny example
funnyMap.delete('knock-knock');
console.log(funnyMap.get('knock-knock')); // undefined (No one answered)
Salin selepas log masuk

Mendapatkan Saiz Peta

console.log(funnyMap.size); // 3 after deletion

// Funny example
console.log(`The map has ${funnyMap.size} jokes left.`);
Salin selepas log masuk

Membersihkan Peta

funnyMap.clear();
console.log(funnyMap.size); // 0

// Funny example
console.log(`All jokes are cleared from the map.`);
Salin selepas log masuk

Mengulangi Peta

Menggunakan untuk...daripada

funnyMap.set('banana', 'yellow');
funnyMap.set('apple', 'red');
funnyMap.set('grape', 'purple');

// Iterating over keys
for (let key of funnyMap.keys()) {
    console.log(`Key: ${key}`);
}

// Iterating over values
for (let value of funnyMap.values()) {
    console.log(`Value: ${value}`);
}

// Iterating over entries
for (let [key, value] of funnyMap.entries()) {
    console.log(`Key: ${key}, Value: ${value}`);
}

// Funny example
funnyMap.set('dad joke', 'What do you call fake spaghetti? An impasta!');
for (let [key, value] of funnyMap.entries()) {
    console.log(`Here’s a ${key}: ${value}`);
}
Salin selepas log masuk

Menggunakan forEach

funnyMap.forEach((value, key) => {
    console.log(`Key: ${key}, Value: ${value}`);
});

// Funny example
funnyMap.set('bad pun', 'I’m reading a book on anti-gravity. It’s impossible to put down!');
funnyMap.forEach((value, key) => {
    console.log(`Here’s a ${key}: ${value}`);
});
Salin selepas log masuk

Kegunaan Praktikal

Pengiraan Perkataan (Versi Lucu)

Bayangkan anda ingin mengira berapa kali perkataan tertentu muncul dalam koleksi jenaka:

let jokeText = "Why did the scarecrow win an award? Because he was outstanding in his field!";

// Splitting text into words
let words = jokeText.split(/\W+/);

let wordCount = new Map();

words.forEach(word => {
    word = word.toLowerCase();
    if (wordCount.has(word)) {
        wordCount.set(word, wordCount.get(word) + 1);
    } else {
        wordCount.set(word, 1);
    }
});

wordCount.forEach((count, word) => {
    console.log(`Word: ${word}, Count: ${count}`);
});

// Funny example
console.log('Word counts in our joke:');
wordCount.forEach((count, word) => {
    console.log(`"${word}": ${count} times`);
});
Salin selepas log masuk

Ringkasan

Peta dalam JavaScript ialah struktur data serba boleh yang boleh menyimpan pasangan nilai kunci bagi sebarang jenis data, menyediakan kaedah lelaran yang mudah dan mengekalkan susunan elemen. Ia berguna untuk senario di mana anda memerlukan pengurusan kunci yang lebih fleksibel daripada objek biasa, seperti mengira perkataan dalam jenaka atau menyimpan respons kepada pelbagai teka-teki.

Atas ialah kandungan terperinci Peta dalam JS. 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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan